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.


Comments? Leave a reply.

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

WordPress.com Logo

You are commenting using your WordPress.com 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