GDV P.2.1.3 Complex modules in a grid

The module filling the grid consists of a stack of circles that become smaller and smaller and move in one direction (top, bottom, right or left), that is decided randomly. The number of circles corresponds to mouse position x, the movement to mouse-position y. That is how this assignment is described in the Generative Design book.

P.2.1.3 Is divided into 5 different programs. That is the reason why it took me a bit longer to finish the 25 programs. Here is the original first program:
http://www.generative-gestaltung.de/P_2_1_3_01

Again I started with changing the background to black. I think it works better when the shapes are white and displayed on a black background. Replaced the circles with arcs. The arcs are rotated random at -45, 0, 45 and 180 degrees.
P_2_1_3_01_GDV_01

Used arcs. They behave a bit clunky in JavaScript. The rotation is a bit less random. The arcs are now rotating random at -180, 0, 90 and 180 degrees.
P_2_1_3_01_GDV_02

Needs a few seconds to get loaded. These arcs are shifted from their center every time they are displayed. They rotate random at -270, 0, 90 and 180 degrees.
P_2_1_3_01_GDV_03

Needs six seconds to load. You might get a rotating beach-ball or some other fine feedback if you use another browser than Safari. But finally it works. Every mouse click gives a different composition. If you click on the left side it works faster. To the right more arcs are displayed so it takes more time to draw them.
P_2_1_3_01_GDV_04

Here I made the arcs  10 pixels thick. Also added some transparency. Stay on the left side with the mouse for better feedback.
P_2_1_3_01_GDV_05

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

And here we are having a problem. The program consists of 3 separate programs. All slightly different. They are defined under the 1, 2, and 3 key. But only the 1 and 2 key are functioning (in JavaScript). In Processing they all work fine. I think it has something to do with setting the frameRate () in the 3rd program. Not sure though.
P_2_1_3_02_GDV_01

This program also uses the 1, 2 and 3 key to switch drawing modes. This time it works perfectly. The x position defines the thickness of the lines. The y-position increases or decreases the amount of cells.
P_2_1_3_02_GDV_02

This program is only different from the earlier one because I have put another colored layer of lines on top of the background lines layer.
P_2_1_3_02_GDV_03

Takes a second to display. And it reacts a bit clunky in JavaScript.2 Increased the amount of lines of the original program. Also used some transparency to get a smoother images. It almost get’s 3D-ish qualities.
P_2_1_3_02_GDV_04

This image is more complex than the earlier ones. When repeated many times it still gives the impression of order. The program now displays three versions of colored lines on top of each other. All with slightly different settings.
P_2_1_3_02_GDV_05

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

Just uncommented some lines. Tweaked almost nothing.
P_2_1_3_03_GDV_01

Uncommented some other lines and increased the strokeWeight to 20 pixels. Also used some transparency.
P_2_1_3_03_GDV_02

Again uncommented several lines. Changed some lines a little too.
P_2_1_3_03_GDV_03

Uncommented some lines and played with the settings.
P_2_1_3_03_GDV_04

Uncommented some lines again. Changed some settings.
P_2_1_3_03_GDV_05

The fourth program. And here is the original code:
http://www.generative-gestaltung.de/P_2_1_3_04

Changed the colors and the background. tweaked tileWidth and tileHeight.
P_2_1_3_04_GDV_01

Under key 1 I defined some grey arcs. They can make interesting patterns as you might see when moving your cursor in the x- or y-direction. Key 2 introduces ellipses. Removed the rectangles. Key 3 introduces some 3D-ish alike images when you point your cursor near the top right corner.
P_2_1_3_04_GDV_02

Key 1 shows patterns made of arcs. It shows only 10 degree-parts of arcs. By introducing a strokeWeight of 20 pixels you get very short strokes. Under key 2 I restricted the rotation of the objects. StrokeWeight is also decreased. Key 3 gives me way too complicated images. beside of that they also look to me much less interesting because of their complexity. Its getting better if you move the cursor at the almost top of the image moving horizontally.
P_2_1_3_04_GDV_03

This is almost the same as the previous version. There are only more lines involved. That makes the images smoother.
P_2_1_3_04_GDV_04

In this version I only work with arcs and rectangles. Did a lot of tweaking on the numbers involved.
P_2_1_3_04_GDV_05

The original code of the fifth program:
http://www.generative-gestaltung.de/P_2_1_3_05

Removed all the fill functions of the original program. Working with strokes.
P_2_1_3_05_GDV_01

This version will only work in Processing. I have no idea why JavaScript causes problems.
P_2_1_3_05_GDV_02

The same problem here. Works only in Processing. Which is a pity because it generated beautiful images.
P_2_1_3_05_GDV_03

This one does work. I find it totally unpredictable why it is working. And why the other ones don’t. Used only arcs here. Some are close to each other. Some exist out of a few arcs only.
P_2_1_3_05_GDV_04

And unfortunately the last program is only working in Processing.
P_2_1_3_05_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