// Jenny Zhang
// Section D
// jennyzha@andrew.cmu.edu
// Project 06
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var r = 100;
var b = 100;
var g = 100;
var e1 = 100;
var e2 = 100;
var e3 = 100;
var mouthSizeW = 5;
var mouthSizeH = 10;
var prevSec;
var millisRolloverTime;
function setup() {
createCanvas(480, 480);
millisRolloverTime = 0;
}
function draw() {
background(255,250,200);
// Fetch the current time
var H = hour();
var M = minute();
var S = second();
if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
var mils = floor(millis() - millisRolloverTime);
var hourBarWidth = map(H, 0, 23, 0, width);
var minuteBarWidth = map(M, 0, 59, 0, width);
var secondBarWidth = map(S, 0, 59, 0, width);
var secondsWithFraction = S + (mils / 1000.0);
var secondsWithNoFraction = S;
var secondBarWidthChunky = map(secondsWithNoFraction, 0, 60, 0, width);
var secondBarWidthSmooth = map(secondsWithFraction, 0, 60, 0, width);
noStroke();
fill(255, 200, 200);
ellipse(width/2, height/2, hourBarWidth, hourBarWidth);
var eyeLX = width/2 - hourBarWidth*0.25;
var eyeRX = width/2 + hourBarWidth * 0.25;
fill(0,90,150);
ellipse(eyeLX, height/2, minuteBarWidth/3, minuteBarWidth/3);
ellipse(eyeRX, height/2, minuteBarWidth/3, minuteBarWidth/3);
fill(226,43,42);
var mouth = width/2
ellipse(mouth, height-height/4, secondBarWidthChunky/3, secondBarWidthChunky/3)
}
This project was inspired by our third project, the variable faces, where I made the head the hour, the eyes the minute, and the mouth a function of the seconds. I enjoyed going back to my previous project and reviewing, improving, and understanding my past code on a deeper level as I refined it into an abstract clock for this project.