GDV P.2.1.2 Movement in a grid

A fixed number of circles are drawn to the display one by one, line by line. Random values are added to the grid position of a circle, forcing to move it along the x- and y-axes. The farther the mouse is moved to the right, the greater the circle’s movement. This is how this assignment is described in the Generative Design book. Although this seems to be fairly straitforward… and eh… it was on a certain moment 🙂

P.2.1.2 Is also divided into 4 different programs. Here is the first program:
http://www.generative-gestaltung.de/P_2_1_2_01

I started with changing the background to black. Gave the circles some more thickness and repeated the program lines for that circle once more. Placed a second circle within the first circle.
P_2_1_2_01_GDV_01

Replaced the circles / ellipses by rectangles. Now they behave a bit clunky in JavaScript. That is certainly not the case if you run the program in Processing.
P_2_1_2_01_GDV_02

Replaced the rectangles by ellipses. Changed the strokeWeight. Played with the ellipse settings by adding  or subtracting ShiftX and ShiftY.
P_2_1_2_01_GDV_03

Removed all random positioning. Removed all ellipses by arcs. Arcs stay now on the same place. In Processing this sketch runs smoothly. In JavaScript it needs time to get the background black. I am adding some transparency here because I would like to see a very smooth image. Maybe this is a bit too much for JavaScript?
P_2_1_2_01_GDV_04

Replaced the arcs by rectangles. This seems to work better. You get these nice trails when the rectangles grow and shrink. Great!
P_2_1_2_01_GDV_05

The second program. Here is the original code:
http://www.generative-gestaltung.de/P_2_1_2_02

In this version I have put an extra layer on top of the existing one. Changed the ellipses into rectangles. Use the 1- 2- and 3 keys to change colors or alpha-channels.
P_2_1_2_02_GDV_01

It looks like I have worked with lines here but I used rectangles. Used tileCount to decide the roundness of the rectangles corners.
P_2_1_2_02_GDV_02

Here it is more obvious that I used rectangles. Because the objects in the background are moving faster than the objects in the foreground you get the impression that there is some sort off 3D-ish thing is going on.
P_2_1_2_02_GDV_03

Not much change here. Except for sizes and the lack of strokes.
P_2_1_2_02_GDV_04

Decreased the size of every rectangle to get a more open structure. The rest did not change so much.
P_2_1_2_02_GDV_05

The third program. And the original code:
http://www.generative-gestaltung.de/P_2_1_2_03

Sorry to start moaning again about JavaScript but the result here is so different in JavaScript when you compare it with the Processing version. In JavaScript the richness of symbol-like elements (which you can see when you run the Processing version) is completely ignored. JavaScript used a kind of Photoshop flattening? Ah… found that there is an alpha bug in Processing 2.0.2. It’s been filed and fixed. I am working in Processing 2.0b9. So maybe I have to update. But than I have to update OSX too. Beside of that minor flaw you could call this a happy accident. The only thing I did here is to increase the strokeWeight to 20.
P_2_1_2_03_GDV_01

Again some problems with the alpha here. Luckily I now know that it’s a bug. That might also explain why all colors are looking so bland.
P_2_1_2_03_GDV_02

Again. The Processing version looks so much nicer. I will stop complaining.
P_2_1_2_03_GDV_03

Made the strokeWeight even thicker. Did some translation and some color changes.
P_2_1_2_03_GDV_04

This one is fine. Changed colors again. And decreased the strokeWeight to 8. Changed the max-distance to 2000.
P_2_1_2_03_GDV_05

The fourth program. Here is the original code:
http://www.generative-gestaltung.de/P_2_1_2_04

When I started with this I was thinking about drawing complex shapes into the beginShape / endShape  code. But because I was curious what would happen if I put a copy on top of the existing layer of code I decided to wait with that idea. Changed the colors so I could see the objects better. divided mouseX and mousY by 40. And divided rectSize into 2.
P_2_1_2_04_GDV_01

What happens if I comment out two of the same lines of code. I get triangles!
P_2_1_2_04_GDV_02

What happens if I comment out two different lines of code. I get different triangles!
P_2_1_2_04_GDV_03

What happens if I comment out two of the same lines of code before the vertex is closed? I get even more different triangles!
P_2_1_2_04_GDV_04

Ok. Lets add another layer of green triangles and devide rectSize by 4. Even more interesting. It’s nice that sometimes you don’t have to do much to get another image. Sometimes its even better to do less to get more. By the way… here Processing and JavaScript are working flawless with each other.
P_2_1_2_04_GDV_05

Advertisements

Comments? Leave a reply.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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