abradbur-Project-03-Dynamic Drawing

Dynamic Drawing

function setup() {
    createCanvas(640, 480);
    
}

function draw() {
    background(33, 32, 29);

    //clouds follow or pass by the mouse
    var cloudcover = -mouseX + 640;
    var cloudsize =  mouseY * 0.25;
    fill(140, 138, 146);
    noStroke();
    ellipse(mouseX, 100, cloudsize, cloudsize);
    ellipse(mouseX + 20, 150, cloudsize, cloudsize);
    ellipse(mouseX + 5, 200, cloudsize, cloudsize);
    ellipse(mouseX - 50, 207, cloudsize, cloudsize);
    ellipse(mouseX + 100, 200, cloudsize, cloudsize);
    ellipse(mouseX -15, 200, cloudsize, cloudsize);
    ellipse(cloudcover, 350, cloudsize, cloudsize);
    ellipse(cloudcover + 50, 340, cloudsize, cloudsize);
    ellipse(cloudcover - 8, 330, cloudsize, cloudsize);
    ellipse(cloudcover + 10, 315, cloudsize, cloudsize);
    ellipse(cloudcover - 10, 290, cloudsize, cloudsize);
    ellipse(cloudcover - 45, 350, cloudsize, cloudsize);
    
    //stage
    fill(0);
    rect(0, 420, 640, 60);
    rect(40, 360, 560, 60);

    //lights
    fill(255);
    quad(45, 480, 55, 420, 105, 450, 85, 480);
    quad(555, 480, 525, 450, 575, 420, 595, 480);
    quad(45, 0, 55, 60, 105, 30, 85, 0);
    quad(555, 0, 525, 30, 575, 60, 595, 0);

    //Edward
    fill(0);
    //head
    triangle( 80, 200, 95, 230, 110, 200);
    triangle( 80, 200, 75, 190, 85, 200);
    triangle( 105, 200, 110, 190, 110, 200);
    triangle( 75, 190, 70, 215, 100, 200);
    //shoulders
    triangle( 65, 230, 95, 275, 125, 230);
    //waist
    quad( 85, 260, 90, 280, 100, 280, 105, 260);
    //flair
    quad( 90, 280, 75, 310, 95, 330, 105, 260);
    //legs
    triangle(100, 255, 103, 360, 105, 260);
    triangle(85, 290, 88, 360, 90, 280);
    //arms
    triangle(75, 240, 70, 280, 77, 240);
    triangle(70, 280, 90, 300, 70, 280);
    triangle(120, 230, 135, 200, 125, 230);
    triangle(135, 200, 150, 190, 136, 200);

    // depending on the position of the mouse
    //different lights will turn on
    if ((mouseX < 320) & (mouseY > 240)){
        fill(252, 18, 58, 51);
        quad( 55, 420, 320, 0, 105, 0, 105, 450);
    } if((mouseX > 320) & (mouseY > 240)){
        fill(254,205,68,51);
        quad( 525, 450, 70, 0, 575, 0, 575, 420);
    } if((mouseX <320) & (mouseY < 240)){
        fill(252, 51, 170, 51);
        quad (55, 60, 250, 480, 270, 480, 105, 30);
    } else{
        fill( 52, 253, 47, 51);
        quad (525, 30, 200, 480, 260, 480, 575, 60);
    }

    // if mouse in canvas, reveal text
    textSize(40);
    var W = "Welcome to Wonderland!"
    if((mouseX < 640) & (mouseX > 0) & (mouseY > 0) & (mouseY < 480)){
        fill(162, 16, 110);
        } else {
            fill(33, 32, 29);
        }
    text(W, 100, 35, 500, 200);
    
    //Wheel of Misfortune
    //move origin to the center
    translate(320, 240);
    rotate(radians(2 * frameCount));
    //first wheel slice
    fill(162, 16, 110);
    arc(0, 0, 300, 300, PI + 3 * QUARTER_PI, TWO_PI);
    //second
    fill(243, 226, 53);
    arc(0, 0, 300, 300, PI + 2 * QUARTER_PI, 7 * PI/4);
    //third 
    fill(253, 99, 169);
    arc(0, 0, 300, 300, PI + QUARTER_PI, 3 * PI/2);
    //fourth
    fill(37, 213, 161);
    arc(0, 0, 300, 300, PI, 5 * PI/4);
    //fifth
    fill(37, 213, 161);
    arc(0, 0, 300, 300, 0, PI/4);
    //sixth
    fill(162, 16, 110);
    arc(0, 0, 300, 300, PI/4, PI/2);
    //seventh
    fill(243, 226, 53);
    arc(0, 0, 300, 300, PI/2, 3 * PI/4);
    //eighth 
    fill(253, 99, 169);
    arc(0, 0, 300, 300, 3 * PI/4, PI);

}

I was really inspired by the description of a dungeon in one of my favorite podcasts, “The Adventure Zone”, and I thought this would be a really fun project to try to realize that scene in simple shapes. I did my best to use a whimsical color scheme and incorporate a lot of motion. I think that out of what we’ve done so far this is the project I’m most proud of, and the one I’ve spent the most time on.