GDV P.4.3.1 Graphic from pixel values

This is the description of the Generative Design book: ‘Pixels, the smallest elements of an image, can serve as the starting point for the composition of portraits. In this example, each pixel is reduced to its color value. These values modulate design parameters such as rotation, width, height, and area. The pixel is completely replaced by a graphic representation, and the portrait becomes somewhat abstract. The pixels of an image are analyzed sequentially and transformed into other graphic elements. The key to this is the conversion of the color values of pixels (RGB) into the corresponding gray values,  because–in contrast to the pure RGB values–these can be practically applied to design aspects such as line width. It is advisable to reduce the resolution of the source image first.’ Here are the original programs:

I have prepared a summary page on Flickr where all the images are gathered which I made during this assignment. And here is the loftmatic page where all the programs are that I changed. The first 5 do work with JavaScript. The second 5 do not. So instead I added the Processing file when you hit a thumbnail.

To get acquinted to the program I always change the variable names to make them more meaningful for me. For instance how do I know what l3 is. I think this is an unlucky choice (also because of the typeface). And how do I know that it is not 13 instead of l3. And if it is I3 is it than Capital I (ai) or lowercase l (el). Luckey the Generative Design people have placed a comment above this statement in the code: // grayscale to line length. So I changed I3 into greyToLineLength. That is more work but much more understandable for humans. GreyScaleToLineLength would have even been better. Maybe I have to change that anyway. Another example: w4. In the comment it seems to be strokeWeight. So I change that variables name to greyScaleToStrokeWeight. Which leads to names like: greyScaleToLineLengthStrokeWeight. Its long. But understandable. But what about getting a picture of a portrait. I found a photo from 2008 which I made of a cheetah in the Tiergarten Schönbrunn of Vienna. To begin with I used the standard variations which you can find under the 1-9 keys.

So now its tweaking the program to find other manipulations. Started with the grayscale to stroke.
Case 1: added SQUARE to strokeCap.
Case 2: added 128 transparency.
Case 3: subtracted greyScaleToLineLength from posX.
Case 4: added grayscale / 255.0 * TWO_PI. And 0 – greyScaleToLineLengthStrokeWeight.
Case 5: increased the distance of the nearest neighbor.
Case 6: changed ellipse in rect. Changed fill to noFill and noStroke into stroke.
Case 7: changed rectangle size  from 15 into 60.
Case 8: switched off all rectangles except one. Increased width and height of it.
Case 9: rotated TWO_PI. Changed ellipse into rectangle.

I wondered what you could do to see of the patterns. At this moment they are very small. It seems that you have to decrease the image size. Decreased it from 100 x 100 to 50 x 50. And that works better. I did some tests with changing the background to black but that did not work very well because you have to invert the image than. Which leaves you with a negative image in the cases 1 – 5. So I left the background white for the time being.

Just played with the numbers in case 1 – 5.
Case 6: I have removed the fill of the rectangles.
Case 7: added a rectangle in a rectangle in a rectangle in a rectangle.
CAse 9: changed rectangles in ellipses.

I just mention the cases so that you can really understand what I did (and not did).
Case 1: changed posX and posY into – 25.
Case 2: removed the fill’s and added a secondary circle.
Case 3: added a secondary line which makes a kind of < symbol. Made the background black. But after a while I decided to make it white again. I still don’t like the negative image.
Case 4: removed one greyScaleToLineLengthStrokeWeight in the line function.
Case 5: added another line which makes it all a bit more like it has been sketched.
Case 6: getCurrentColor is divided by 20. Which makes use of another RGB color range.
Case 7: removed the rectangles and replaced them with lines.
Case 8: replaced the rectangles with ellipses.
Case 9: replaced stroke color and rectangle with ellipse and noFill.

Renamed the global variables. Added comments to get it all a bit more understandable. Resized the display image. And used the svg files which were added by Generative Design. Maybe its a good idea to change the image into a colored image. Made 9 cases like the ones used in the earlier version. And I replaced the standard svg’s by my own much more simple svg’s. Also increased the resolution by increasing the original image. And OS Yosemite seems not to support Adobe Illustrator anymore. I am on JAVA SE Runtime 7 and Illustrator needs Java SE Runtime 6. Downloaded that and installed it. Adobe Illustrator works again. By the way… It seems that you can install JAVA SE Runtime 6 and 7 next to each other. They want hurt each other. Another thing is that from here on the Error console of Safari gives me an [Error] ReferenceError: Can’t find variable: sketchPath, setup (undefined, line 17), executeSketch (processing.js, line 8527), (anonymous function) (processing.js, line 8535). So I placed the programs only on the loftmatic website.

I am now working with two svg-files. Tried to keep it simple. It might get more complex into the end. Case 6, 7, 8 and 9 need some attention. Just played with the fillings and strokes to get those problems out-of-the-way.

It is really impressive how many variations you can make with just changing a minor detail. Even enlarging tileHeigt and or tileWidth can give very different results. And remember: pushMatrix () cannot use push more than 32 times. I received that message because I forgot popMatrix.

Used a honeycomb as svg file. Just tweaked the variables a bit.

Lets see what happens when I load all svg files of the earlier cases.

Henk Lamers


GDV P.4.2.2. Time-based image collection

The Generative Design book gives the following summary of this assignment: ‘In this example, the inner structures of moving images are visualized. After extracting individual images from a video file, this program arranges the images in defined and regular time intervals in a grid. This grid depicts a compacted version of the entire video file and represents the rhythm of its cuts and frames. To fill the grid, individual still images are extracted at regular intervals, from the entire length of a video. Accordingly, a sixty-second video and a grid with twenty tiles results in three-second intervals.’ Here is the original program.

