Denise Jiang-Project 06

My project is 800*800, but the full width wouldn’t show. The idea is that within one minute, the egg is going to be fried, so the color is changing gradually(orange to yellow). The pan is going to turn every minute. There is also a dozen of eggs representing the current hour. Every hour an egg is going to disappear from the box. sketch

function setup() {
    createCanvas(800, 800);
}
function draw() {
	var S=second();
	var mappedS=map(S,0,60,0,600);
	background(220);
	//second
	rectMode(CORNER);
	noStroke();
	fill(200);
	rect(40,90,600,20);//darker background
	noStroke();
	fill("white");
	rect(40,90,mappedS,20);//second
	strokeWeight(1);
	//fill(0);
	//text(S,30,70);
	//little clock
	fill(200);
	ellipse(690,100,30,30);
	strokeWeight(2);
	stroke(150);
	line(690,100,690,86);
	line(690,100,700,100);
	//pan
	noStroke();
	fill(100);
	ellipse(width/2,height/2,250,250);//gray outer layer
	angleMode(DEGREES);
	push();
	translate(height/2,width/2);
	rotate(minute()/5*30);
	rectMode(CORNERS);
	rect(0,0,-20,-250);	//handle
	ellipse(-10,-250,20,20);
	pop();
	fill(60);
	ellipse(width/2,height/2,220,220);//dark inner layer
	//egg
	fill("white");
	noStroke();
	ellipse(width/2-10,height/2,100,90);
	var r=map(S,0,60,255,251);
	var g=map(S,0,60,127,238);
	var b=map(S,0,60,80,167);
	fill(r,g,b);
	ellipse(width/2,height/2,30,30);
	println();
	//hour
	var eggX=120;
	var boxX=60;
	var baseX=105;
	for (i=0;i<12-hour()%12;i++){
	fill("white");
	noStroke();
	ellipse(eggX,720,38,53);//one egg
	eggX+=50;
	}
	//box
	fill(158, 151, 142);
	noStroke();
	quad(boxX,725,boxX+670,725,boxX+650-20,760,boxX+40,760);
	for(i=0;i<12;i++){
		fill(158, 151, 142);
		noStroke();
		rectMode(CORNERS);
		rect(baseX,760,baseX+30,770);
		baseX+=50;
	}	
}