Manipulating Hiroshi Kawano’s pixels

I have finished the second last week of Andrew Glassner’s 2D Animation and Interaction Course. This week (week 15) was about using strings, typography, images, pixels, pvectors and patterns. Strings let you store and manipulate text. Typography lets you draw type on-screen. To show an image, you first have to create an object of type PImage. You can read or write the color of any pixel on the screen if you hand the x and y of the desired pixel to get (). The PVector variable can have both x and y values. And patterns are used to change graphical objects over time.

The homework assignment was to create an animation which uses at least two images. The animation should also at least use two pieces of type in different typefaces. The motion in the animation should be controlled by two different repeating patterns. And I have to use at least one PVector. I failed using two different patterns and I did not use two different repeating patterns in the end. However… I made 10 different animations. I also added some functionality to all programs to make screen-dumps and save them using a date and time function. Learned that from the excellent ‘Generative Design’ book by Hartmut Bohnacker, Benedikt Groß, Julia Laub and Claudius Lazzeroni.

W15_01_03 maps the ‘Work number 1’ artwork of Hiroshi Kawano at a random amount between 0 and 800 in the x and y position. Per displayed frame they are always of the same size. The frame rate is 10 frames per second.

W15_02_02 initializes first randomized x and y positions. Then it randomizes the second x and y positions. Points are located between -10 and 10. Than it initializes the width and hight of the pixel replacement with an amount of 100 pixels. And it copies and pastes the first and second x-y positions to the calculated locations. The effect is getting more interesting when you let the program run for more than a minute or two. But you can clear the screen by hitting the backspace or delete key on your keyboard if you don’t like the result.

W15_03_02 displays the original ‘Work number 1’ of Hiroshi Kawano in the background. In draw it initializes the first x-position and a random y position in height. Than it initializes a second x-position and again a random y-position. As a third step the width and height of the pixel replacement are calculated. Finally it copy and paste’s the pixel amount. Press return to make a screen-dump or press delete or backspace to start with a new original.

W15_04_03 makes use of an array which holds the colors of the original Hiroshi Kawano ‘Work number 1’. The program first display’s that original to avoid that we are looking to a grey background (for one-fifth of a second). It locates all 1600 x and y positions. Makes a random choice out of the array colors and positions fourteen by fourteen pixels rectangles on top of Work number one with a frame-rate of 5 images per second.

W15_05_03 fills the background with Hiroshi Kawano’s white color. Than it displays Hiroshi Kawano’s ‘Work number 1’. That is shifted by 10 pixels to the left. If you take a look at the array it is the same array as in the previous program but filled with 0’s, 1’s, 2’s, 3’s and 4’s. These numbers refer to the original colors used in. The program checks if it finds a 0, 1, 2, 3 or 4 and depending on that outcome it selects a (random) color from the color-range. Than it fills the rows and columns with the selected colors and after a while it gives an ArrayIndexOutOfBoundsException:5. So I changed the random selection from 5 to 4 but than it doesn’t animate the white colors.

W15_06_04 displays our own font ‘FIOTEXTRegular. At least… that would be the ideal situation. But it doesn’t. It seems not to be possible to use your own designed font into Javascript. This has something to do with copyrights. But on our fonts are no copyrights. We made them for ourselfs and we would like to decide what we do with them. Unfortunately it now chooses a sans serif  font which is available on your computer. The random font-sizes are calculated between 10 and 50 pixels. It displays the names of the colors that are used. But the names are always displayed within the boundaries of Hiroshi Kawano’s ‘Work number 1’.

W15_07_02 uses get () and set to read and write individual pixel values. Tried to let it run using float instead of int but that seems not to work with the get() function. Although this code is very simple I have to dive deeper in it on a later moment. It reads every pixel of the total image. That is 640.000 pixels at a frame-rate of 60 frames per second. Than it generates a random number between -1 and 1. And it returns that number to set the individual pixel.

W15_08_03 is based on a small program I made a year ago. It creates typographic collages every 0.6 second of Hiroshi Kawano’s ‘Work number 1’. I found some more information on how this work was made and opened a Photoshop file in which I typed all the info. Inserted different font-sizes and printed the file in black and white. After that I teared the paper apart and scanned the paper strips. These were than converted in png format to keep transparency. Hiroshi Kawano Work number 1 is displayed in the background and every strip of paper is random selected and scaled between 0.5 and 1.2. After that the paper strips are positioned random in width and height.

W15_09_02 Hiroshi Kawano’s ‘Work number 1’ is divided into 40 x 40 rectangles. In every square a new ‘Work number 1’ is scaled random between 10 and 50 Pixels. These are positioned in the 40 x 40 rectangles with a frame-rate of 40 frames per second.

W15_10_01 displays Hiroshi Kawano’s ‘Work number 1’ in the background. On top of that image positions are located with a size of 20 x 20 pixels. Than it reads random colors from the 1600 colors of the array. Which might be rather silly to do so because I have used only five colors in the array. I think the results would have been the same when I had used an array of five colors instead of 1600. But anyway the positions are filled in rectangles of 11 x 11 pixels. 10 Pixels gave me a white outline which I did not like.


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