This is the text I copied from the Generative Design book. Together they are strong: simple modules become supercharacters. Using combinatorics and complex modules as paint brushes, each module is defined in relation to its four neighbors, generating supercharacters. Depending on the module repertoire and constellation, many different character groups can be generated. With the mouse, the user draws a grid and positions various SVG modules in its fields. The only information that exists for each field is whether it is empty or filled. When the grid is displayed, the filled or empty state of each field’s neighbors become apparent, according to this, a specific graphic module is selected. The sixteen possible states of the four neighbors can be easily summarized in a four-digit binary code. The correct SVG module can be determined simply by converting the binary code into a decimal number, without complicated combinatorics. Here is the unchanged code where I started with:
I have put all illustrations which I made during this exercise on a Flickr summary page:
To get to the (sometimes unchanged) code point your browser to:
When I painted the modules to the screen I saw that the grid did not align correctly with the 800, 800 size of the display window. When I switch on the grid I could see that the modules did not align on the right and bottom. I also have changed all global variable names into variable names starting with a capital (conform an agreement with Andrew Glassner). So, for instance, I changed tileSize into TileSize because it’s a global variable. TileSize is responsible for the size of the modules. Changed that from 30 to 20. It gives a more refined image and all modules fit nicely in the 800 * 800 display window. Drawback is that it is more difficult to read the debug text. I added 10 pixels to posY. Changed the color to yellow and left out the binaryResult variable because I am not sure if I would like to use or see it. I always can bring it back in later. In fact I like the debug and gridmode switched on for its scientific look.
Made all SVG files white. Background (0) and the grid lines (128). When I switched off the grid I saw grey lines between each module. Made a screen dump with the grid turned on. In the first place I thought that the grid left some information but looking at the screen dump this was not the case because the grey lines did not align with the grid lines. Check the SVG files in Illustrator. It seems that the image is not exactly within the canvas boundaries. I took the horizontal line as a starting point. And yes… when I looked at the modules they where exactly aligned. Had to change all SVG’s so that they fall exactly within the canvas border. That seems a lot of work but it’s easy because in Illustrator you do a select all. And when you move the object it falls exactly in its place.
Another thing I would like to try is to make it mirror the copy or reflect horizontally. That would give a symmetric image. I thought that swapping the x and y positions would do the trick. That did not lead to any success. Did a search for flip image at the Processing forum. Found a mail from 21st of february 2008 from Daniel Shiffman where he mentions that scale (-1.0, 1.0) will flip an image. Together with translate and a repetition of the shape line that works. Some minor flaw makes debug mode behave not as expected. Made a few versions. But I think it doesn’t work like I would like it to work. Some connections between the modules seem not be as good as I thought. And also the line quality isn’t always as good as in the original code.
I uncommented the symmetric part and would like to go more into detail. So I changed the TileSize into 10. This gives even more interesting patterns. This could be (with a little more functionality) an ideal tool for designing maps.
Ok… when it is possible to draw maps it’s also possible to draw type. Started with the coca-cola wordmark. But it did not fit in my 800 x 800 display. So I did draw only the word coca. And its scaled horizontally. Which is fine. Tried another one with the word DADA. Increased the module size. Used one of our own designed typefaces to trace the word. But I think that I am reaching the limits of details. Because the program is not drawing very smooth. You have to repeat drawing several times to get a module painted.
These numbers represent the date I made this drawing (in our own typeface). I did not change any of the modules. But I will do that soon in part 2 of this exercise.