Project-3-Dynamic Drawing

I chose to show the clock and time with the day/night change, along with the alarm bell going on and off.

sketch

//Jae Son, section C

var x = 0;
var y = 0;
var angle = 0;

function setup() {
    createCanvas(640, 450);
}

function draw() {
  if(mouseX<320){ //when mouse is on the left side
  background(151,215,240); //it is during the day - light blue background
  noStroke();
  fill(255,150,60);
  ellipse(mouseX,80,100,100);  //orange sun is up
  } else { //when mouse is on the right side
  background(31,41,84); //it is during the night - dark blue background
  noStroke();
  fill(255,227,90);
  ellipse(mouseX,80,100,100); //yellow moon is up
  }
  fill(46,178,187);
  noStroke();
  quad(230,360,250,360,270,300,250,300); //clock leg
  quad(380,322,400,322,410,360,390,360); //clock leg
  push();
  translate(250,130); 
  rotate(PI*3/4); 
  rect(0,0,25,35); //bridge between the clock body and the bell
  translate(-70,-110);
  rotate(PI/2);
  rect(-5,25,25,35); //bridge between the clock body and the bell
  pop();
  arc(220,125,mouseY/3.5,mouseY/3.5,PI*3/4,PI*7/4); //alarm is on when mouse is on the bottom - bell is bigger
  arc(415,125,mouseY/3.5,mouseY/3.5,PI*5/4,PI/4) //alarm is on when mouse is on the bottom - bell is bigger
  ellipse(320,225,250,250); //clock body frame
  fill(255);
  ellipse(320,225,220,220); //clock body 
  fill(46,178,187);
  ellipse(320,225,20,20); //clock center
  push();
  fill(46,178,187);
  translate(318,225);
  rotate(radians(30)+mouseX/100); //clock hour hand rotates clockwise 
  rect(0,0,5,80);
  pop();

}

Leave a Reply