I chose to show the clock and time with the day/night change, along with the alarm bell going on and off.
//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();
}