Introduction to Creative Exploration on the Web
Harvard Extension School


Tu Lu

Project Details


Tu Lu


Feb 2017


The Bauhaus (Spring 2017)

Student Comments

For this assignment, I was inspired by Otti Berger's "Upholstery Sample". What struck a chord with me, initially, about this artwork were the colors -- I thought it resembled the Buddhist flag. However, after a quick Google search, it actually doesn't look much like the Buddhist flag but there are a few similar patterns (blue, yellow, red lines). I found this artwork to be aesthetically pleasing.

My approach was to keep the basic layout of "Upholstery Sample" so that it would be easily recognizable to the audience. Instead of making over thirty number of vertical lines, I opted to make six even-sized rectangles that highlight the main colors of the original work and add thin, charcoal horizontal lines.

This is where the influence ends. I like symmetry so I added lines of ellipses running across the top of each side of the canvas to create an 'X' shape with side transparent to add an interesting look. The two ellipses for each line were meant to look like crop circles going across the image. The larger ellipse in the center of the canvas is for symmetry and to hide the mess of ellipses overlapping underneath. Next, I added a line-shaped object that morphs with the user's mouse movement. It reminds me of a scanner or radar, as if the user is trying to search for an object on the canvas.

The final piece to my sketch is where the title, "Switch" derives from. Using the 'begin shape' and 'vertex' function, I created a diamond in the middle of the canvas. This diamond only appears when the mouse is clicked. I made the diamond transparent and chose neon green for the borders to make it stand out more, without losing the appearance of the background layout.

I wanted to clean up my code as much as I knew how to. Examples include adding global variables such for the width of each vertical rectangle, using simplified equations like +=, and for-loops to repeat patterns. I frequently visited the p5 reference page for ideas on new shapes or mouse events. A website called Image Color Picker was fantastic in helping me replicate the RGB colors of "Upholstery Sample". There was a bit of a thought process for me when thinking about how to create the canvas-wide diamond using the 'beginShape()', 'endShape()' functions. I had to think about each point and how it would connect. It wasn't difficult but there were a few times where the coordinates were not where I wanted it to be.

To make the for-loop, I referenced a great tutorial on YouTube -- this was before I watched this course's Week 3 lectures. I was surprised at how similar the for- loop syntax is to C language. The other difficulty I faced was how to make the embedded image appear under my p5 sketch. I still haven't figured this out but I'm hoping that, if it can be done, it will be covered in future lectures. Overall, this was an enjoyable assignment and helped get me comfortable in p5's syntax.