GDV P.4.1.1 Image cutouts in a grid

As always let’s start with the original description from the Generative Design book: ‘The principle illustrated below is almost the same as the one in the previous example, and yet a whole new world of images emerges. An image’s details and fine structures become pattern generators when only a portion of it is selected and configured into tiles. The results are even more interesting if sections are randomly selected. Using the mouse, a section of the image is selected in the display window. After releasing the mouse button, several copies of this section are stored in an array and organized in a grid. The program offers two variants. In variant one, all copies are made from the exact same section. In variant two, the section is shifted slightly at random each time.’ And here is the original program I started with.

So far so good. I have made a Flickr summary page on which you can find all the images I have made during this exercise. And all programs (changed, not at all or just a little) you can find at my loftmatic page.

Before getting into this program I let it run and I check if it works as the program is described in the Generative Design book. Most of the time I do this before I start deconstructing. And this is a very interesting program. It gives you so much compositional possibilities to choose from. However there is one thing which is a bit unclear. It is not always sure when you have selected an area. You need to have that feedback otherwise the program cannot build an image from that area. In (roughly estimated) 50% of the case it does build an image. And leaves this image on the screen. The other 50% it shows the composition for a second or less and it flips back to the original photo. I check that again. I have the idea it has something to do with my Wacom tablet and its mouse. With my pen it does not work at all. But that is because my pen cannot simulate a left mouse button. Is that true? I Check my system preferences. Huh? Tablet Version Mismatch. Please reinstall the tablet software. Ok… I download and install the latest Wacom Intuos 3 driver. But does my pen have the functionality to simulate a left mouse button? There is only a right mouse button available. So I have to change that first in the program. But does my Wacom tablet pen/mouse work better now? No! With a pen it is still undo-able. Check the mouse. Ok… that works fine. I was working with an outdated tablet driver.

The next thing is to change the global variable names and the size of the window display to 800 x 800. Eh… why is mouseMoved and keyReleased displayed in a bold typeface in the Processing Development Environment? No idea. Added new sizes to the keys. Key 1 = 8 x 8, key 2 = 10 x 10, key 3  = 16 x 16, key 4 = 20 x 20 and key 5 = 25 x 25. And I am initializing TileCountX and TileCountY to 8. That takes my selection rectangle to the same size as the size of key 1. Now I have to find a suitable image. I will use parts of images which I made in the beginning of 2014 from Strijp S. Full images are here. Strijp S is a former industrial plant of Philips which is now converted to a creative / living area. Something else. When I converted the Processing files to JavaScript it seemed that JavaScript’s interpretation of Processing’s left-mouse button is a right-mouse button (if you have a right and a left mouse button). That is really odd.

I changed Crop_X and Crop_Y. Instead of dividing I multiplied TileWidth and TileHeight * 1.5.

What can I do besides changing the original image. Everything I change has almost no impact on the final image. For instance… I changed the constrain function in the cropTiles code block. Does not make a difference. Ok… lets start from the beginning of the cropTiles function. TileWidth = width * TileCountY. That gives me a OutOfMemoryError: You may need to increase the memory setting in Preferences. Fine. Another change gives me a NullPointerException. A spinning beach ball and an ArrayindexOutOfBoundsExcption:64. So better not messing too much with this code. But I can change the size of the tiles by dividing Tilewidth and TileHeight by a certain amount. Hmmm… its not much of a change. A part of the original background image is still visible. What about switching on strokeWeight. Well… that works on my selection rectangle only. Maybe I have to take a look at the filter or tint possibilities.

I was looking for a way to paint something on top of the tiles. Tried to do that in the cropTiles function but that did not work. In keyReleased it did not work either. But what I can do is change the size of TileCountX and -Y in the keyReleased block. That gives better results. Made a few variations with that. Although the righthand bottom corner is not filled. Ok… have to make to make TileCountY the same size as TileCountX which makes the program behave the same as it was in it’s original state. I defined key 6 for TileCountX-Y 40. And  key 7 for TileCountX Y 50.

Changed not very much here except for the image.

Because I found that the images were to close to each other qua-cropping I increased Crop_X and Crop_Y by multiplying them by 20. That gives a totally different idea. It is also more chaotic though.

Introduced CropOffset which searches further in the image when the amount is higher.
Now it would be nice if you could use the up and down arrows to make the amount of CropOffset smaller and larger. Defined a keyPressed function which can shift the selected area while displaying the status of CropOffset in the console.

Just replaced the PImage and tried to make some variations.

More variations.

And even more variations of a different PImage.

It seems that you can use the images under an angle. If you add a translate, rotate and scale function in the beginning of the draw block it just keeps on working. But under an angle. No Error messages. The only thing I have to do is make the original PImage larger so I can get rid of the scaling. Because that makes the image less sharp. So I start with a 1600 x 1600 PImage displayed on an angle in a 800 x 800 display window. Will that make sense? Partly… It is difficult to select and it is difficult to get the screen filled. Moved translate and rotate to the reassemble image part. That works better.

Made some variations with a different image.

And some more variations.

And a few more with another image.

So what happens if I choose a random angle? Its going to animate. Trashed random. I have chosen another angle but I am not fully convinced about the image quality. I need to enlarge everything with scale 1.5 because otherwise the corners of the display window will not be covered. Enlarging the image 1.5 time reduces my image quality. Trashed the angles. In fact if you would like angles in your image you just search for angles in the image. Introduced rectangles. This might seem very simple but I could not find out why it did not work until this moment.

Made a few variations with the rectangles.

More variations.

And some more.

Tried to use the color palette of the image for the color of the black lines. MyImage.get (gridX, gridY). That did not give me good results so I kept on using the black rectangles. Made the strokeweight less thick.

Some more variations.

This was a very useful exercise. I could have gone deeper into the program but that would take too much time. And the results for now are pretty satisfying.

Henk Lamers


1 thought on “GDV P.4.1.1 Image cutouts in a grid

  1. Pingback: GDV P.4.1.1 Image cutouts in a grid | interactive data visualisation

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