Transforming Hiroshi Kawano’s arrays

This week I have finished week thirteen of Andrew Glassner’s 2D Animation and Interaction Course. It was about lists and transformations. In fact we were talking about Processing’s array object and the translate function. Beside those two random numbers, array operations, the modulo, rotate, scale and the stack transform were treated.

The assignment for the homework was to create an interactive animation with multiple objects moving over time. I can use random numbers to create objects. Use arrays to hold our random numbers from next frame to the next. Use the transformation functions rotate, translate, scale, pushmatrix and popmatrix to draw the objects.

During the course I made sketches on paper of ideas I would like to work on. In total I had nine ideas but when I started to work on the first one it seemed a lot of work. So I started with a sketch in which I would like to use a kind of nervous behavior. That nervous behavior would be more nervous when you hit the ‘plus’ key on the keyboard and it would be less nervous when you hit the ‘minus’ key. So the first thing I did was to fit all squares that make up Hiroshi Kawano’s painting into an array. I need one array for the horizontal positioning and one array for the vertical positioning of the rectangles. During the copy-paste process I thought it would be better to use a for next loop to carry out those positions but I left it as it was. Maybe I have to change that next time when I do a simular project.

The hard work is the colors. I had to create short color names to store the variables in the color datatype. These have to be short and of the same length. Otherwise it is very difficult to check if the color array has an equal number of color-names in it. To explain it a little bit different the first row of colors (the top row) has forty color-positions. All the other rows have also forty color positions. If all the other rows exactly line up at the end of the first line you can be sure that you have filled the array correctly. That is the reason why the color names have to be of the same length. If you take a look at the code you can see that the color array shows a kind of Kurt Schwitters-like poetry. Use the ‘Plus’ or ‘minus’ keys on your keyboard to influence the nervousness. Here you can find the nervous sketch.

I also made a horizontal and vertical nervousness version which can not be controlled by the keyboard.

And I made nine versions of Hiroshi Kawano’s painting using translate, scale and rotate.

To wrap it all up I have to conclude that I never could have thought of these versions when I would have been using Adobe After Effects, Apple Motion or other animation software. Technically you could rebuild these animations in those programs afterwards. But you never think of this kind of manipulation when you are using those programs. By using Processing (or another programming language) the idea grows while you are programming. It is try and error until you are satisfied with the results.


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