Project 03: Dynamic Drawing

jen project 03 sketch copy

var minSize = 0.6;
var maxSize = 3;


function setup() {
    createCanvas(450, 600);
    strokeWeight(10);
}

function draw() {
    if (mouseX < width/2 & mouseY < height/2) {
        background(23,48,107);
    } else if (mouseX < width/2 & mouseY > height/2) { 
        background(204,102,0);
    }  else if (mouseX > width/2 & mouseY < height/2) {
        background(153,204,255);
    }  else {
        background (255,204,255);
  }
    //main circle
    fill(255);
       stroke(51,102,0);
       circle(225,300, mouseX, mouseY);
    
    //green line  
       stroke(23,112,44);
       line(225, 300, mouseX, mouseY);
    
    //light green line
       stroke(154,185,158);
       var mx = map(mouseX, 0, width, 60, 180);
       line(225, 300, mx, mouseY); 
    
    //orange circle
     if (mouseX < 225 & mouseY > 300) { 
       fill(255,178,102);
       ellipse(mouseX, mouseY, 50, 50);
        
    //blue circle and rotating blue circles    
     } else if (mouseX > 225 & mouseY < 300) {
       fill(178,202,243);
       ellipse(mouseX, mouseY, 50, 50);
       push();
       translate(337.5,150);
       rotate(radians(mouseY)); 
       ellipse(-50,50,40,40);
       ellipse(-50,-50,40,40);
       ellipse(50,50,40,40); 
       ellipse(50,-50,40,40);
       pop();

    //light purple circle and sheer circles
     } else if (mouseX > 225 & mouseY > 300) {
       fill(146,98,178);
       ellipse(mouseX, mouseY, 50, 50);
       fill(255,150);
       ellipse(mouseX, height/2, mouseY, mouseY);
       fill(255,150);
       ellipse(width - mouseX, height/2, height - mouseY, height - mouseY);
   }
     
    //dark blue circle and scattering white dots 
       else { 
       for (let y = 0; y < 100; y++) {
       randomSize = random(minSize, maxSize);
       randomX = random(width);
       randomY = random(height);
       fill(0,76,153);
       stroke(154,185,158);
       ellipse(mouseX, mouseY, 50, 50);
       noStroke();
       fill(255);
       ellipse(randomX, randomY, randomSize, randomSize);
    }  
  }
}

I wanted to create a sort of clock through the white circle and green clock hands that lengthened or shortened depending on the mouse. The upper left quadrant has a busy background to represent how that time period (9am- 12pm) is when my schedule usually feels the most hectic. Admittedly the other quadrants are a bit more random, but I definitely wanted to try out the push and pop functions we recently learned, so I incorporated these with the rotating light blue circles.