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:

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.

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.

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.

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.

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

The second program. Here is the original code:

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.

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.

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.

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.

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.

The third program. And the original code:

Just uncommented some lines. Tweaked almost nothing.

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

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

Uncommented some lines and played with the settings.

Uncommented some lines again. Changed some settings.

The fourth program. And here is the original code:

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

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.

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.

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

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

The original code of the fifth program:

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

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

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

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.

And unfortunately the last program is only working in Processing.


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