Introduction to Creative Exploration on the Web
Harvard Extension School

Geo from the Other Side

Antonia Villa

Project Details


Antonia Villa


Feb 2017


The Bauhaus (Spring 2017)

Student Comments

Inspiration: Overlapping, by Josef Albers

When looking through the Bauhaus collection at the Harvard Art Museum, I was immediately attracted to the work of Joseph Albers. Albers’ abstract works leverages geometrical patterns and appeal to me as they touch on both my creative and analytical nature. In particular, the use of a monotone color pallet in the piece Overlapping speaks directly to the profound impact the arrangement of shapes on a canvas can have on the dimensionality of a piece. 

In closely examining Albers’ piece Overlapping, I was very taken by the use of different shades of color and transparency in order to create depth on the 2-Dimensional canvas. As an artist myself who strictly works in black and white, the pallet was directly inline with my own work and was a natural fit for my piece. All of the shades I chose mirror Albers' work with the exception of red. The red was introduced as an accent to breakup the rigid forms created by the geometrical figures in the foreground and create a central focus. All of the red “wings” or lines on the exterior of the canvas grow toward the central void when the page is loaded. The intention was to draw the viewer’s eye toward the intersection of the red polygon and the top of the arc. The introduction of arc was another choice deliberately made in order to draw the viewer’s eye to this central location. The viewer’s eye is no longer limited to strictly straight lines the rectangular shapes form and can take a break from the sharp corners and follow either path of the arc to the top. 

When choosing an interactive aspect of my design, my first instinct was to create an inversion of the color pallet. The change in stark values changes where the viewer’s attention is drawn. When the mouse is clicked, the squares in the foreground layer are inverted to become the darkest shade immediately drawing the viewer’s eye to them. Secondly, the mouse click also creates a continuation of the lines over the arc pushing the arc into the background. The contrast in the position of the arc within the images layers emphasizes the impact layering can have on the viewer’s line of sight. When the arc is displayed in the foreground (with no lines), there is more diversity in the directionality of the piece allowing the viewer’s eyes to wander. However, when the lines extend over the arc and it is pushed to the background, the viewer is forced to view the piece in a more horizontal nature as the lines create a path for the viewer’s eyes. 

Seeing as this is the first abstract work I have created in the browser, I had a lot of fun working with all of the different elements the p5 library contains. One set back I found was attempting to understand the iterative nature of the function draw(). I struggled to understand how to hide certain shapes on the screen as they were continually being redrawn. I also ran into a few issues trying to understand how to set a loop to clear what object had previously been drawn and re-draw it. For example, in my particular piece, I would have loved to redraw the exterior lines every time the mouse was released, but I struggled to figure out the right approach to take to clear the canvas as a result of the action. Despite my frustrations, this was an exciting assignment, and I am excited to see what others were able to accomplish.