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:

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.

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.

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

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?

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

The second program. Here is the original code:

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.

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

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.

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

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

The third program. And the original code:

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.

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.

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

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

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

The fourth program. Here is the original code:

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.

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

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

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

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.


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