PROJECT 03 – DYNAMIC DRAWING

sketch
``````function setup() {
createCanvas(600, 450);

}

function draw() {

if (mouseX < width / 2) {
background(133, 199, 222);
} else if (mouseX >= width / 2) {
background(69, 123, 157);
}
noStroke();

fill(230, 250, 252);
circle (300, 225, -max(min(mouseX, 800), 0));

//balloon string
strokeWeight(3);
fill(101, 101, 94);
beginShape();
curveVertex(20 + (mouseX - 50), 200);
curveVertex(20 + (mouseX - 50), 200);
curveVertex(15 + (mouseX - 50), 250);
curveVertex(5 + (mouseX - 50), 280);
curveVertex(5 + (mouseX - 50), 280);
endShape();

//balloon
fill(249, 112, 104);
ellipse(20 + (mouseX - 50), 160, 65, 80);
triangle(5 + (mouseX - 50), 210, 20 + (mouseX - 50), 200, 35 + (mouseX - 50), 210);

//bike

/*wheel*/
strokeWeight(1);
fill(255);
ellipse(15 + (mouseX - 200), 400, 50, 50);
ellipse(-55 + (mouseX - 200), 400, 50, 50);
/*skeleton*/
stroke(0);
line(-55 + (mouseX - 200), 400, -43 + (mouseX - 200), 370);
line(-43 + (mouseX - 200), 370, 15 + (mouseX - 200), 350);
line(15 + (mouseX - 200), 330, 20 + (mouseX - 200), 400);
line(15 + (mouseX - 200), 350, -20 + (mouseX - 200), 400);
line(-20 + (mouseX - 200), 400, -55 + (mouseX - 200), 400);
line(-43 + (mouseX - 200), 370, -47 + (mouseX -  200), 350);
line(-43 + (mouseX  - 200), 370, -15 + (mouseX - 200), 407);
/*seat&handle*/
fill(0);
rect(-55 + (mouseX - 200), 350, 20, 10, 20);
rect(-20 + (mouseX - 200), 407, 7, 5, 5);
rect(10 + (mouseX - 200), 330, 10, 7, 2);

//path
noStroke();
fill(187, 181, 189);
rect(0, 425, 600, 200);

//bob on bike

/*body*/
fill(153, 178, 221);
noStroke();
beginShape();
curveVertex(-20 + (mouseX - 200), 275);
curveVertex(-20 + (mouseX - 200), 275);
curveVertex(-24 + (mouseX - 200), 280);
curveVertex(-26 + (mouseX - 200), 280);
curveVertex(-28 + (mouseX - 200), 300);
curveVertex(-20 + (mouseX - 200), 320);
curveVertex(-20 + (mouseX - 200), 340);
curveVertex(-25 + (mouseX - 200), 350);
curveVertex(-28 + (mouseX - 200), 350);
curveVertex(-30 + (mouseX - 200), 350);
curveVertex(-31 + (mouseX - 200), 350);
curveVertex(-32 + (mouseX - 200), 350);
curveVertex(-32 + (mouseX - 200), 350);
curveVertex(-33 + (mouseX - 200), 350);
curveVertex(-34 + (mouseX - 200), 350);
curveVertex(-35 + (mouseX - 200), 350);
curveVertex(-40 + (mouseX - 200), 350);
curveVertex(-43 + (mouseX - 200), 350);
curveVertex(-45 + (mouseX - 200), 350);
curveVertex(-50 + (mouseX - 200), 350);
curveVertex(-53 + (mouseX - 200), 350);
curveVertex(-65 + (mouseX - 200), 340);
curveVertex(-60 + (mouseX - 200), 300);
curveVertex(-50 + (mouseX - 200), 280);
curveVertex(-45 + (mouseX - 200), 277);
curveVertex(-40 + (mouseX - 200), 277);
curveVertex(-36 + (mouseX - 200), 278);
curveVertex(-33 + (mouseX - 200), 276);
curveVertex(-30 + (mouseX - 200), 274);
curveVertex(-28 + (mouseX - 200), 272);
curveVertex(-28 + (mouseX - 200), 272);
endShape();

/*legs*/
strokeWeight(1);
stroke(153, 178, 221);
line(-26 + (mouseX - 200), 350, -20 + (mouseX - 200), 380);
line(-52 + (mouseX - 200), 350, -47 + (mouseX - 200), 380);
line(-80 + (mouseX - 200), 320, -50 + (mouseX - 200), 300);
line(-50 + (mouseX - 200), 310, -12 + (mouseX - 200), 290);

/*eyes*/
noStroke();
fill(0);
ellipse(-47 + (mouseX - 200), 300, 5, 10);
ellipse(-37 + (mouseX - 200), 298, 5, 10);

/*background shapes*/
if (mouseX < 200) {
fill(251, 216, 127);
} else if (mouseX < 300) {
fill(230, 170, 206);
} else if (mouseX < 400) {
fill(216, 241, 160);
} else if (mouseX < 500) {
fill(164, 145, 211);
} else if (mouseX >= 500) {
fill(224, 96, 126);
}

translate(width / 2, height / 2);
rotate(PI / 3.0);
rect(-26, -26, 12, 12);
rect(-80, 80, 22, 22);
rect(-36, 180, 32, 32);
rect(10, 35, 18, 18);
rect(100, -160, 20, 20);

}
``````

I was inspired by a game I used to play all the time called Dumb Ways to Die. I found it challenging making sure different components weren’t overlapping each other in places I didn’t want them to be.