GDV P.4.0 Hello, image

After the exercises with the fonts it’s now time to concentrate on images. Do I have images? I have a photo archive which started to explode in size just in 2009. I always made pictures but I was not really aware of what I was doing. In 2009 I started seriously to take pictures. Bought a professional camera and did one workshop with Stephen Johnson in Dead Valley and  FocusOnNature in Iceland. It is purely coincidence that I started to work with Processing in that same year too.

Back to the exercise. This is the description the Generative Design book gives: ‘A digital image is a mosaic of small color tiles. Dynamic access to these tiny elements allows for the generation of new compositions. It is possible to create your own collection of image tools with the following programs. An image is loaded and displayed in a grid defined by the mouse. Each tile in the grid is filled with a scaled copy of the source image.’ Here is the original program. As usual I prepared a Flickr page with all images I made during this exercise. And on the loftmatic page you can find the programs. Almost all of them work with JavaScript this time. Except for P_4_0_01_GDV_06.

I have imported one of my own images which I took at Denmark’s Aquarium ‘The Blue Planet’. It seemed a good idea to me to keep one picture for all the exercises. In that way you can compare the differences of the patterns better. The first thing that struck me was that the image which is used is getting so small that it really doesn’t matter what kind of image you use. So the first thing I would like to try is to decrease the scale ratio. Oh… does it crash? No… it seems to freeze. Well… that is almost the same result. If you go outside to the left or the top of the display window it is freezes. That is not nice. Anyway… I divided tileCountX and tileCountY by 10. That gives me in the smallest version something I can still recognize as a small version of the original photo. But it still freezes when I go with my cursor outside the left or top of the display window. But in JavaScript it does not freeze. Even if you go outside the boundaries of the display window. That is reassuring.

What can I do to prevent that it freezes. An if statement maybe? That does work partly. I’l just continue knowing it works when I do not press the mouse. What can I do to make this program generate other images. Can draw a rectangle around every photo? I just added strokeWeight (gridX / 40). That is an interesting variation. Replaced it with (gridY / 40) because I like the vertically effect better than horizontal. There is a difference between the Processing version and the JavaScript one. In JavaScript the top row has a different strokeWeight.

When you use strokeWeight (stepX / 16)… you get a black square that grows and shrinks in thickness. You also have the chance on an illegalArgumentException: negative width message.

Put ellipses on the cornerpoints. Used get to get the color at the mouse location to fill the ellipses. That did not work out well. So I removed the ellipses. Repeated the image once more but divided stepX and stepY by 2. And again divided it by 4.

Introduced a rotate and a translate. Just by coincidence it gave me unexpected things. Commented out the large images. Even more interesting. I only don’t know why the first image is so large of size. Ok. I know. Cleared the background in setup.

I need to change this program. I think all the variations I make are getting too close to the original program. I am going to try to merge a range of programs I did two years ago with this program. Maybe just a part of it. The main difference is that this program is not  interactive. It’s just animation. Lets see how that works out. Well… that worked out fine. Except for the fact that when I go the left and top sides of the display window I get an ArrayindexOutOfBoundsException: -100. So I have copied the if-statement of the previous programs: if (gridX < 0); Now it keeps on working. But don’t click the mouse. Knowing that this is good enough for me. Now the image is not scaling. But the objects on top of the image are. It’s a bit different but I think this gives me more possibilities to make variations. By the way… JavaScript does not like this code. That is a shame because this was one of the best images.

I have thrown out all interactivity. The image is now an animation but it delivers me more interesting imagery. I added a small stroke of 2 pixels to every arc. It has a transparency of 64. And that makes it stand out nice against the background. And done this it gives me endless possibilities to generate new variations. Reduced the frameRate to 1 because than you can see the individual changes better. Please be patient. The images come up after one or two seconds. And there is no interactivity. And that goes for all other animations after this one. They are not interactive.

Removed all stroke-related imagery. Used fill only. Weird enough the image keeps on filling until everything has been filled. And than it stops. While using stroke it keeps on making different images. It never stops. No! Oh… sorry, that is a mistake. I did not refresh the screen. When you use background it refreshes and keeps on changing. Replaced the background with a black dissolve screen.

Removed the ObjectSize variable. It seems to give not good enough results when I loaded the files that I made in 2012. Adjusting everything manually seems to work better and it is more work. But the result is better. And that is what counts for me. It loads after 3 or 4 seconds.

De rest of the sketches are all variations of the same program but with using different  shapes.

Loads after 4 seconds.

Loads after 2 seconds but the JavaScript image looks much more interesting than my original design in Processing 🙂

Loads after 5 seconds.

Loads after 5 seconds. And it is different from my original design in Processing. But this time the JavaScript is not better.

Loads after 2 seconds.

Runs pretty fast. Maybe it has something to do with the frameRate. I made it higher in this version. I checked Processing.js page but there is not much more information about frameRate. It should work properly.

Starts with almost no delay.

Also starts with almost no delay.

Works fine.

And the last one is also fine.

Henk Lamers


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