Totoro 2.0

View my sketch here!

View my code here!

Objective: Add interactivity

  1. Element controlled by mouse—wind strokes, balloon flies away when mouse hover wind over it
  2. Element that changes over time, independent of the mouse—clouds moving back and forth
  3. Element that is different every time you run the sketch—balloon color changes at random; every load of the sketch gives a different balloon color

totoro2.0_compressed.gif

The random element that didn't go as planned...

From random birds to random background color

I wanted to create random birds at first that will appear at different x, y positions when the sketch is run. Unfortunately, I was having a lot of trouble trying to draw a bird that fit the sketch aesthetics.

Here's my attempt to draw a bird:

Untitled

Didn't like how it looked so I decided to change the background color instead.

Untitled

From random background color to random balloon color

Untitled

While trying to make a static random background color, I realized I couldn't create the random number outside of setup and draw as it's a p5.js function and would throw an error. So this would be what happens if I just put it in the draw loop. Because it's a loop, it will be the same every time the sketch runs so it wouldn't meet the task at hand here which is to create something random every time the sketch runs.

club bg.gif

Untitled

If I put the entire background code into the setup function, it will create random colors every time the sketch is run. However, because the background is only drawn once rather than a loop in the draw loop, the animations had this effect 👉🏻

bg in setup.gif

Untitled

I figured I could set the random color in setup so that every time the sketch runs, it will only choose 1 random color. The background will then be continuously drawn with that 1 random color. This worked out great except I didn't like how the sky could become colors that wouldn't match the whole piece because it was random.

Untitled

<aside> 🎈 Hence, I used this concept to make the balloon color random instead. Since it's a small part of the sketch, even if the colors don't match with everything else too well, it wouldn't be as jarring.

</aside>