Project 3: Dynamic Drawing

var angle = 0;

function setup() {
    createCanvas(600, 450);
    
}

function draw() {
    // change the background color from light -> dark blue as mouse top -> bottom of canvas
    if (mouseY < height/7) { 
        background (188, 210, 232); //lightest blue
    } else if (mouseY < (height/7)*2) {
        background (145, 186, 214);
    } else if (mouseY < (height/7)*3) {
        background (115, 165, 198);
    } else if (mouseY < (height/7)*4) {
        background (82, 138, 174);
    } else if (mouseY < (height/7)*5) {
        background (46, 89, 132);
    } else if (mouseY < (height/7)*6) {
        background (30, 63, 102);
    } else {
        background (23, 47, 77); //darkest blue
    }

    //a box at the center of the canvas
    stroke(0);
    strokeWeight(3);
    line(250, 175, 250, 275); //left border of box
    line(250, 175, 350, 175); //top border of box
    line(350, 175, 350, 275); //right border of box
    line(250, 275, 350, 275); //bottom border of box
    fill(79, 37, 37); //brown color for box
    rect(250, 175, 100, 100);

    //open side of box if mouse touches border
    if (mouseX < 250 & mouseY > 175 && mouseY < 275) { //if open left side
        line(200, 150, 250, 175);
        line(200, 300, 250, 275);
        var r = 255; //pink fill
        var g = 180;
        var b = 200;
        fill(r, g, b);
        circle(mouseX, mouseY, 300-mouseX); //small circle attached to mouse
        fill(r-mouseX, g-mouseX, b-mouseX); //opposite color from small circle
        circle(0, mouseY, mouseX); //large circle on the side of canvas

    } else if (mouseX > 350 & mouseY > 175 && mouseY < 275) { //if open right side
        line(350, 175, 400, 150);
        line(350, 275, 400, 300);
        //rectangle spin on center, change size and spin angle 
        if(mouseX > 350 & mouseX <450) {
            fill(235, 207, 52); //yellow
        } else {
            fill(52, 235, 116); //green
        }
        push();
        translate(350, 225);
        rotate(radians(angle));
        rectMode(CENTER);
        rect(50, 50, mouseX-300, mouseX-300); //size of rect increases as mouse goes to the right
        pop();
        if (mouseX > 350 & mouseX < 450){ //if on left side
            angle += 3; //rotate clock-wise
        } else { //if on right side
            angle -= 3; //rotate counter clock-wise
        }

    } else if (mouseY < 175 & mouseX > 250 && mouseX < 350) { //if open top side
        line(200, 150, 250, 175);
        line(350, 175, 400, 150);
        var circleX = 300;
        var circleY = 150;
        //let circle size depend on how close mouse is to circles
        var size = constrain(dist(mouseX, mouseY, circleX, circleY),0, 30); 
        fill(115, 105, 205); //fill purple
        circle(circleX, circleY, size); //first circle
        circle(circleX, circleY-30, size*2); //2nd circle
        circle(circleX, circleY-60, size); //3rd circle
        circle(circleX, circleY-90, size*2); //4th circle
        circle(circleX, circleY-120, size); //5th circle

    } else if (mouseY > 275 & mouseX > 250 && mouseX < 350) { //if open bottom side
        line(200, 300, 250, 275);
        line(350, 275, 400, 300);
        //random neon spike of lines that follows the mouse 
        stroke(255, 230, 0); //bright yellow
        line(287.5, 362.5, mouseX, mouseY);
        line(287.5, 362.5, mapx, mapy+180);
        line(287.5, 362.5, mapx+40, mapy);
        line(287.5, 362.5, mapx, mapy+200);

        var mapx = map(mouseX, 250, 350, 210, 310); //map to a shorter length
        var mapy = map(mouseY, 275, 450, 235, 410); //map to a shorter length
        
        stroke(122, 255, 105); //bright green
        line(287.5, 362.5, mapx, mapy);
        line(287.5, 362.5, mapx-130, mapy-50);
        line(287.5, 362.5, mapx-40, mapy-20);
        line(287.5, 362.5, mapx-130, mapy+150);
        line(287.5, 362.5, mapx-150, mapy-39);

        stroke(248, 59, 255); //bright purple
        line(287.5, 362.5, mapx*2, mapy*2);
        line(287.5, 362.5, mapx*1.1, mapy);
        line(287.5, 362.5, mapx, mapy+220);
        line(287.5, 362.5, mapx+50, mapy);
        line(287.5, 362.5, mapx-80, mapy);

        stroke(150, 255, 250); //bright blue
        line(287.5, 362.5, mapx*1.5, mapy);
        line(287.5, 362.5, mapx-195, mapy+239);
        line(287.5, 362.5, mapx-230, mapy+180);
        line(287.5, 362.5, mapx+10, mapy+50);
        line(287.5, 362.5, mapx, mapy+190);
        line(287.5, 362.5, mapx*0.2, mapy*2);

        stroke(255, 150, 217); //bright pink
        line(287.5, 362.5, mapx-20, mapy);
        line(287.5, 362.5, mapx-100, mapy);
        line(287.5, 362.5, mapx-170, mapy+20);
    }

}