Introduction to Creative Exploration on the Web
Harvard Extension School


Nicholas Natale

Project Details


Nicholas Natale


Feb 2017


The Bauhaus (Spring 2017)

Student Comments

Inspiration: Overlapping, by Josef Albers

Josef Alber’s quote from 1965, “in visual perception a color is almost never seen as it really is—as it physically is. This fact makes color the most relative medium in art”, inspired me to make a piece based off his technique and style. Alber’s believed that one of the most important elements in understanding color is light. I found the artwork titled Overlapping, a sandblasted sheet of opaque glass, a perfect blend of geometric shapes and monochromatic color. Since Overlapping was done on glass I had to figure out a way to illuminate the content from behind. The way that the opacity changes the color in my canvas simulates more or less light coming through the back of the image. As Alber’s suggests in his quote there are natural artifacts that influence the way we see color. Light affects the tint, tone, and shade of a specific color. I stuck with a monochromatic color palette but choose to bring a single hue into the composition like many of Alber’s other pieces. 

After closely replicating the original piece I decided that it should have a bit more ‘spice’ in the background. I stuck to basic geometric shapes like in many of Alber’s creations. It was a bit of a challenge to layer and position all of the rectangles with their proper fill. The best way for me to accomplish this was to sketch out the canvas on paper and mathematically determine the relationships between each geometric shape. My initial code used only one thin circle to outline the middle of the rectangles. Next, I thought I should create a loop and make more circles, which turned into a nested loop, which forms the helix looking figure in the background. As the background opacity changes the two sets of circles change color, working against each other. Again this technique goes back to the way Alber’s used light to make his creations more interactive. 

While creating my canvas I didn’t run into many issues. As a new programmer it took some time to think through all of the loops and conditionals in the sketch. One bit that was more trial and error is the order of operations in P5. How does placing something in the setup function versus the draw function affect the sketch? Where do specific variables need to be placed in order for them to work properly? With time I was able to work through this and get the sketch to where I am happy with it. Lastly, I’ve created a webpage for my canvas. It took me some time to figure out how to center and properly position the canvas amongst the other HTML elements, as well as where library and js files needed to be on the server side.