Month: September 2020

/*
 * Eric Zhao
 * ezhao2@andrew.cmu.edu
 *
 * Dynamic Drawing: This program creates an array of squares
 * and circles on the canvas. The circles light up and grow
 * in size the closer the mouse is to them, while the squares
 * rotate based on the mouse's position relative to the center
 * of the canvas. Number of circles and squares per row can be
 * changed and the program is scalable with canvas sizes.
 */


var circleDia = 0;
var mouseDist = 0;
var cursorX = 0; 
var cursorY = 0; 
var distanceMult = 0; //circle diameter multiplier
var circleCount = 15; //circle and square count
var tanRotation = 0; //square rotation state
function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    colorMode(HSB, 360, 100, 100, 100)
    rectMode(CENTER);
}

function draw() {
    push();
    noStroke();
    circleDia = width/circleCount;
    cursorX = constrain(mouseX, 0, width);
    cursorY = constrain(mouseY, 0, height);
    //constrains mouseX and mouseY to canvas size
    background(0);
    //the following are two for loops that draw a grid of circles with
    //[circleCount] number of circles in each row and column
    for(let y = circleDia/2; y <= 1 + height-circleDia/2; y+= circleDia){
        for(let x = circleDia/2; x <= 1 + width-circleDia/2; x+= circleDia){
            mouseDist = constrain(dist(x, y, cursorX, cursorY), 1, width);
            distanceMult = mouseDist/circleCount;
            //used later to modify circle size based on mouse position
            tanRotation = atan2(cursorY - height/2, cursorX - width/2);
            //stores rotation of mouse before pushing rectangle
            push();
            translate(x, y);
            rotate(tanRotation);
            fill(15,25);
            rect(0, 0, 50, 50);
            pop();
            //draws rotated rectangles in same positions as the circle grid
            if(dist(x, y, width/2, height/2) < height/2){
            //constrains array of circles within a larger circular area
                fill(180+degrees(atan2(cursorY - height/2, cursorX - width/2)),
                65, 512/distanceMult); 
                /*adjusts HSB values based on proximity of mouse to circle and 
                coordinates of mouse relative to center of canvas*/
                circle(x, y, circleDia-distanceMult);
            }    
        }
    }
    pop();
}

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