
(TL;DR: The final sketch is here!)
Create a sketch that includes (all of these):
- One element controlled by the mouse.
- One element that changes over time, independently of the mouse.
- One element that is different every time you run the sketch.
This week’s exercise builds off of what we learned last week and added more dynamic, interactive and/or moving pieces.
I had an idea to do a sunset scene, where the mouse would control the sun and the rest of the elements would change when the sun went down or up. One of the first things I did (pictured above) was divide the height in two to make horizon. Then I made the ocean by making a large blue arc expand slowly, creating the effect of the tide coming in.
But I wanted the tide to also recede, so I looked up how to use an “if…or” statement:
[javascript]if (oceanWidth = 800 || oceanWidth = 699) {
tideO = tideO * – 1;
}
oceanWidth = oceanWidth + tideO;[/javascript]
This basically made it so that when the ocean arc reached a certain size, it would get smaller until it reached its minimum size, at which point it’d get bigger again.
I discovered the helpful lerpColor() function, which allowed me to easily make a gradient of colors for the sunset.

But I also wanted to make the colors change as the mouse (aka sun position) changed. I figured that if I could make alpha—or opacity—a variable, I could make it change according to the y position of the mouse. I ended up making two variables that controlled opacity, one for more intense color changes and one for less.
[javascript] a = mouseY;
b = mouseY/6; [/javascript]
I used these for opacity in my lerpColor() function.
[javascript]from = color(225, 22, 84, a);
to = color(243 – b/2, 255 – b/2, 189 – b/2, a);[/javascript]
I also ended up using these variables in a slightly different way as well — by adding or subtracting values to the rgb codes, I could also make the colors brighter or darker as the mouse moved. So my color variables ended up looking like this:
[javascript]cloudColor = color(218 – b, 240 – b/2, 247 – b/2);
oceanColor = color(36 – b, 123 – b/3, 160 – b/3);
whiteWashColor = color(139 – b, 240 – b/3, 238 – b/3);
sandColor = color(194 – b/2, 178 – b/2, 128 – b/2);
sunColor = color(247 + a, 94 + a, 3 + a);[/javascript]


The screenshots above show you what it looks like when the sun is up vs when it’s down. I’m happy I was able to make the sky change dramatically, while allowing the trees, sand and ocean change more subtly.
For the element that changes each time you run the sketch, I have two birds moving semi-randomly across the sky. And for fun I added a little crab that comes out only when the sun goes down. I haven’t figured out how to make these random movements less jarring and terrifying, which would probably help make the entire scene a bit more relaxed and chill as a beach should be. Oh well! Maybe it can just be the eternal dusk beach of your nightmares.

As with last week, I had a ton of fun making this sketch. The screenshot above is just a still, so check out the full thing here.
The code is below. Continue reading “[icm week 2] The beach”