Interact with Hiroshi Kawano

I have worked with the color function, lerpColor and some very basic interaction with keyTyped. The color data type is used to store the five color values of the artwork (red, black, orange, blue and white). All interaction for all three programs is done by pressing the number keys 1 until 0 on top of the keyboard. Pressing the shift key while typing the numbers give different results. Again I produced a lot of inefficient code because I would like to limit myself. I used a very basic amount of tools to make these images. By the way it seems that only Safari and FireFox support the JavaScript created by Processing. Google Chrome does not support it. But you can download the code of the examples. Try running those in Processing 2.0.

In this first sketch I used just the same colors as were used in Hiroshi Kawano’s original work. You are now able to replace the colors by pressing the number (and shift-number) keys at the top of your keyboard. Be aware that some (shift) number combinations will have less impact than others. And at a certain moment all colors are disappeared so there will be no change at all. When all colors are gone the only thing you can do is hit the reset key. Pressing the ‘r’ or ‘R’ key will reset all the colors to the original state.


In this sketch I used lerpColor to mix two colors. The name ‘lerp’ is a contraction for ‘linear interpolation’. I took the original colors and interpolated them to each other in steps of 0.1. You can see the results of this by pressing the (shift) number keys at the top of the keyboard. For more information about what color is interpolated to which other color check the code. Press the ‘r’ or ‘R’ key to reset the colors.


In this third sketch I used the colors as layers. Each of the 5 colors can be repositioned. So you can create different compositions. You cannot change the position of the individual rectangles. Only the red, black, orange, blue and white layers can be moved. Check out the same (shift) number keys at the top of your keyboard to reposition the layers. The layers increase (or decrease) separately with 20 pixels to the left, the right, up or down. There is no reset key defined.



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.

Practicing with Hiroshi Kawano

After finishing the 2D Animation and Interaction Course of Andrew Glassner I continued  my practicing with Processing. Although I am using Processing for my work for four years I thought this would be the right moment to go a bit deeper into the language. I noticed from the past eight weeks that I needed a lot of time to get used to the tools Andrew Glassner told me about. But I need also a lot of time to think of a graphic theme each week. I would like to avoid that for the coming weeks. I have read a few articles about the Japanese philosopher Hiroshi Kawano. He was one of the most important pioneers in the conquest of computer technology for the arts. You can read more about him here:

And this is the piece of art which I will use to work with:

Work no. 1

Hiroshi Kawano. Work no. 1. Simulated Color Mosaic. 1964, Computer-generated design. Gouache on paper. 19.5 x 20 cm, OKITAC 5090A, line printer. Programmed in OKISIP. Produced at the Computer Center, University of Tokyo.

As a tribute to Hiroshi Kawano’s work and research I will use his piece of art as a vehicle to make several small projects. In that way I don’t have to define all graphics every week from scratch. Beside of that I can better concentrate on programming issues in stead of design issues. For this period the project is divided into three parts. Part one is making images with rectangles. The second part is creating images with ellipses. And the third part is to create images with a combination of rectangles and ellipses.

In part one I began with scanning Hiroshi Kawano’s ‘Work no. 1’. I will work at a display image size of 800 x 800 pixels. As I mentioned before this work is 19.5 x 20 cm. So it is not a perfect rectangle. I took the freedom to make it a rectangle by adding one line at the top. I have chosen the top because that leaves less to my interpretation than when I would add a line to the bottom. The bottom line is much more open for different interpretations. When I now use 800 x 800 pixels I can easily divide it in 40 x 40 squares of each 20 x 20 pixels. I loaded the scan into the background so I could check if everything was positioned well. At this stage I am almost halfway.


This is the finished version. I mixed rectangles with squares when possible.


Now I could start with making variations on this theme:

W9_01_03_01, W9_01_03_02, W9_01_03_03, W9_01_03_04

While this seems to be fine. In the second part I have to use ellipses. And in the third part it should be a mix of ellipses and rectangles. Watch what happens with this image when I replace the rectangle with ellipses:


That is not what I was looking for. I did expect a modification but this is too much. Rectangles are drawn from the top left corner to the bottom right. Ellipses are drawn from the center. So there is a shift in position and because I used rectangles and squares you get those long horizontal ellipses. This meant that I had to recode everything again. Here’s a better ellipse version (2240 lines of code):


After that, I changed ellipses into squares. And I moved all squares 10 pixels to the left and 10 pixels to the top. We have seen this image before but the code is different. Ready to make some variations with the rectangle version:

W9_01_06, W9_01_07, W9_01_08, W9_01_09, W9_01_10, W9_01_11, W9_01_12, W9_01_13, W9_01_14, W9_01_15, W9_01_16, W9_01_17, W9_01_18, W9_01_19, W9_01_20

Time for part two. Now that everything is in its place we can make the variations with the ellipses.

