sunsetbeach
// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
// Project-03
var wavy = 10;
var toggle = 0;
var bird = 255;
function setup() {
createCanvas(450, 600);
}
function draw() {
//background - color changes from light blue to light purple as y-axis changes
background(212 + mouseY / 50, 235 - mouseY / 53, 242 - mouseY / 49);
//sun - size changes as y-axis changes
stroke(255);
fill('#FFB7B2');
ellipse(225, 418, min((mouseY), 260));
//waves - position shift as y-axis changes
fill(255);
var points = 5;
var wav = wavy + mouseX / (width * 20);
var step = mouseY / height * 100;
beginShape();
vertex(0, height);
vertex(0, height / 1.5 + step);
curveVertex(0, height / 1.5 + step);
curveVertex(width / points, height / 1.5 + wav + step);
curveVertex(2 * width / points, height / 1.5 - wav + step);
curveVertex(3 * width / points, height / 1.5 + wav + step);
curveVertex(4 * width / points, height / 1.5 - wav + step);
curveVertex(5 * width / points, height / 1.5 + step);
vertex(5 * width / points, height / 2 + step);
vertex(width, height);
vertex(0, height);
vertex(0, height);
endShape(CLOSE);
//toggle when waves get high
if (wav >= 15) {
toggle = 0;
} else if (wav <= -15) {
toggle = 1;
}
//wave movement correction
if (toggle == 0) {
wavy = wavy - 0.3;
} else if (toggle == 1) {
wavy = wavy + 0.3;
}
//top right cloud - position shift as y-asis changes
push();
fill(255, 255, 255, 110);
ellipse(440 - mouseY / 10, 320, (constrain(mouseY, 120, 320)), 25);
pop();
//bottom left cloud - position shift as y-axis changes
fill(255, 255, 255, 100);
ellipse(mouseY / 5.5, 370,(constrain(mouseY, 100, 340)), 20);
//birds' right wings - birds move along with the mouse
noStroke();
fill(bird);
arc(mouseX, mouseY, 20, 4, 0, PI + QUARTER_PI, PIE);
arc(mouseX + 15, mouseY + 13, 20, 4, 0, PI + QUARTER_PI, PIE);
arc(mouseX + 25, mouseY + 7, 20, 4, 0, PI + QUARTER_PI, PIE);
arc(mouseX + 65, mouseY + 9, 20, 4, 0, PI + QUARTER_PI, PIE);
arc(mouseX + 145, mouseY + 30, 20, 4, 0, PI + QUARTER_PI, PIE);
//birds' left wings - birds move along with the mouse
ellipse(mouseX - 4, mouseY - 3, 3, 10);
ellipse(mouseX + 12, mouseY + 9, 3, 10);
ellipse(mouseX + 22, mouseY + 3, 3, 10);
ellipse(mouseX + 62, mouseY + 5, 3, 10);
ellipse(mouseX + 142, mouseY + 26, 3, 10);
//when the white birds go below the water, birds color changes to gray
if (mouseY > 500) {
bird = 205;
} else {
bird = 255;
}
}
At first, I wanted to create a realistic radial gradient sun, but the visuals did not turn out the way I expected; so I diverted direction and created a much simpler, more animated concept of the sunset beach.