Assignment 2: For Loop Patterns

For this assignment, I was inspired by the patterns I saw in Casey Reas’ Eyeo talk and some of the repeating patterns in the Computer Graphics and Art magazines. I thought that it would be really cool to generate my own pieces of “interactive modern art” focused on simple shapes and patterns, and I loved the idea that every bit of user interaction would change the outcome of the resulting pattern.

I focused on the for loop because of previous bad experiences with the while loop crashing and deleting my programs. I customized it so that it works with any width and height. I ended up making three experiments: Space Lines, Waves, and Multi Grid, which are all different takes on the same core concept.

The core technical concept for all three pieces is that the program is given four random structures to choose from, the user’s actions influence factors like color and stroke width, and clicking reveals a simpler view of the piece that focuses on the structures involved.

First is Galactic Lines. Galactic Lines is very similar to one of Casey Reas’ works. It reminded me of the “Galactic Chaos” carpet pattern of movie theaters from when I was young, hence the name.

What was up with the galactic chaos movie theater carpets of the '90s? | Boing Boing
Galactic Chaos, the movie carpet pattern itself

Here, the program chooses between four kinds of lines: vertical, horizontal, diagonally up, and diagonally down. The user’s mouse movement determines the possible colors from the RGB scale that can be displayed. It then provides a slider that users can change stroke width with. Clicking reveals the bare bones of the structure in black while the background continues to change color.

The second piece is Waves, which resulted from an experiment with Bezier curves. It reminded me of waves rolling in at the beach, hence the name. Moving the mouse changes the color of the strokes, which almost made me feel like I could see the waves under different kinds of lighting at different times of day. Clicking once again reduces the piece to its more structural elements.

The last piece is Multi Grid, which plays with the same grid structures that artists have played with for centuries using rect and random coordinate points. I made this piece the most interactive; it also changes the stroke width as you hover around, leading to stills that look extremely different from each other. In the upper left corner, it’s a colorful puzzle that could be a crowd of brightly-dressed people; at upper right corner it’s hot pink and thick-stroked. Clicking makes it as minimalist as you might expect.

Making these pieces was very fun. I tried to focus more on making interesting, responsive, and generative concepts rather than an overly technical piece. I also wanted each still to look like a piece of its own, so that someone playing with the pieces could come up with stills that look cool enough to use as wallpapers or shirt patterns or a piece of modern art. Here are some select stills I liked:

I would improve these in the future by trying to have the structures themselves respond to mouse movement (like leaving a circle of empty space around the mouse, or allowing the mouse to push and pull the structures with dragging). I would also try smoother animations since the rapidly shifting colors can come off a bit jarring. Lastly, I would try and make more complicated shapes and structures, not just grids, lines, and shapes.

For example, an extension of this project would probably be some kind of generated village, where houses, streets, lamps, cars, and people are randomly placed throughout the map, and colors of roofs/cars or the heights of buildings change with user input.


One thought on “Assignment 2: For Loop Patterns”

Leave a Reply