Before I will start with showing some examples of the Generative Design Variations project I will explain something about the numbering of the files. There is really not much to it because I kept the numbering the same as it was done in the book. So P_1_0_01 is the first program in the book. I added GDV to it which stands (as you might have guessed) for Generative Design Variations. And I also added my version number. P_1_0_01_GDV_01 means the first program from the P-section and my first variation. And so forth and so on.
When you take a look at that first program P_1_0_01 than it seems easy to make a variation. Because I thought that the essential thing in this program was that horizontal movement with your nocursor would mean a change in size and vertical movement would mean a change in color. So I think I kept that quality in every program to follow. The first thing I did was make 36 squares instead of one square.
P_1_0_01_GDV_01
That looked a bit boring so I decided to put more squares in. I added 25 more and positioned them at the locations where the horizontal and vertical lines between the rectangles are crossing each other.
P_1_0_01_GDV_02
I thought it would be even more interesting to add some transparency. But the drawback is that the colors are getting very muddy at certain nocursor-locations.
P_1_0_01_GDV_03
What can you do more? Instead of one square make 25 x 25 and 24 x 24 squares.
P_1_0_01_GDV_04
But after a while I thought that making more squares would not be the way to go. So I made a basic version with only five squares. left out all the fill colors and used only lines. This gives a nice effect when lines are displayed over each other.
P_1_0_01_GDV_05
Found that very minimalistic and made a new version based on nine rectangles. Used fills and transparency again.
P_1_0_01_GDV_06
Played with the transparency values. Squares are disappeared. This is a combination of the previous two sketches.
P_1_0_01_GDV_07
Making it more simple instead of more complex. Tried if it was possible to make four individual squares which react on x-y position of the nocursor. I noticed that when the four rectangles almost filled the screen that it displayed a cross. Kept that in the back of my head.
P_1_0_01_GDV_09
Four squares positioned in four squares. Not very interesting though.
P_1_0_01_GDV_10
Sixteen squares positioned horizontally and vertically. Color and size still depending on the mouse-position of nocursor. On top of these squares are sixteen by sixteen smaller squares filled with the same color as the background.
P_1_0_01_GDV_12
Again sixteen squares positioned horizontally and vertically. Beneath it are the same amount of squares. They are moving into a checkerboard kind of structure when moving the nocursor from the left side to the right side of the display window.
P_1_0_01_GDV_13
Here the idea of making a cross is coming back from the back of my head. Where are visual ideas kept in your head? Anyone? Five squares. One square in the center. The others grow from centers on top left, top right, bottom left and bottom right. You cannot see them because these are filled with the background color. The center square is filled with color ranges half of the y-value of the nocursor.
P_1_0_01_GDV_15
The center square is, as you might expect, in the middle of the display window. Moving the cursor left or right brings in two ellipses which are filled with the background color.
P_1_0_01_GDV_17
Another approach. I tried to get away from the circles and rectangles. Did some tests with introducing functions which calculate more interesting shapes. That helped for a while. But the amount of code and the description of the shapes was getting too complex. So I decided to use images which I designed in Adobe Illustrator. These images are exported using the svg-format and imported into Processing. As a source of inspiration I used a book called ‘Katachi, Classic Japanese Design’. In that book I found a decoration which was used on a ‘uchiwa’ or flat fan. The ‘uchiwa’ was introduced in Japan from China during the Nara period (710 – 794). Used five circles on top of each other. But that was a mistake because it won’t work. And that says more about the intelligence of the people who designed the original symbol than about my ability to recreate it.
P_1_0_01_GDV_21
A stylized tortoise shell relief shape which you can find on the side walls of the main gate at Hagashi Honganji established in 1602 by the Shogun Tokgawa Ieyasu. However… the shape is created in Adobe Illustrator and imported into Processing. In Processing all style elements, like line thickness line color and object fills are removed. They are re-introduced with the functions that are available in Processing for adjusting line thickness and fills. I’ve also repeated the image twice with different line thickness and fill settings.
P_1_0_01_GDV_22
A flower-like design which you can find on ancient Japanese lacquer trays. Redrawn in Adobe Illustrator and repeated twice with different line settings and colors.
P_1_0_01_GDV_23
Stylized plum blossom shape which is used as a decorative element on thee or sake cups. It’s a symbol of grandeur, resilience and courage. Same way of working as I did with the previous example.
P_1_0_01_GDV_24
This is an interpretation of a symbol which I found on a Japanese Kimono called ‘hanten’ or ‘happi’ a straight-sleeved coat bearing a house or shop name (yago) or symbol. Hanten were worn mainly by artisans and members of the fire brigade during the Edo period (1600 – 1868).
P_1_0_01_GDV_25
Interpretation of a namako-, or sea cucumber-, style wall decoration.
P_1_0_01_GDV_26
Another interpretation of the namako wall decoration pattern. This decorative effect is produced by affixing square tiles to a wet clay wall and then plastering the joints in a semicircular relief. The style originated also in the edo period and reached its height of popularity during the Meiji period (1868 – 1912).
P_1_0_01_GDV_28
One variation of a form which you can find on rice bowls for everyday use.
P_1_0_01_GDV_29
Two icons which represent old-fashioned light bulbs representing light and dark.
P_1_0_01_GDV_30
Eighty maps of The Netherlands are centered in the display window. A .svg file which I created in Adobe illustrator. Size and color behavior are still the same as in the original program. Removed all style elements and replaced them using Processing’s functions. By the way: This image is a variation on the decor or stage set of Theo Maassen’s show ‘Zonder Pardon’. But that aside.
P_1_0_01_GDV_31
A text which I originally found on a T-shirt: ‘Contents may vary in colour’. Changed one character in the sentence and positioned it n the center. FIOTEXT Regular font designed by Jeanne de Bont.
P_1_0_01_GDV_32
When finished I got some mixed feelings about this programming session because the only thing you do in the end is replace and change the svg-file. The basic program as it was in the original Generative Design book file is almost kept the same. I only made some adjustments which anyone could have done (also without knowing nothing about programming). I don’t know if that is a good or a bad thing. Anyway I have now learned what I can do with x- and y-values when you connect them to size and color. And I guess that’s the still essential thing.
mycodehistory 