Project 3 – Dynamic Drawing

function setup() {
    createCanvas(400, 400);
    rectMode(CENTER);
}

function draw() {
    background(30, 30, 40);
    noStroke();
    translate(200, 200);
    let angle = mouseY;
    rotate(radians(angle));
    //rectangle
    translate(-200, -200);
    fill(221, 115, 115);
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    rect(10 + m * 190.0 / 400.0, 200.0,
         size/2, size/2);
    fill(234, 217, 76);
    size = 350 - size;
    rect(200 + m * 190.0 / 400.0, 200.0,
         size/2, size/2);
    //circles
    fill(209, 209, 209);
    var m = max(min(mouseY, 400), 0);
     var size = m * 350.0 / 400.0;
    circle(10 + m * 190.0 / 400.0, 200.0,
         size/2);
    fill(81, 163, 163);
    size = 350 - size;
    circle(200 + m * 190.0 / 400.0, 200.0,
         size/2);
    //small circle
    var m = min(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0; 
    fill(100, 178, 200);
    size = 250 - size;
    circle(m * 190.0 / 400.0, 200.0,
         size/10);
    //small circle pink
    var m = min(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0; 
    fill(240, 178, 200);
    size = 250 - size;
    circle(width - (m * 190.0 / 400.0), height - (200.0),
         size/10);
    //vertex circles
     fill(59, 53, 97);
    var m = max(min(mouseY, 400), 0);
     var size = m * 350.0 / 400.0;
    circle((10 + m * 190.0 / 400.0) + 100, (200.0) + 100,
         size/5);
    fill(196, 224, 249);
    size = 350 - size;
    circle((200 + m * 190.0 / 400.0) - 100, (200.0) - 100,
         size/5);
    //other vertex circles
     fill(171, 73, 103);
    var m = max(min(mouseY, 400), 0);
     var size = m * 350.0 / 400.0;
    circle(width - ((10 + m * 190.0 / 400.0) + 100), height - ((200.0) + 100),
         size/5);
    fill(173, 246, 177);
    size = 350 - size;
    circle(width - ((200 + m * 190.0 / 400.0) - 100), height - ((200.0) - 100),
         size/5);

}