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.



Curves and curves

The assignment for Week 6 of the 2D Animation and Interaction Course of Andrew Glassner was: Create an interactive program that draws a picture using curves, and moves objects along curves. Use at least one Catmull-Rom curve using multiple, smoothly joined-up segments. Use at least one Bézier curve using multiple, smoothly joined-up segments. You’re free to make your curves out of multiple individual segments if you like. You can also use Processing’s built-in tools for making big, multi segment curves if you prefer. Don’t use language elements we haven’t covered yet. Remember that fill (), stroke (), and strokeWeight () all apply to curves.

I started with some Catmull-Rom curve experiments. Because Catmull-Rom is easy to use and pretty straightforward. I thought it would be nice to make some vertical waves. While I was working on that I found this result.


Very colorful indeed. So what happens if you throw the color out and just work in black and white. Moving the mouse left and right moves the blob’s right-side.


What happens if I make a lot of these elements instead of one and place them in row and columns.


And what happens if they can overlap in time?


Or what does it look like when they start all over again just before overlapping each other?


I think that is not the way to go. Maybe its better to make large curves because that is what it’s all about in this week. I made three objects which are animating from left to right. They all animate round the vertical center.


While the previous setup was only rotating I also started to make some of the points going up and down on the vertical axis. This gives interesting distortions to the curves.


Here I gave it another distortion when it’s on the left side that what it has on the right side of the vertical axis. I also used a very high amount of transparency which makes that it renders in layers.


This is a combination of two distorted objects. The transparency settings mix very nice so I continued to work with that.


I decided to make eight different objects which were combined under four keys. So every time you press a key the same two images are rendered.


Until so far the Catmull-Rom curves. Continue with the Bézier curves. A totally different beast.


I worked in Fontographer and Adobe Illustrator with Bézier curves. But in Processing it is much more complicated. You have to draw the curve on paper or make it up in your head and that is very difficult in the beginning. After a while you get used to it. I also found it hard to draw the curve first in Illustrator and then read the points from the file. It just did not work very well and the results were not what I expected. So I tried to do it half on paper and half in my head. That worked better.


You can get really much better curves with Bézier. And you have a lot more control. But it is more complicated to work with them. So I made again four objects which I defined under a key. The interesting thing is that you can combine the images by hitting the previous define keys. Combinations of Catmull-Rom curves with Bézier curves.


Another possibility is to combine all eight defined keys together. As a follow-up I would like to get more randomness into these images. But that’s for later.


Too much tools

Week 5’s homework assignment of the 2D Animation and Interaction Course by Andrew Glassner is to create an interactive animation with multiple objects moving over time. Some notes: Use random numbers to create your objects. Use arrays to hold your random numbers from one frame to the next. Use transformations (rotate (), translate (), and scale ()) and the transform stack (pushMatrix () and popMatrix ()) to draw your objects. Don’t use language elements we haven’t covered yet.

At that moment I thought that I had arrived at a point that I had so much new tools available that I sometimes did not see the possibilities anymore. I mean in week 1 you know what you had (almost nothing). You only could draw lines, ellipses and rectangles. But at this moment I have so much tools that I forget some of them to use. What would be a good way to master them all? Make lots of small programs with lerp? Or with dist? So I never will forget what they do? I asked these questions to Andrew Glassner.

As a starting point for the week 5 assignment I used rectangles which are all different sizes and which were running from left to right. Every rectangle had a different size. And after a few seconds the display was filled with a white background. Not very interesting. But it is a beginning.


I replaced the pure black and white rectangles with rectangles which were filled with random grey tones. They all run at a different speed.


At this stage the animated rectangles are running from left to right. And there are rectangles running from right to left. There is also an improvement in the trails they leave behind. There is a problem with the top row which is not used. Didn’t know what the reason for that was at that moment.


Introduced color in a very harsh way. Just picking randomly RGB numbers and use these numbers as a fill color.


This could be a right one. Make all rectangles just one pixel wide. Could have used lines instead. But if you use rectangles you have the choice. Use lines or rectangles or both.


Here I used rectangles with no fill color. They are different in width though. And by putting a very transparent layer on top of every frame you get these nice trails which fade out like a gradient.


Introduced random colors again. Rectangles are moving still from left to right and from right to left. I thought it was still pretty boring.


Reduced the size of the rectangles. Made the trails longer and introduced an array with a color palette. Colors are being picked randomly from the array. transformed the scene to the middle of the screen as good as possible. Rotated the total scene 45 degrees.


Here I removed all color except for one. Copied the previous scene and rotated it 135 degrees which gives you a cross-wise scene.


This is the same scene as the previous one except for the fact that I decreased the height of the rectangles. They are now 1 pixel in height. Increased the transparency settings.


Made a copy of the previous scene and scaled it to a quad which is centered in the display. In the background is one of the left right, right left rectangles running.


This is my final assignment. Flattened rectangles are now running from the top left corner to the bottom right corner. Also there are flattened rectangles running opposite. The animation shows a quite organic look to it. Kind of mix between water and a field of waving grass. You can choose from 30 different colors which are more or less randomly chosen by you and the program.



The assignment of Week 4’s homework of the 2D Animation and Interaction Course by Andrew Glassner is to create a painting program. A few things to keep in the back of my head. You can interpret ‘painting’ very broadly. Use the mouse and keyboard. Use at least one while loop. Use at least one for loop. Use each of map, lerp, and dist at least once. You can use the keyboard as a big collection of on/off buttons. Pressing a key can change a boolean variable (usually a global) from true to false, and vice-versa. Remember that you can change all kinds of aspects of your shapes, not just their location and size, but also their fill color, stroke color, and stroke weight. Don’t forget about transparency, Don’t use language elements we haven’t covered yet.

