GDV P.2.1.1 Alignment in a grid

In a grid, either a line A is drawn from the upper-left to the lower-right corner or a line B is drawn from the lower-left to the upper-right corner. The direction of the diagonals is selected randomly. That is the way this assignment is described in the Generative Design book. I have to say that I am facing some problems here. One of the problems is that it is difficult to change the code without getting stuck with a program that is not functioning anymore. And which I cannot repair. Except when I revert everything. If you change one line it will certainly affect the rest of the code. So to avoid that it is most easy to say: ‘Hey, lets just change the .svg files and were all set’. I will try to avoid that attitude as much as possible. The chapter P.2.1.1 Is divided into 4 different programs. Here is the first program:

As an easy start I did not change a lot in the program. Changed the background to black and the lines to be written to white. I always do that because I think white images are getting better in a black environment. In contrary I think that black images on a white background are not as nice to look at.

If you put your cursor top left the structures even remind me at some of the works of Sol Lewitt. Well, sort off. The qualities of Sol Lewitt’s work are of course much different from the qualities I am using.

Changed the line function to point. And here something odd happens. In the Processing version you can use the 1 key for a rounded strokecap. And the 2 key is reserved for a project strokecap. This seems not to  work in JavaScript.

Placed a second set of points in the background. Here also the 2 key makes all points project in Processing. In JavaScript it does not work. I have no idea why. Maybe I will make a list of all Processing / JavaScript conversion problems at the end of all these series.

And now a another mysterious thing. Here the 1 key (ROUND), 2 key (SQUARE) and the 3 key(PROJECT) do work in JavaScript. But maybe that works because I switched everything from points back to lines again. By the way… the SQUARE function does not work in Processing on points either. ROUND and PROJECT do.

Continuing with the second program. Here is the original code:

In this version I tried to give the sketch a more randomized feeling. Also the contrast of the elements is different. Changed the colors a bit.

My browser does not like this sketch. Used arcs. It gives me a spinning beach ball when I hit one of the selected number keys. In fact it does not do anything. Or does it? Yes! It does something. It has a response time of 1 minute. In Processing it works just fine. Converting the sketch to JavaScript I have to restart my browser (Safari 5.1.10).

This sketch reacts almost the same as the previous one. You can hit the keys mentioned below the display. But it still reacts very slow. And if you hit the screen several times with your cursor the screen freezes. This sketch is also working normal in Processing. Oh… and again I have to restart Safari.

Although its working slow. It is working. Still working with arcs though.

Increased the tilecount to a 100. And left out the lower left to bottom right diagonals. P_2_1_1_02_GDV_05

The third program. And the original code:

The result you see in JavaScript is totally different from the result I get when I run this sketch in Processing. Replaced the lines by points. Here‘s the result you see when you run the sketch in Processing. And here is the result you see when the file is running in JavaScript.

Replaced some of the dots with lines. Again the result is not as nice as when you open the file in Processing. Here the image Processing is producing. And here is the JavaScript version.

Replaced all dots with lines. Here is the Processing result. This is the JavaScript version.

Skipped some of the lines and replaced them again with points. Here is what Processing makes of it. And this is the JavaScript version.

In this variation I only worked with lines. Here is the difference between the Processing and JavaScript version very different. This is a screen dump from the Processing version. Now I do not know were these differences come from. I did not experience these problems when Processing worked with applets for the Web. But it will be surely evoke other problems. And here is the JavaScript version.

The original code of the fourth program:

And here I did (almost) not interfere with the original code. Only changed the svg’s. In this case I use the flags of Greece, Norway, Poland, Belgium, The Czech Republic, Macedonia, Turkey, Switzerland, Sweden and finally Romania. Just follow the instructions below the display window. It’s all working fine.

Just made 9 different svg-files with different compositions of 3 color combinations. Only the 9th version seems to have some performance problems. It works. But slow.

Again I used the same svg-files as in the previous sketch. I only made some minor changes in the code. Which gives a totally different image and behavior.

Five new svg-files.

Because the 2014 Sochi Olympic Games started a few days ago I had a look at the icons that were made during the previous games. For me there is no doubt that the best designs were delivered in 1972 during the Munich Olympics by Otl Aicher and his team. There could be a small chance that the quality of that work might be improved in the future. In 1964 the Olympic games were in Tokyo. The icons of that Olympic were designed by Masaru Katzumie and Yoshiro Yamashita and they had also an interesting style. So I used some of them. Redrawn five of them in Adobe Illustrator. Exported them as a svg.file and here are the results.


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