Processing Font Alert

Week 7’s assignment for the 2D Animation and Interaction Course of Andrew Glassner was to create an animation. I have to use at least 2 images. At least 2 pieces of type in different typefaces. Control motion by 2 different repeating patterns. Use at least one PVector. I am allowed to use as many typefaces and images as I like. I am not allowed to use language elements we haven’t covered yet.

In 2009 I did a photography workshop with Stephen Johnson (Dead Valley in Winter). Some photography can be found here:

Stephen Johnson’s Photoworkshop Dead Valley in Winter

My camera recorded (beside of pictures) EXIF data (EXchangeable Image File format). EXIF is a standard that specifies the formats for images used by digital cameras and smart-phones. In 2012 I did a MOOC (Massive Open Online Course) about data visualization with Alberto Cairo. One of the results was the visualization of the EXIF data I had gathered from Stephen Johnson’s 2009 Photography Course in Death Valley National Park. Here is the link to the page I designed.

Alberto Cairo’s Infographics & Data Visualization Course

In this week I will make a basic interactive version of the EXIF data from Death Valley’s National Park Photography Course. I will make it interactive with very simple animations and a few photographs. It’s just 1 day out of 9. And the EXIF data is completely faked because its more about practicing programming instead of using real data. I began with choosing the typeface. In this situation it had to be a few fonts from the Univers family. More specific Univers 75 and Univers 45. So I started Processing and the strange thing was that the Create Font Tool doesn’t let me use Univers Black. Instead it gives me Univers 45 and in some cases it gives me Univers 65. In fact Processing skippes the total Univers Font Family. I tried .otf en .ttf versions of Univers but it would not work. The only thing I could do is send a message to the Processing Discussion Forum. The discussion has not ended yet. But I had to work around that font problem. So I began with a static header which I created in Photoshop. Next step was to get 10 photos in it and to make some functionality that you can select the photo’s by clicking on 10 small rectangles.


When I finished the selection of the photos by clicking on the small rectangles I added a very simplified map  of Death Valley National Park. I could have made this much more detailed but the main goal is to practice programming. Not practicing Illustrator. I would like the dot in the map moving with the selected photo. So you could see on the map at what location the photo was taken.


I added the names to the map in Photoshop. For now the header, map and the photo’s were three separate image files. I thought maybe I would be more handy to combine the map and the photo’s in one .png file. If you select a photo than the place (indicated by a red dot) would automatically change too.


To get some of the data beneath the header, pictures and the map I thought it would be nice if all data comes in from the left side and animates itself to a certain position in the layout. So I created a test .png file which starts outside the left side (a negative position) of the display window. For now I animated it to an arbitrary position in the display window. That gave me two problems. The first one is created by the fact that the display screen in Processing is refreshed 60 frames per second. So it keeps on rendering everything over each other which is in the draw part of Processing. That gives a very poor image quality for the test .png file. The second problem is created by the fact that I cannot stop that refreshing because than the interaction of the photos and map gets lost.


So I decided to get everything which is not moving into the background. I made a rough layout of the data part below and made a .png file of it. Put everything in the background image. The map and photos and interaction are now combined into a separate function. The timeline is one black and transparent .png file which animates from a minus position outside the left side of the display into the position were it is now. That was working well.


To finish everything I faked the other parts of the layout into its place. And that finishes this weeks assignment. Although I did not meet the requirements I learned other things which might be handy in the near future. The interactive Death Valley National Park EXIF data version will be on-line soon.



Comments? Leave a reply.

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s