My idea is to make a paint program which is very time-consuming. Not a program like Adobe Photoshop which gives you lots of functionality to enhance your creativity in the cloud. This small paint program should paint very slowly. And because it’s very slow you can concentrate on making beautiful images. It’s a kind of slow motion Adobe Photoshop filter. Hence it’s name: SlowMoShop.

In fact what makes the program slow is the heavy use of transparency. Another thing that makes the program slow is that it is following your cursor many frames behind. In fact you don’t have a cursor anymore. The cursor is taken over by the shape you choose to draw with. If your shape (cursor) is at the bottom of the display and you point it at the top it takes several seconds to do the real drawing from the bottom to the top. It lag’s enormous behind. In the first program I only made use of basic shapes: rectangles and circles. But in a later stage I also could write my own functions to create other shapes like triangles, arcs or a bunch of horizontal and vertical lines. Boxes in boxes and circles in circles. In fact the possibilities are now unlimited. So If I would like to redo this program once I would introduce much more shapes to create images.

To make an image you first have to select a color. You can use one of the lowercase keys r, m, p, b, c, g, y, o. That’s red, magenta, purple, blue, cyan, green, yellow or orange. Or the uppercase R, M, P, B, C, G, Y, O. Those keys would give the same result. After selecting the color you select a shape by choosing the number keys 1 – 9 on top of the keyboard. You can select the space bar to pause the program. And to continue painting you have to choose color and shape again. There is also an option to erase the screen using the delete or backspace key. It’s all very basic and simple. But it works.

SlowMoShop Images

At the above link you can find some images which I made during the experimenting and testing of the program. But while working on the program a few questions popped up. I asked the following questions to Andrew Glassner:

Why do we have to be efficient in writing a program? The SlowMoShop program doesn’t cost GB’s or TB’s. The total (inefficient) program was just 41 KB.

When do I recognize that I am writing inefficient code? Is that the moment when you see that certain amounts of code are almost alike? What can I do to avoid repeating code?

I met several times when writing programs that I got stuck. Or I had to start all over again. Or I thought it did not make any sense at all what I had written. Or I could not solve a problem how to get things done with the tools I had. At that moment you enter a kind of code writer’s block. What can you do to avoid such situations?

Here you can find Andrew Glassner’s answers.

Egg and Art

The assignment for week 3 was to create a game and an interactive piece of ‘Art’. And beside of that you have to use the keyboard. Write at least two custom functions. At least one of the functions should return a value. Use at least two color variables. Use at least two global variables. Use at least one to share information between functions, and at least one to remember information from one frame to the next. Use at least one if statement. Use at least one else clause in an if statement. And don’t use language elements we haven’t covered.

The Game

I don’t like games. At least when you have to play them on a computer. I think they are a waste of time. Some games are also very violent. And because there is already so much violence on our planet I thought maybe its a good idea to design a game which has nothing to do with violence but everything with typing.  My idea to create a game is based on typing text. Typing text against time. You have to be finished with typing text before a certain amount of time is reached. Otherwise (else) all the text you have typed will be erased and you have to start all over again. Use all upper and lowercase character keys to type text. No symbols are allowed. If you type them nothing will be displayed. Use only A-Z and a-z. In order to keep track of the amount of keystrokes that have been made I need a counter. In that way I can say if the counter has reached the right side of the text-line than it has to go to the beginning of the next line. Or when it reaches the last position on the page it has to show you a present. So lets say that after 10 keystrokes you have to go to the next line. As a placeholder I used rectangles.


And what will you type? Well… I don’t know. Text? Yes. But we are not allowed to use fonts. No problem. I design my own font. In fact I have started with that during my week 2 assignment. I only have to extend a few characters. I have 13 of 26 characters so I only have to design 13 more.


Here is the finished font. Had to type this in one go because I did not add the backspace key. I think Juriaan Schröfer would be glad with the outcome of this program.


I Also used the space bar for getting one keystroke. And I made a function which keeps track of the time. I thought 90 seconds would be enough to get 626 characters on the screen. Now if you win what will you get? A present! What could that be:


And what do you get when you lose?


Here’s how the display looks like when you have almost won.


During the review with Andrew Glassner it turned out that a user does not get any feedback. So Andrew proposed a time ruler which tells you if you are running behind or in front of time. And he also proposed a timer that shows the time elapsed.

The Art piece

For the ‘art piece’ I switched the characters for colored gradients. You still can type. But you type gradients. There is no game element in it anymore. The interesting thing is that you can type random away. But another way to use the program is to type something that makes sense. For instance here are some text pages translated with the program from:

Charles T Bourland’s, The Astronaut’s Cookbook

Jamie Oliver’s recipe for Chilli con Carne

A page from The Collins English Dictionary

Sergei Eisenstein’s Panzerkreuzer Potemkin

Frank Zappa’s Joe’s Garage

Michelangelo Antonioni’s Biography

Nan Goldin’s I’ll Be Your Mirror

David Byrne’s How Music works

The Philosophy of Andy Warhol

Kahn & Wiener’s The Year 2000

Steven Johnson’s Ghost Map

John Maeda’s Laws of Simplicity

Richard Dawkin’s The Blind Watchmaker

Kurt Schwitters his Ursonate