rfarn Project-03

For this project, I struggled with figuring out where to start with my coding. The assignment was fairly open and creative, so it was hard to come up with an idea on the spot for what I wanted to do. I played around with stationary shapes and then incorporated some transformations and movement to create a dynamic drawing.

sketch

var w1 = 40;
var h1 = 40;
var w2 = 40;
var h2 = 40;
var w3 = 40;
var h3 = 40;
var w4 = 40;
var h4 = 40;
var R = 105;

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

function draw() {
    background(R, 98, 109);
    noStroke();
    
    
    if(mouseX < 640  & mouseX > 0){ //changing background color
        R = mouseX * (1/4);
    }

    fill(232, 199, 222); //top circle
    ellipse(width/2, height/4, w1, h1);
    if(mouseX > width/2 - w1/2 & mouseX < width/2 + w1/2 && 
       mouseY > height/4 - h1/2 && mouseY < height/4 + h1/2 && 
       dist(mouseX, mouseY, width/2, height/4) < w1/2) { //when mouse is in border of circle
        w1 += 5;//grows bigger
        h1 += 5;
    } else { if(w1 > 40 & h1 > 40){ //shrinks back down to 40 x 40
        w1 -= 5;
        h1 -= 5;
        }
    }

    fill(217, 189, 197); //right circle
    ellipse(width * (3/4), height/2, w2, h2);
    if(mouseX > width * (3/4) - w2/2 & mouseX < width * (3/4) + w2/2 && 
       mouseY > height/2 - h2/2 && mouseY < height/2 + h2/2 && 
       dist(mouseX, mouseY, width * (3/4), height/2) < w2/2) { //when mouse is in border of circle
        w2 += 5; //grows bigger
        h2 += 5;
    } else { if(w2 > 40 & h2 > 40){ //shrinks back down to 40 x 40
        w2 -= 5;
        h2 -= 5;
        }
    }

    fill(203, 190, 179); //bottom circle
    ellipse(width/2, height * (3/4), w3, h3);
    if(mouseX > width/2 - w3/2 & mouseX < width/2 + w3/2 && 
       mouseY > height * (3/4) - h3/2 && mouseY < height * (3/4) + h3/2 && 
       dist(mouseX, mouseY, width/2, height * (3/4)) < w3/2) { //when mouse is in border of circle
        w3 += 5; //grows bigger
        h3 += 5;
    } else {if(w3 > 40 & h3 > 40){ //shrinks back down to 40 x 40
        w3 -= 5;
        h3 -= 5;
        }
    }

    fill(188, 175, 156); //left circle
    ellipse(width/4, height/2, w4, h4);
    if(mouseX > width/4 - w4/2 & mouseX < width/4 + w4/2 && 
       mouseY > height/2 - h4/2 && mouseY < height/2 + h4/2 && 
       dist(mouseX, mouseY, width/4, height/2) < w4/2) { //when mouse is in border of circle
        w4 += 5; //grows bigger
        h4 += 5;
    } else { if(w4 > 40 & h4 > 40){ //shrinks back down to 40 x 40
        w4 -= 5;
        h4 -= 5;
        }
    }

    fill(255); //white dots
    ellipse((mouseX - width/5) * 2, (mouseY - height/5) * 2, 15, 15);
    ellipse((mouseX - width/5) * 2, (mouseY + height/5) * 2, 15, 15);
    ellipse((mouseX + width/5) * 2, (mouseY - height/5) * 2, 15, 15);
    ellipse((mouseX + width/5) * 2, (mouseY + height/5) * 2, 15, 15);
    

}