PROJECT 03 – DYNAMIC DRAWING

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);



}