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


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