GDV P.4.2.1 Collage from image collection

This assignment is described in the Generative Design book as follows: ‘Your archive of photographs now becomes artistic material. This program assembles a collage from a folder of images. The cropping, cutting and sorting of the source images are especially important, since only picture fragments are recombined in the collage. All the pictures in a folder are read dynamically and assigned to one of several layers. This allows the semantic groups to be treated differently. The individual layers also have room for experimentation with rotation, position, and size when constructing the collage. Note the layer order; the first level is drawn first and is thus in the background.’ Until so far the description in the Generative Design book. Here are links to the original programs.

I started this assignment with a few photo’s I took in Denmark during our last holiday in April 2014. But after a while working with them I thought that it would be also interesting to try something else. A few years ago I went to the local bookstore. Bought five international newspapers: ‘De Volkskrant, De Morgen, Le Monde, The Times and La Gazzetta dello Sport.’ Selected hundred words or full headers and ripped them from the newspapers. I was specially interested in those words which came from Dutch, France, English and Italian languages but were still understandable in English. Scanned them. And made hundred collages with them which you can find here. I will use the same scans in this assignment. I also prepared a Flickr page with all the images which I have made during this assignment.

When I was running the program for the first time I did not notice how it got to the image files. After commenting the program I came across the word ‘sketchPath’. Checked the Processing reference but I got a ‘Not found’. I did not see the function ‘sketchPath’ before. What does it do? Checked the forum. Found a post from binarymillenium with an answer of JohnG: Re: Get directory of current sketch? Reply #1 – Dec 16th, 2008, 5:31pm sketchPath(“”); will give you the path to the sketch, dataPath(“”); will give you the path to the data directory. You can put things into the method to give a file, e.g. sketchPath(“foo.txt”); will give you the path to a file called “foo.txt” in the sketch directory. Ok. Clear. So it does the same thing as selectInput does. Only with selectInput you have to find the image files yourself.

Now this is not going to work in JavaScript. If you run this program as a JavaScript file in Safari then Safari’s Error Console says: [Error] Processing.js: Unable to execute pjs sketch: ReferenceError: Can’t find variable: sketchPath. Ok! Then I exchange the sketchPath variable with SelectFolder () or selectInput (). But that is not going to work either because these variables are not yet implemented in JavaScript. I could add my images to the data folder but that means that I have to upload at least 3.8Mb per program x the 20 programs I have adjusted = 76 Mb images. That seems not a good idea. For the time being I just add the Processing code to the loftmatic website and leave the finished images on Flickr.

So I changed a few global variable names. I think its hard to read the variable ‘layer1Items, layer2Items and layer3Items’. Changed those names in Layer1_Items, Layer2_Items and Layer3_Items. This is a rather complex program (for me). A lot of things are still a bit mysterious. But I will start with changing the images to images of my own. I think that the first results are a bit too chaotic. Although a collage should be a bit chaotic. Let’s see what I can do to prevent that chaotic look. Made a copy of the footage folder. Changed the sketchPath link and removed all files until I had only three of them left. Does the program still work? It does. And the image looks less cluttered. I even wonder if I need those three layers. But I leave them in for the time being. I will only use the scans from the newspapers. I have put all settings on default (almost). And no rotation. I used only 3 scanned newspaper headers. Clicking on the next (and following links) will show Processing code only.

In the beginning I thought that those layers would not make any sense. But if you work a while with it than you know which layer has a good composition. So you keep that layer and change the other ones until they are fine too.

Lets see what rotation brings. Works fine. And I am not sure how the rotation works. Used radians to put layer 1 vertical. Also decreased the scaling factor a bit.

Rotated layer 3 270 degrees.

Now using 15 images. But I have ready more of them. I will add 3 per version. So I think in the end we will use 60 newspaper headers (if I make 20 variations) (not sure about that yet).

I think I have to reduce the image size of my footage. Some of them are more than 800 pixels in width. So that folders file size will increase with Mb’s during the next sessions. Ah… found out that the resolution is 150 pixels per inch. I can reduce that to 72 pixels per inch and they will all getting smaller. But it is also reducing the file size. Lets see how this new set works. The folder size shrinks almost a quarter. Ok. All images are smaller so I can set the largest randomized size factor back to 1.0. And that looks good.

Maybe its a good idea to add some primary colors to the compositions. Added a red, blue and yellow piece of paper. Ah… because my footage folder is increased with images I can never get the same compositions back again which I had in the beginning. Than I had only 3 images. If I load that file again it will be using all images instead of the 3 which I used in the first program. Anyway… I just continue. Its part of the learning process.

I wondered why my last newspaper headers were not in the final image. Forgot to update image count. It was still on 8.

What happens if I make it 20 for instance? The composition will just have more items in it. But also more of the same items.

I have removed the randomized loading of images. I like a certain amount of images which are just enough to make the composition fine. No more and no less. It’s now on 20. But what about 100? That isn’t any good because only the top layer will be visible. So You have to reduce the scale. If you keep it between 0.2 and 0.4 it might be good. Just try to make it as small as possible. Between 0.1 and 0.2. That isn’t too bad but it is lacking a bit of contrast. What about 200 items per layer? Great. 400 Maybe? Even that is not bad. lets push up the scale to 0.1 to 0.3. And now something silly: 0.01 to 0.09. Ok its going to be a pattern. And you cannot read the headlines anymore. I made a mistake. Instead of a 100 items I typed 11100. Even than it works. It doesn’t look good but it works. brought the amount back to 50. Layer1 is scaled between 0.1, 0.9. Layer2: 0.1, 0.6. Layer3: 0.1, 0.3.

Just added the code and let the program run. Why do I not like this? I think because it is way too chaotic. What can I do to make it less chaotic.

Changed the imageMode to corner. That gives me a kind of spiral-ish composition. Changed the imageMode to corners. It does not make very much difference (I think). I switch back to imageMode center.

I start with putting every variable to a basic setting. Hmm… that is not too bad. But when I hit the 1, 2, 3 keys it’s getting chaotic again. Have to change that. But it looks promising.

Ok. I fixed the keys 1, 2 and 3. They all have the same settings now. Because the circle looks fine I would like the images a little larger so you can read the headlines better.

That seems better. Made the circle a bit bigger. So I have more room to enlarge the headlines. I have adjusted the sizes. I think these settings are better than the ones I had in the beginning.

What happens if I increase the amount of headlines from 100 to 500 per layer? It fills the circle. It is also too large. The image is hitting the boundaries of the display window. That is not too bad. 500 Images per layer is too much. I try 300 for layer1, 200 for layer2 and 100 for layer3.

Until now I did not visit ‘den zufälligen Rotationswinkel’ (random rotation angle), but by using those variables you can easily make nice images which are slightly chaotic but not too much.

Increased the rotation from 45 to 90.

From 90 to 100. Higher numbers will make circles only (if you do not use radians).

But if you do use radians they will make a difference. Here I used radians 90.

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