Project 3: Dynamic Drawing

sketch

var angle = 0
function setup() {
    createCanvas(450, 600);
    background(0);
}

function draw() {
    if (mouseY < height / 2){ //determines color based on mouse's vertical side of canvas
        background ("black")
    }
    else if (mouseY > height / 2) {
        background (135, 188, 222)
    }
    //if (mouse X < width / 2) {
      //background (255, 190, 11)

    noStroke();
    fill("white") // circle moves up and down
    ellipse(225, mouseY, mouseY, mouseY)


    ellipse(mouseX, 300, mouseX, 10) // ellipses moves side to side and gets longer
    ellipse(mouseX, 20, mouseX, 10)
    ellipse(mouseX, 580, mouseX, 10)
    ellipse(mouseX, 40, mouseX, 10)
    ellipse(mouseX, 560, mouseX, 10)
    ellipse(mouseX, 60, mouseX, 10)
    ellipse(mouseX, 540, mouseX, 10)
    ellipse(mouseX, 320, mouseX, 10)
    ellipse(mouseX, 280 , mouseX, 10)
    ellipse(mouseX, 80 , mouseX, 10)
    ellipse(mouseX, 100 , mouseX, 10)
    ellipse(mouseX, 120, mouseX, 10)
    ellipse(mouseX, 140 , mouseX, 10)
    ellipse(mouseX, 160 , mouseX, 10)
    ellipse(mouseX, 180 , mouseX, 10)
    ellipse(mouseX, 200 , mouseX, 10)
    ellipse(mouseX, 220 , mouseX, 10)
    ellipse(mouseX, 240 , mouseX, 10)
    ellipse(mouseX, 260, mouseX, 10)
    ellipse(mouseX, 280 , mouseX, 10)
    ellipse(mouseX, 340 , mouseX, 10)
    ellipse(mouseX, 360 , mouseX, 10)
    ellipse(mouseX, 380 , mouseX, 10)
    ellipse(mouseX, 400 , mouseX, 10)
    ellipse(mouseX, 420 , mouseX, 10)
    ellipse(mouseX, 440, mouseX, 10)
    ellipse(mouseX, 460 , mouseX, 10)
    ellipse(mouseX, 480 , mouseX, 10)
    ellipse(mouseX, 500 , mouseX, 10)
    ellipse(mouseX, 520 , mouseX, 10)

    push() // circle rotates around point
    translate(225, 300);
    fill(255,190,11)
    rotate(radians(min(mouseX, 200)));
    ellipse(100, 100, 40, 40);
    angle += 2
    if (mouseY)
    pop()
}

This project was hard because it was more open ended than the previous one’s and I had a difficult time understanding what to create and how to create it.