Oop and Hiroshi Kawano

I have finished the last week of Andrew Glassner’s 2D Animation and Interaction Course. This week (week 16) was about ‘objects’ or OOP or Object Oriented Programming. We looked at how to draw graphics off-screen, finding the time and date, reading and writing text files and we looked at Processing’s 3D abilities. The homework assignment was: ‘Go crazy! 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 (that is, its own tab). Write and use at least one subclass of your class. Save this class int 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. This is week 16 but in week 8 of the course I did some clock designs. Looking back to that assignment I  decided to give this week more attention to objects.

W16_01_01 is a not so very spectacular animation of a small nervous white square on top of Hiroshi Kawano’s Work number 1. For me it was the first opportunity to get used to do something with OOP. I also found that you could interpret writing methods as writing functions.

W16_02_01 uses two images on top of Hiroshi Kawano’s Work number 1. But I think I did something wrong because the two images (blue and red) are connected to each other. It also seems that they are displayed twice and that is not what I wanted. I wanted the red image behave separate from the blue image. I think that both images behave the same because they are displayed just after each other with the same random x and y positions.

W16_03_01 has five nervous image files in it. The original artwork of Kawano is not being displayed in the background anymore. The red, blue, orange, black and white images start in the same position as the original artwork was. The longer they stay being nervous the more the total image will be distorted. And I have managed to let them behave separately from each other by introducing the PImage ShakeVersion variable.

W16_04_01 might take a few seconds to load. It introduces four copies of the original Kawano artwork. On top of it four copies of only the red Kawano fields are displayed. After a while the total painting will be red. I also changed almost nothing in the ShakeImage class. I only introduced a scaling function (or method) and a push- and popMatrix in the display method of the ShakeImage class.

W16_04_02 displays the original Kawano image four times. On top of it are the red and blue versions of the Kawano image. Still nothing is changed in the ShakeImage class.

W16_04_03 shows the orange, red and blue versions of the Kawano image.

W16_04_04 show the black, orange, red and blue versions of Kawano’s image. I have put the black layer in the bacjground otherwise it is getting to dominant.

W16_04_05 uses red, blue, orange, black and white layers of the original Kawano painting are displayed in separate layers on top of four original Kawano paintings. And again nothing was changed in the ShakeImage class. The drawback is that in the main tab a lot of repetition is going on. Also the scale method is only used once. Otherwise it keeps on scaling every time a new image is being called.

W16_04_06 takes a few seconds to load. In fact all programs take some time to load the image files. It also uses the red, blue, orange, black and white layers of the original Kawano painting. They are displayed in separate layers on top of four original Kawano paintings. The only thing I changed in the ShakeImage class was that I commented out the y part in the shake method. The shake method calculates a random number between -shakeSpeed and shakeSpeed. That means that only the x variable receives a random (-shakeSpeed, shakeSpeed). Which in return makes the element move horizontally only.

W16_05_01 makes use of the random x method in the ShakeImage class. So it produces only horizontal movements.

W16_05_02 does the opposite of W16_05_01. Instead of moving random horizontal I now commented out the x variable in the shake method. This produces vertical movements only.

W16_06_01 is in fact the same as W16_05_02. The only difference is that the total image is repeated once horizontal and once vertical. I added four image calls in the display method. It might be better to do that in the main program but I was curious to know if this would work too.

W16_06_02 is the same as 16_06_01 except for the fact that it moves horizontally. Again I just commented out the y variable in the random -shakeSpeed, shakeSpeed method.

W16_07_01 moves five of the same images from the center horizontally to the sides. The drawback is that it creates identical copies. I mean copies are always identical.

W16_07_02 creates sixteen copies and paints vertical random traces. I think this animation would be better when it did not paint identical images.

W16_07_03 creates sixteen copies and displays them at random x, y positions.

W16_07_04 creates again sixteen copies and displays them at random -x, -y positions.

W16_07_05 creates also sixteen copies and displays them at random -x, -y positions. I have managed to use a for loop to get the code a bit shorter but it also behaves different because I doubled the shakeSpeed method.

Now to wrap this all up. I did this course twice. And in the beginning I thought it would be easier and also faster to do this course for a second time if you do not have to think about graphic design at all. As a workaround I used Hiroshi Kawano’s Work number 1 as a starting point for every lesson in this eight weeks course. Looking back I think that might be a mistake. Sometimes I had to work around some problems. For instance the Work number 1 does not contain fonts. So in the lesson with fonts I had to think about how I could join them into Hiroshi Kawano’s Work number 1 piece of art. It also makes no use of Bezier or Catmull-Rom curves. And there were many more moments in which I thought… hmmm… maybe this was not such a good idea. But finally I managed to use Hiroshi Kawano’s Work 1 in every weeks lessons. And that is, I think, a fine conclusion to end this 2D Animation and Interaction Course of Andrew Glassner 🙂

Advertisements

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