Re-Code: Vera Molnár’s Interruptions
So I decided to try out assignments from the Interactivity and Computation class by professor Golan Levin since I didn’t have chance to take it at CMU. Here’s the first experiment.
Background
Perhaps you are wondering why artists copy paintings in museums, as I am doing. The answer is to study, to learn, and to find inspiration from the great masters of the past. Copying directly from works of art gives the artists insight into the creative process: insights which cannot be learned from any other source. — Gerald King
The goal of the project is to study a piece of work by Vera Molnár, one of the first artists who create art with computers, and then“re-code” her generative plotter artwork, Interruptions, which she created fifty years ago, in 1968–69.
Observations
Here is a list of my observations:
- The art is bounded by a square canvas
- It consists of short black lines with the same length
- The lines are either not intersecting or just overlapping on the ends, as if there is some repelling force keeping them apart
- There is a general orientation for the lines (vertical for the first three pieces and horizontal for the bottom right piece). And all the lines are deviating from that direction at a generally a small angle
- There is a few random white space that disrupts the even distribution of lines
- The white space is random in space and size but only account for a small percentage of the whole canvas
- The closer to the white space the more deviation the line has from its general orientation
The more I make those observations, the more I see where the “Interruption” is. I start to see some invisible force that interrupts the lines from its original organized pattern. I made a simple sketch to illustrate how I think the art would be before and after the interruption:
This concept of interruption reminds me of some real life phenomena I’ve seen before:
Ok. I have trouble finding picture for the exact imagery I have in mind but I can see those lines as many magnetized needles. Because of the weak but existing magnetic force, they are mostly weakly attached to each other, in some instance, being repelled from each other.
Making time!
Following the above analysis I started drawing with the p5 online editor. Here’s the steps and thought process that I followed.
Step 1: A matrix of overlapping lines.
Step 2: Rotate them.
I singled out this step because rotation is a little tricky in p5. instead of rotating the element you are actually rotation the canvas and (0,0) is always the center for rotation, which is counter intuitive and took some time figuring out.
Step 3: Randomize the rotation angle
Step 4: Create some random rectangles that erases the lines
My initial approach towards creating the white space is to make rectangles at random spots with random height and width, and do not draw a line if it is going to be overlapping with the rectangle.
However there is a clear difference between the original Molnár’s white space and mine. Molnár’s white space has a more natural look. By natural I mean the white spaces are not completely random like mine, they are clustered around certain random spots.
Step 5: Use Perlin Noise to generate natural randomness
This natural look reminds me of the Perlin Noise I once learnt about, which is basically a technique to produce smooth randomness. There are already people out there did great jobs explaining what it is and how is works (Check out the tutorial on the Coding Train channel), so I won’t go into much detail.
After applying the Perlin Noise, the white space start to gather around certain spots.
Final step: Adjusting the noise parameter
However, getting the look close to the original work requires a lot of play around with the parameter. (How much details the noise has and what is the threshold value…) The below are some of my experimentations, and I picked one (labeled by the green dot) that best resembles the original work (labeled by the orange dot).
I’m not completely happy with the final result, I can still see a difference: the original work has a less random y value for the white space. From further away, it almost looks like a piece of grey print paper being scrapped or wore away with abrasion from some object. Yet, my creation is more like… little random cloud on a almost clear sky (there might be a better analogy).
Play with it!
Here is the final code/result. Click to generate a new graphic.
Some thoughts
After going through the re-code process, I start to appreciate the art work even more. Especially the fact that it is created at a time when people barely know what a computer was, and when there is no convenient computational tools for artist (all the modern languages and library that I’m using for this project). She is a true pioneer for making the connection that this completely new domain can be a media for creativity and expression.
