GDV P.2.3.6 Drawing with complex modules | Part 1

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:

I started with changing the full screen size into 800 * 800. I wondered what textAlign (CENTER, CENTER) does. Checked Processing’s Reference. It sets the alignment for drawing text. CENTER, CENTER = center text horizontally and vertically. But there where a few more blind spots. For instance what does round do? Ok. It rounds (up or down?) to the integer closest to the n parameter. And nf ()? nf () is used to add zeros to the left and/or right of a number. No idea what sense that can make (yet). Eh… floor ()? Calculates the closest int value that is less than or equal to the value of the parameter. And Constrain ()? Constrains a value to not exceed a maximum and minimum value. I have used all these functions before but it is good to retype what it does so I never forget it (I hope). Eh… str () I have never used. It returns the string representation of primitive data types and arrays. Unbinary () converts a string representation of a binary number into its equal value. Ok. I made the background black. I inverted the 00.svg file in illustrator. But when I started drawing with the grid on everything was still white. Only when I switched the grid off the background switched to black. Well maybe that is not such a bad idea. You know what? I will check the function drawGrid (). What happens if I make the fill zero? Everything gets black. There is no grid. Even if you turn it on or off. Ok. I change the fill to 128. And there is the grid. So it is displaying. Hmmm… but where can I find the color of the lines which make the grid. Background is responsible for the background. I set that to (255, 0, 0) for the time being. I think I found out that the strokes of the grid are colored by Processing’s default color (which is black). But I want to control the stroke color. So I placed StrokeWeight and stroke after the fill function. Inverted half of all SVG files because I liked both the black and white versions mixed when they are displayed on a grey background. In JavaScript the code doesn’t do anything. Well… I got  a TypeError: ‘true is not a function’. So I removed the true. And than it works except DrawGrid does not work. If you press g or G it clears the screen. And you are not able to draw anything. All other key-functions do work. That also goes for all programs after this one.

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.

The next thing I would like to do is to make a copy of a piece of the drawn image and paste it in another place. I used the copy function for that. When I draw in the rectangle (0, 0, 400, 800) I get an exact copy of that drawing at (400, 0, 400, 800). Well… that is not exactly true because if you look to the bottom right corner of both images you see some difference. One part of the module is missing (as you can see in this screendump). In JavaScript this program isn’t working properly. And because I would not like to slow down the learning process of learning Processing I will put no time in it to solve the problem.

To correct that mistake in the earlier version I commented out the copy function and pasted it after the module was drawn by the shape command. Sometimes mistakes are easy to solve. This program does not properly work in JavaScript either.

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.

Let’s see if I can do that. I could replace the grid on/of function for displaying a map. In that way I could use any image to trace a map. Or even better. Let the DrawGrid function stay as it is and make a new function called DrawMap. I’l import an SVG file with a map of The Netherlands. It seemed a little boring to show only the borders of that country. So I added a free interpretation of rivers to make it a bit more interesting. With the debug mode switched on its is also very nice. Just for fun I’ll draw a few more maps for the neighbors. DrawMap does not work in JavaScript. So I did not include the SVG files. Which in turn gives two other errors: ‘[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (Netherlands.svg, line 0)’ and ‘[Error] Processing.js: Unable to execute pjs sketch: XMLHttpRequest failed, status code 404. Sorry about this. And that is also true for the next 2 programs.

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.

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