W9_02_03, W9_02_04, W9_02_05, W9_02_06, W9_02_07, W9_02_08, W9_02_09, W9_02_10, W9_02_11, W9_02_12, W9_02_14, W9_02_15, W9_02_16, W9_02_17, W9_02_18, W9_02_19, W9_02_20, W9_02_21, W9_02_22, W9_02_23, W9_02_24

That last sketch contained 4480 lines of code. When I added another 2240 lines of code Processing began to complain: ‘The code of method setup () is exceeding the 65535 bytes limit’. I did everything in setup. Did not use draw.

And in part three the rectangles and ellipses should now fall right in their place. To check that I made a file where ellipses and rectangles changed each row:


That worked well. I could now generate variations of the combinations:

W9_03_02, W9_03_03, W9_03_04, W9_03_05, W9_03_06, W9_03_08, W9_03_10,  W9_03_12, W9_03_13, W9_03_14, W9_03_15, W9_03_16, W9_03_17, W9_03_18, W9_03_19

And that concludes the period of practicing using rectangles and ellipses.

Time is code

Week 8’s assignment for the 2D Animation and Interaction Course of Andrew Glassner was to go crazy! And to do something great! Use anything we’ve discussed in this course! Write and use at least one class of your own design. Save this class in its own source file. Write and use at least one subclass of your class. Save this class in its own source file as well. Incorporate the time or date somehow. You definitely do not need to make a clock or calendar. Use an offscreen buffer for at least one graphic element. The first step I took to work on the assignment was not to go crazy. I was thinking about my 100 clocks project which I did in 2012.


I would like to make one program with four clocks in it. By using four clocks I should be able to make four classes. Or one class and three subclasses. That turned out to be much more difficult than I had thought. First I had to get a running clock in the display window. I used the Processing font as a tribute to its design. I really don’t like that they omitted the font in Processing 2. Anyway they skipped it and we have to live with that. When I had the clock displayed I needed to trigger the hours, minutes and seconds. I use a simple rectangle which is displayed every minute. It starts at zero seconds and disappears after ten seconds.


I had four ideas for the clocks. I would use The International Maritime Signal Flags, The International Morse Code, The Semaphore Flag Signaling System and The Braille Writing and Reading System. All of them will be triggered by time. The .png images are created in Photoshop and imported in Processing. I could create them in Processing but I thought that would take more time. I have only two days left. The first challenge is to connect two images to the seconds. Therefore I need to split the seconds into two numbers. The first seconds are running from 0 – 5 every minute. The second seconds run six times from 0 – 9 every minute. So I need one variable for the first second number which I call FirstSecond. And I need a second variable for the second second which I will call SecondSecond. That may sound confusing but it is clear to me. I imported two images of The International Maritime Signal Flags. These two flags represent the numbers 1 and 2. Flag 2 I used also to represent flag 3. So it will be repeated at times when a first or a second is 3.


After importing all ten flags (which represent the numbers 0 – 9) I used the same calculations for the rest of the time (minutes and hours). But the image just looked a bit too simple. So I added a background image which is overwritten 60 times per second. Also added a title and the real time in the Processing font.


Now at this moment the code was 268 lines long. Including white lines and comments. That seems an awful lot of lines. And it is. Because I programmed it very inefficient. I remembered a remark of Andrew Glassner that when you see a repetition in your code you have to avoid that. So I checked a few lessons back and found that I could use an array to load and display the images. The end-result looks the same but the program is now 157 lines including white lines and comments. It is shorter and the code is more efficient. Another thing is that it seems that The International Maritime Signal Flags Clock runs two seconds later than my internal computer clock. Why? I have no idea. Ah! Found it! Frame rate was set to 1. Should be 60. The nice thing about this code is that it is reasonably easy to make different versions of the same clock. This is 90 percent of the same code but now with The International Morse Code.


Still the same code but with just different images. In this case the Semaphore Flag Signaling System.


And as a last proposal a clock for all the blind and visually impaired. Also known as The Braille Writing and Reading System.


I did not meet the second, third and fifth tasks of this weeks assignment. In stead I made four clocks. I would like to integrate all four clocks into one program. But I need more time for that. And that ends my last contribution to Andrew Glassner’s 2D Animation and Interaction Course. When I look back to the 8 weeks I must say that this was an excellent course. I can recommend it to anyone who would like to start learning to program. This is a very good opportunity to start. And not only the course is good. You learn a lot of how to’s and not do’s. Beside of that the amount of feedback from Andrew Glassner is so motivating. He is (more than) always in the help mode. For eight weeks I have sent him my homework and a few days later I get a movie file back in which he explains his thoughts on what I did. And if there were still questions you always could ask them by sending an email. By the way this course is also a good companion of his book (which is included in the course).

Andrew Glassner, Processing for Visual Artists

You might think that this course is over now. But for me it’s not. I am starting it all over again. The reason for this is that there is so much information in it that I would like to get through it once more to understand everything better.