I have put all images I made during this assignment on a Flickr page. I decided not to join the movie-files I used. So instead I added the Processing files if you click a thumbnail on the loftmatic page which you can find here. You might use your own movie-file to get comparable results.

After doing some tweaking of the program I had to find some video footage. Although we have lots of video-material from our documentaries and animation-films it is a lot of work to find real good footage. It takes a lot of time because you have to go through every DV-tape. And while doing that it might turn out that there was nothing useful on the tape. So what is the most easiest way to get some footage. The iPhone! I still got a stunning 3GS. And I have never used the video-function. So this might be a good opportunity. But what do I film? Lets start with the most colorful news-broadcaster of the world. CNN! Took me a few minutes to get some footage. Interestingly enough I filmed upside down. There is no image here. All the images are on the Flickr page. This link takes you to the Processing code. And that is also true for all next links on this page.

I do another one. Ah… that looks better. I specially like the footage which has typography in it (but that is my abnormality). So what file size is that movie? Its 7.6Mb. Might be that I have to reduce that with Compressor or Final Cut Pro.

That works fine. The whites are a bit bleached out but its fast.

What about changing the format. Let’s double TileCountX and TileCountY. Oh… that is even better!

Can I double that again? Sure it does. TileCountX = 48. TileCountY = 64. That is about 3072 frames. And the final image of all those 3072 frames together is getting better every time. It is also getting more a kind of structure. And it is getting less recognisable. It is also taking more time to compose the final image. This one took about 5 minutes o complete. P_4_2_2_01_GDV_05

Checked if it was possible to rotate the total image. Used footage from a 1960’s NASA film.

Lift off of Apollo 11. First in 18 x  24. And once in 36 x 48. But wat if I double that again. Seems just to work. Although there is not much to see anymore. The footage has just disappeared into a lot of tiny rectangles. It looks almost if it has 3D-ish qualities. It took almost 14 minutes to render.

Apollo 10 footage. Above the moon and filmed from the Lunar Module. P_4_2_2_01_GDV_08

Apollo 10 spacewalk.

Apollo 11 landing at sea. And I made a typo which might give me more ideas to make the next five programs.

Continuing with checking if my typo still works. I made a mistake while defining the variable TileCountX. Instead of 36 I filled it with 368. A lot of strange things appear in the display window. So I stopped the process. But now I make TileCountX 400 and let it run. This image took 14 minutes to complete.

TileCountX = 400 and TileCountY = 4. It does weird things to the original footage. P_4_2_2_01_GDV_12

What happens if I make TileCountY just 1 pixel and TileCountX 800? Amazing! P_4_2_2_01_GDV_13

Swap the content of TileCountX and TileCountY.

And now for an maximum stress test. TileCountX = width and TileCountY = height.Processing has to calculate 640.000 pixels. It started at 13:51. To complete 800 pixels in a row it takes about 2 minutes. After one hour I have cancelled it. It Hardly makes any progress and the image that is going to be delivered seems to get not very interesting. Another attempt. It took 56 minutes for Processing to render.

Just put everything on an 45 degree angle. Put to fill and 800 x 800 screen Processing needs to render an image of 1150 x 1150. Otherwise it leaves black corners in some place or another.

Kept the angle of 45 degrees but put TileCountY on 2. So the screen will be divided into two triangles.

Rotated the image for 90 degrees. Which gives an interesting effect. Processing renders a kind of small blocks. I wonder when I switch off the rotate function if the effect is the same. Yes it is still rendering little blocks. Maybe I have to increase TileCountX? It did not work out.

Interesting things are going on here. Organised chaos.

I did not change much here. Made TileCountX 2400 but it did not do much for the image quality. I just rotate the image for 270 degrees because I like it better when its upside down. That was a mistake. Processing rendered it horizontally but I think I like this even more.

Ah… There is an extra program in the Generative Design folder. The time-lapse camera. After each intervalTime a picture is saved to the sketch folder. That seems to give me some problems. Let’s try to solve them step by step. When running te program Processing says: ‘There are no capture devices connected to this computer.’ We need a camera. The camera is now attached. Processing says: ‘NullPointerException’ in the message area. And beside of that it gives me a lot of junk in the console: ‘2014-10-07 11:46:12.660 java[28975:10003] Error loading /Library/Audio/Plug-Ins/HAL/DVCPROHDAudio.plugin/Contents/MacOS/DVCPROHDAudio:  dlopen(/Library/Audio/Plug-Ins/HAL/DVCPROHDAudio.plugin/Contents/MacOS/DVCPROHDAudio, 262): no suitable image found. Did find: /Library/Audio/Plug-Ins/HAL/DVCPROHDAudio.plugin/Contents/MacOS/DVCPROHDAudio: no matching architecture in universal wrapper 2014-10-07 11:46:12.661 java[28975:10003] Cannot find function pointer NewPlugIn for factory C5A4CE5B-0BB8-11D8-9D75-0003939615B6 in CFBundle/CFPlugIn 0x7fef1c115350 (bundle, not loaded) name=DCR-PC110E,size=720×576,fps=30 name=DCR-PC110E,size=720×576,fps=15 name=DCR-PC110E,size=720×576,fps=1 name=DCR-PC110E,size=360×288,fps=30 name=DCR-PC110E,size=360×288,fps=15 name=DCR-PC110E,size=360×288,fps=1 name=DCR-PC110E,size=180×144,fps=30 name=DCR-PC110E,size=180×144,fps=15 name=DCR-PC110E,size=180×144,fps=1 name=DCR-PC110E,size=90×72,fps=30 name=DCR-PC110E,size=90×72,fps=15 name=DCR-PC110E,size=90×72,fps=1… so… I think I’m running into a technical problem which might cost me a lot of time. Knowing that I stop this session and continue with the next program.

Henk Lamers