Animating with Hiroshi Kawano

I am very pleased by the fact that I can now show you the animations and the code of this weeks work. Please enable JavaScript in your browser. They are running from my Loftmatic site which was quite silent for a while. Lets see if this is going to work. This week I have concentrated on variables and the system variable frameCount () in Processing. The system variable frameCount () contains the number of frames that have been displayed since the program started. The starting value is 0 (zero that is). After the first loop through draw frameCount () is 1. And because Processing runs with 60 frames per second, frameCount () is 60 after 1 second. After 2 seconds frameCount () is 120 and so forth and so on. I have made 6 animations using frameCount ().

The first Processing sketch still uses the original Hiroshi Kawano’s ‘Work 1’ as a starting point (as all other five sketches do). Created the variables RectWidth and RectHeight for controlling the size of the rectangles. Than frameCount () is used to pull the odd rows to the right and the even rows to the left. And frameCount () is also divided by 3 to slow down the animation. I restricted myself from using a lot of programming issues I already know because of practicing reasons. So here is the animation and the in-efficient code if you prefer to see that.


The second animation is using the same code as the previous one. The difference is that it uses frameCount () to pull rows of rectangles upwards and downwards. Using frameCount () in this way it is a one way system variable. You start it and it only stops when you stop the program. When the animation leaves the display it only displays a static image. Everything frameCount () does happens offscreen. And when I am looking at the animation now I think I will change something. I just put the frameRate () to 2 frames per second. By doing that you can see the different color and rectangle compositions better.


The third animation uses ellipses instead of rectangles. The horizontal width of the ellipses is controlled by the CircleDiameter variable. Than frameCount () is divided by 100. This is controlling the width of the ellipse. Its getting smaller in width every frame. And frameCount () is also controlling the diameter of the ellipse in height because it is subtracted from the CircleDiameter variable every frame. Its first going down from 20 to 0 and then it’s entering negative values which pile up until the program is stopped.


Animation number four is almost the same as the previous one. The system variable frameCount () is subtracted from the CircleDiameter variable. This makes all ellipses move to the left until finally just some colored lines are displayed and the animation has disappeared offscreen.


The fifth animation is a combination of rectangles and ellipses. All rectangles are pulled to the right controlled by frameCount (). The width of the ellipses is controlled by frameCount () which is divided by 2.0. This makes them grow very slow to the left. In fact they grow at the same speed on the right but you cannot see that because this happens offscreen.


Animation number six is also a combination of ellipse and rectangles. You might hardly notice that the rectangles are moving. They are moving upward extremely slowly. The motion is controlled by frameCount () which on its turn is divided by a 100. The width of the ellipses are controlled by frameCount which is divided by 2. Sometimes they cannot be seen because the rectangles overlap them. But after a while they re-appear. But at a certain moment they will all live offscreen.


I am very pleased that JavaScript is now integrated in Processing 2.0. While the applets created by previous versions of Processing where not visible on an iPhone the JavaScript version is. I do not know if it runs on every mobile device. But I tested it and it works on the iPad and a HP EliteBook Workstation 8570w. And that is reassuring.


2 thoughts on “Animating with Hiroshi Kawano

  1. frameCount can be used as more than just a count:

    frameCount % n

    allows a repeating count, and something like this allows an up and down pattern:

    int nearest = 10 * int(frameCount / 10) + 5;
    int counter = int(dist(nearest, 0, frameCount, 0));

    frameCount has hidden uses!

    BTW, your animations don’t show for me in chrome

    • Hi,

      You are way too far ahead of me 🙂 I am practicing Processing and I have restricted myself only to use a few tools. But maybe in a few weeks I will stumble upon modulo and dist.

      Strange that the animations are not working. To be sure I checked again (even outside my habitat) and it seems that everything is fine. It even works in Explorer and Opera. I am not going to ask you if you have enabled JavaScript in Chrome because I am sure you have.

      Thanks for the reply and programming tips.

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