ICM - Assignment 2

The moral of this assignment is to come up with an idea, and to take a step back and consider how to simplify and streamline how to achieve that idea.

Our assignment for the third week was to have three different elements:

  1. One element controlled by the mouse.

  2. One element that changes over time, independently of the mouse.

  3. One element that is different every time you run the sketch.

I did not exactly cover all of those.

My sketch.

I first decided I wanted to replicate on of Hokusai’s 36 Views of Mt. Fuji. I originially chose Red Fuji, and designed my Mt. Fuji off of the one depicted there. I then felt that the cloud system was too difficult to replicate at this point and changed to Lightnings Below The Summit.

Lightnings Below The Summit (凱風快晴), 1830 - 1832. Katsushika Hokusai.

Lightnings Below The Summit (凱風快晴), 1830 - 1832. Katsushika Hokusai.

Thankfully, Mt. Fuji in this print is pretty similar to the one in Red Fuji.

I decided to go with using vertexes and bezierVertex to build Fuji, but first planned it all out in Illustrator. I then plotted it all out by hand to, which helped with me organize my steps.

fuji template.png

I wanted to use a gradient for the colors, but was unsure of how to build one myself. I found an example of gradients in the Example page of the p5.js site. Being that it was built to fit inside rectangles, and I was unsure of how to make it fit directly inside my defined shapes, I had to build a system of rectangle layers.

It was only when I nearly finished the project did I learn that I could upload images into the p5 editor. I created a rough version of the clouds, uploaded it to the editor and built the animation with the help of a classmate.

After seeing Kensu-rah’s assignment in class, I realized I could add sound to the editor as well and put in the thunder aspect.

While I am absolutely happy that I built that coordinates and bezier curves into the editor myself, I do wish I had realized I could have built each of the separate shapes outside of the editor and placed them inside. It would have saved me time to work more on the gradient and animation functions.