ICM · Week 6

Prompt of This Week’s Assignment / Mid-Term Project

  • design a sketch that has lots of “something” using either arrays or arrays and objects
  • re-organize / break-down your classes into the “smallest functional units” possible
  • try different ways to have your objects “communicate” with each other in some way

Working on This Week’s Assignment

For my project this week, I created an interactive cherry blossom and snow sketch using objects and arrays, and also incorporated a slider to add an additional layer of interaction. Basically, when the mouse is pressed on the twigs/thin branches, a cherry blossom flower would appear. The slider component at the bottom right of the canvas controls the snow falling and snow pile on the ground. When the slider is at the very left, the snow is falling and the pile of slow on the ground is visible. But as the slider gets move towards the center, the snow fall amount decreases gradually as the slider shifts. After the slider gets moved past the center, the snow fall stops and the pile of the snow on the ground disappears or melts.

Area I Created with Rectangles in an Array to Set Boundaries on Where Flowers Can Appear (Not Visible in Actual Sketch)

Briefly explaining some of the elements in my code, I started out by drawing a quick background of the tree branch, moon, and sky, and emending my drawing as an image file to P5js as the canvas background. But because I only want flowers to appear around the thin branches, which is a very irregular shape and area, I ended up setting boundaries for where the flowers would appear using an array of rectangles. These are basically invisible rectangles I have in my sketch so that for my mousePressed( ) function, I could use a for loop and conditional statement to check if the mouse is pressed inside only these areas which I want. And if it is pressed inside, the returning value is true and a flower gets added. I also used another array for my flowers in this sketch by setting its constructor in a class, with a display( ) function and changeColor( ) function inside the object.

Part of Code Related to the Flower Drawing with MousePressed ( ) Function

For my snow falling, I created an array for it as well and mapped it to the slider to control the amount of snow fall through the slider gradually changing the frame count. And once the slider gets dragged past the midpoint from left to right, the conditional statement becomes false and the snow would stop falling. Through the slider, I wanted to create a gradual shift in the amount of snow fall.

Part of Code Related to the Snow Falling Mapped to Slider

In additional, the slider also controls the pile of snow on the bottom which is another embedded image in the sketch. Through another conditional statement, the snow pile shifts vertically downwards as the slider gets dragged past the midpoint from left to right, and upwards as the slider gets dragged in the opposite direction. In summary, there is the most amount of snow fall when the slider is at the very left, and no snow pile and snow falling at all when the slider is at the very right.

Part of Code Related to the Bottom Snow Pile Mapped to Slider

Screen Captured Video of Assignment Outcome

Screen Captured Interaction of Assignment

Link to My Week 6 / Mid-Term Assignment

Cherry Blossom & Snow

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s