Category: Project-03-Dynamic-Drawing

// 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;
	}
}

function setup() {
    createCanvas(400, 400);
    rectMode(CENTER);
}

function draw() {
    background(30, 30, 40);
    noStroke();
    translate(200, 200);
    let angle = mouseY;
    rotate(radians(angle));
    //rectangle
    translate(-200, -200);
    fill(221, 115, 115);
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    rect(10 + m * 190.0 / 400.0, 200.0,
         size/2, size/2);
    fill(234, 217, 76);
    size = 350 - size;
    rect(200 + m * 190.0 / 400.0, 200.0,
         size/2, size/2);
    //circles
    fill(209, 209, 209);
    var m = max(min(mouseY, 400), 0);
     var size = m * 350.0 / 400.0;
    circle(10 + m * 190.0 / 400.0, 200.0,
         size/2);
    fill(81, 163, 163);
    size = 350 - size;
    circle(200 + m * 190.0 / 400.0, 200.0,
         size/2);
    //small circle
    var m = min(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0; 
    fill(100, 178, 200);
    size = 250 - size;
    circle(m * 190.0 / 400.0, 200.0,
         size/10);
    //small circle pink
    var m = min(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0; 
    fill(240, 178, 200);
    size = 250 - size;
    circle(width - (m * 190.0 / 400.0), height - (200.0),
         size/10);
    //vertex circles
     fill(59, 53, 97);
    var m = max(min(mouseY, 400), 0);
     var size = m * 350.0 / 400.0;
    circle((10 + m * 190.0 / 400.0) + 100, (200.0) + 100,
         size/5);
    fill(196, 224, 249);
    size = 350 - size;
    circle((200 + m * 190.0 / 400.0) - 100, (200.0) - 100,
         size/5);
    //other vertex circles
     fill(171, 73, 103);
    var m = max(min(mouseY, 400), 0);
     var size = m * 350.0 / 400.0;
    circle(width - ((10 + m * 190.0 / 400.0) + 100), height - ((200.0) + 100),
         size/5);
    fill(173, 246, 177);
    size = 350 - size;
    circle(width - ((200 + m * 190.0 / 400.0) - 100), height - ((200.0) - 100),
         size/5);

}