[icm week 2] The beach

(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. 

[javascript]//width and height variables

var oceanWidth = 800;
var oceanHeight = 700;
var whiteWashWidth = 850;
var whiteWashHeight = 700;

//speed variables

var tideO = 0.5;
var tideWW = 0.7;
var cloudSpeed = 0.2;

//color variables
var skyColor;
var cloudColor;
var oceanColor;
var whiteWashColor;
var sandColor;
var sunColor;
var birdColor;
var starfishColor;
var paperColor;
var palmColorB;
var palmColorF;
var coconutColorA;
var coconutColorB;
var coconutTrunkColor;
var crabColorA;
var crabcolorB;

//opacity variables
var a;
var b;

//moving parts x and y variables
var birdx1 = 150;
var birdy1 = 150;
var birdx2 = 650;
var birdy2 = 200;
var coconutx = 671;
var coconuty = 375;
var cloudLx = 27;
var cloudLy = 127;
var cloudRx = 612;
var cloudRy = 21;
var crabx = 573;
var craby = 473;

function setup() {
createCanvas(750, 500);
noCursor();
}

function draw() {

a = mouseY;
b = mouseY/6;

skyColor = color(56, 174, 204);
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);
birdColor = color(0);
starfishColor = color(240 – b, 134 – b, 89 – b);
palmColorB = color(21 – b, 153 – b, 110 – b);
palmColorF = color(10 – b, 183 – b, 126 – b);
coconutColorA = color(128 – b, 84 – b, 28 – b);
coconutColorB = color(161 – b, 118 – b, 84 – b);
coconutTrunkColor = color(94 – b, 69 – b, 48 – b);
paperColor = color(247, 243, 218);
crabColorA = color(232, 56, 56);
crabColorB = color(140, 14, 79);

//sky
background(skyColor);
noStroke();
from = color(225, 22, 84, a);
to = color(243 – b/2, 255 – b/2, 189 – b/2, a);
interA = lerpColor(from, to, 1/7);
interB = lerpColor(from, to, 2/7);
interC = lerpColor(from, to, 3/7);
interD = lerpColor(from, to, 4/7);
interE = lerpColor(from, to, 5/7);
interF = lerpColor(from, to, 6/7);
fill(from);
rect(0, 0, width, height/16);
fill(interA);
rect(0, height/16, width, height/16);
fill(interB);
rect(0, 2*height/16, width, height/16);
fill(interC);
rect(0, 3*height/16, width, height/16);
fill(interD);
rect(0, 4*height/16, width, height/16);
fill(interE);
rect(0, 5*height/16, width, height/16);
fill(interF);
rect(0, 6*height/16, width, height/16);
fill(to);
rect(0, 7*height/16, width, height/16);

//cloud left
ellipseMode(CORNER);
fill(cloudColor);
arc(cloudLx, cloudLy, 30, 30, PI, TWO_PI, CHORD);
arc(cloudLx + 30, cloudLy, 30, 30, PI, TWO_PI, CHORD);
arc(cloudLx, cloudLy + 10, 30, 30, TWO_PI, PI, CHORD);
arc(cloudLx + 30, cloudLy + 10, 30, 30, TWO_PI, PI, CHORD);
rect(cloudLx, cloudLy + 15, 60, 12);
arc(cloudLx + 45, cloudLy + 8, 23, 23, PI + HALF_PI, TWO_PI + HALF_PI, CHORD);
arc(cloudLx – 10, cloudLy + 8, 23, 23, TWO_PI + HALF_PI, PI + HALF_PI, CHORD);
arc(cloudLx + 20, cloudLy + 2, 23, 23, PI, TWO_PI, CHORD);
arc(cloudLx + 20, cloudLy + 15, 23, 23, TWO_PI, PI, CHORD);

if (cloudLx >= width + 30 || cloudLx <= -30) {
cloudSpeed = cloudSpeed * -1;
}
cloudLx = cloudLx + cloudSpeed;

//cloud right
ellipseMode(CORNER);
fill(cloudColor);
arc(cloudRx, cloudRy, 30, 30, PI, TWO_PI, CHORD);
arc(cloudRx + 30, cloudRy, 30, 30, PI, TWO_PI, CHORD);
arc(cloudRx, cloudRy + 10, 30, 30, TWO_PI, PI, CHORD);
arc(cloudRx + 30, cloudRy + 10, 30, 30, TWO_PI, PI, CHORD);
rect(cloudRx, cloudRy + 15, 60, 12);
arc(cloudRx + 45, cloudRy + 8, 23, 23, PI + HALF_PI, TWO_PI + HALF_PI, CHORD);
arc(cloudRx – 10, cloudRy + 8, 23, 23, TWO_PI + HALF_PI, PI + HALF_PI, CHORD);
arc(cloudRx + 20, cloudRy + 2, 23, 23, PI, TWO_PI, CHORD);
arc(cloudRx + 20, cloudRy + 15, 23, 23, TWO_PI, PI, CHORD);

if (cloudRx >= width + 30 || cloudRx <= -30) {
cloudSpeed = cloudSpeed * -1;
}
cloudRx = cloudRx – cloudSpeed;

//sun
fill(sunColor);
//mouseY = constrain(mouseY, 0, height/2);
ellipseMode(CENTER);
ellipse(mouseX, mouseY, 100, 100);

//sand
fill(sandColor);
rect(0, height/2, width, height/2);

//starfish back
stroke(starfishColor);
strokeWeight(4);
line(539, 407, 536, 390);
line(539, 407, 547, 390);
line(539, 407, 520, 408);
line(539, 407, 557, 407);
line(539, 407, 542, 430);

//starfish front
push();
translate(200, -280);
rotate(PI/6);
scale(1.2);
strokeWeight(4);
line(539, 407, 536, 390);
line(539, 407, 547, 390);
line(539, 407, 520, 408);
line(539, 407, 557, 407);
line(539, 407, 542, 430);
pop();

//ocean
noStroke();
fill(whiteWashColor); //whitewash
arc(200, height/2, whiteWashWidth, whiteWashHeight, 0, PI, CHORD);

if (whiteWashWidth = 850 || oceanWidth = 699) {
tideWW = tideWW * -1;
}
whiteWashWidth = whiteWashWidth + tideWW;

fill(oceanColor);
arc(200, height/2, oceanWidth, oceanHeight, 0, PI, CHORD);

if (oceanWidth = 800 || oceanWidth = 699) {
tideO = tideO * -1;
}
oceanWidth = oceanWidth + tideO;

//birds
noFill();
strokeWeight(1);
stroke(birdColor);

arc(birdx1, birdy1, 10, 10, PI, TWO_PI, OPEN); //bird 1
arc(birdx1 + 10, birdy1, 10, 10, PI, TWO_PI, OPEN);
birdx1 = birdx1 + random(-5, 5);
birdx1 = constrain(birdx1, 0, width);
birdy1 = birdy1 + random(-5, 5);
birdy1 = constrain(birdy1, 0, height/2);

arc(birdx2, birdy2, 10, 10, PI, TWO_PI, OPEN); //bird 2
arc(birdx2 + 10, birdy2, 10, 10, PI, TWO_PI, OPEN);
birdx2 = birdx2 + random(-5, 5);
birdx2 = constrain(birdx2, 0, width);
birdy2 = birdy2 + random(-5, 5);
birdy2 = constrain(birdy2, 0, height/2);

//coconut tree back
noStroke();

ellipseMode(CORNER);
fill(palmColorB);
arc(620, 150, 85, 50, (3*PI – QUARTER_PI), PI + HALF_PI, OPEN);
arc(643, 184, 75, 50, PI+(PI/10), TWO_PI, OPEN);
arc(547, 184, 75, 30, (3*PI – PI/10), TWO_PI, OPEN);
arc(580, 210, 60, 55, (3*PI – PI/3), PI + (3 * PI/4), OPEN);
arc(620, 205, 60, 55, (PI + QUARTER_PI), TWO_PI + QUARTER_PI, OPEN);

fill(coconutTrunkColor);
quad(619, 221, 645, 380, 649, 380, 626, 221);

fill(palmColorF);
arc(620, 195, 85, 50, PI+QUARTER_PI, TWO_PI, OPEN);
arc(560, 200, 85, 50, (3*PI – PI/8), (TWO_PI – QUARTER_PI), OPEN);
arc(590, 130, 40, 65, TWO_PI + QUARTER_PI, PI + PI/3, OPEN);

fill(coconutColorA);
ellipse(623, 195, 20, 20);
fill(coconutColorB);
ellipse(613, 198, 18, 18);
ellipse(608, 211, 18, 18);
ellipse(637, 222, 18, 18);
fill(coconutColorA);
ellipse(625, 215, 20, 20);

fill(coconutColorA); //rolling coconut
ellipse(coconutx, coconuty, 20, 20);
coconutx = coconutx + 0.4;
coconuty = coconuty + 0.5;

//coconut tree front
push();
translate(-200, 50);
scale(1.3);

ellipseMode(CORNER);
fill(palmColorB);
arc(620, 150, 85, 50, (3*PI – QUARTER_PI), PI + HALF_PI, OPEN);
arc(643, 184, 75, 50, PI+(PI/10), TWO_PI, OPEN);
arc(547, 184, 75, 30, (3*PI – PI/10), TWO_PI, OPEN);
arc(580, 210, 60, 55, (3*PI – PI/3), PI + (3 * PI/4), OPEN);
arc(620, 205, 60, 55, (PI + QUARTER_PI), TWO_PI + QUARTER_PI, OPEN);

fill(coconutTrunkColor)
quad(619, 221, 645, 380, 649, 380, 626, 221);

fill(palmColorF);
arc(620, 195, 85, 50, PI+QUARTER_PI, TWO_PI, OPEN);
arc(560, 200, 85, 50, (3*PI – PI/8), (TWO_PI – QUARTER_PI), OPEN);
arc(590, 130, 40, 65, TWO_PI + QUARTER_PI, PI + PI/3, OPEN);

fill(coconutColorB);
ellipse(623, 195, 20, 20);
fill(coconutColorA);
ellipse(613, 198, 18, 18);
ellipse(608, 211, 18, 18);
ellipse(637, 222, 18, 18);
fill(coconutColorB);
ellipse(625, 215, 20, 20);
pop();

//coconut tree middle
push();
translate(280, -280);
rotate(PI/6);
scale(1.1);
ellipseMode(CORNER);
fill(palmColorB);
arc(620, 150, 85, 50, (3*PI – QUARTER_PI), PI + HALF_PI, OPEN);
arc(643, 184, 75, 50, PI+(PI/10), TWO_PI, OPEN);
arc(547, 184, 75, 30, (3*PI – PI/10), TWO_PI, OPEN);
arc(580, 210, 60, 55, (3*PI – PI/3), PI + (3 * PI/4), OPEN);
arc(620, 205, 60, 55, (PI + QUARTER_PI), TWO_PI + QUARTER_PI, OPEN);

fill(coconutTrunkColor)
quad(619, 221, 645, 380, 649, 380, 626, 221);

fill(palmColorF);
arc(620, 195, 85, 50, PI+QUARTER_PI, TWO_PI, OPEN);
arc(560, 200, 85, 50, (3*PI – PI/8), (TWO_PI – QUARTER_PI), OPEN);
arc(590, 130, 40, 65, TWO_PI + QUARTER_PI, PI + PI/3, OPEN);

fill(coconutColorB);
ellipse(623, 195, 20, 20);
fill(coconutColorA);
ellipse(613, 198, 18, 18);
ellipse(608, 211, 18, 18);
ellipse(637, 222, 18, 18);
fill(coconutColorB);
ellipse(625, 215, 20, 20);
pop();

//mr. crab
noFill();
stroke(crabColorB);
strokeWeight(2);
arc(crabx – 10, craby, 15, 15, PI, TWO_PI);
arc(crabx – 10, craby + 6, 15, 15, PI, TWO_PI);
arc(crabx + 15, craby, 15, 15, PI, TWO_PI);
arc(crabx + 15, craby + 6, 15, 15, PI, TWO_PI);
line(crabx + 7, craby + 7, crabx + 4, craby – 8);
line(crabx + 12, craby + 7, crabx + 15, craby – 8);
fill(crabColorA);
ellipse(crabx, craby, 20, 15);
arc(crabx – 3, craby – 15, 10, 10, PI + PI/2, PI + PI/10, PIE);
arc(crabx + 10, craby – 15, 10, 10, TWO_PI – PI/10, PI + HALF_PI, PIE);

crabx = crabx + random(-4, 4);
crabx = constrain(crabx, 537, 590);
craby = craby + random(-4, 4);
if (mouseY >= height/2) {
craby = constrain(craby, 440, 510);
} else {
craby = constrain(craby, 520, 530);
}
}[/javascript]