Yugyeong Lee Project – 06

sketch

//Yugyeong Lee
//Section A (9:00AM)
//yugyeonl@andrew.cmu.edu
//Project 06

function setup() {
    createCanvas(600, 200);
}

function draw() {
    background(110, 181, 192);
    angleMode(DEGREES);

	var s = second();
	var m = minute();
	var h = hour();

	var secondBarWidth = map(s, 0, 60, 0, 388);
	var diamM = 80;
	var diamH = 34;
	var angleM = map(m, 0, 60, 0, 360);
	var angleH = map(h, 0, 24, 0, 360);
	var mx = cos(angleM) * (diamM / 2);
	var my = sin(angleM) * (diamM / 2);
	var hx = cos(angleH) * (diamH / 2);
	var hy = sin(angleH) * (diamH / 2);
	var centerMx = 500;
	var centerMy = 127.5;
	var centerHx = 85;
	var centerHy = 75;

	textSize(10);
	noStroke();
	fill(10, 108, 132);
	textFont("Comic Sans");
	text(nf(h, 2, 0), 120, 70);
	text(":", 135, 70);
	text(nf(m, 2, 0), 140, 70);
	text(":", 155, 70);
	text(nf(s, 2, 0), 160, 70);

	//design
	noStroke();
	fill(10, 108, 132);
	ellipse(40, 30, 25, 25);
	ellipse(centerHx, centerHy, 20, 20);
	ellipse(centerMx, centerMy, 50, 50);
	fill(110, 181, 192);
	strokeWeight(3);
	stroke(10, 108, 132)
	ellipse(60, 40, 30, 30);
	noFill();
	strokeWeight(5);
	ellipse(centerHx, centerHy, 54, 54);
	ellipse(centerMx, centerMy, 100, 100);

	//representation of second, minute, hour
	arc(centerMx, centerMy, diamM, diamM, 0, angleM)
	arc(centerHx, centerHy, diamH, diamH, 0, angleH)
	fill(10, 108, 132);
	noStroke();
	rect(112, 75, secondBarWidth, 5);
}

I was inspired to create an abstract clock only using basic geometric shape such as rectangle and ellipse. The small ellipse represents hour while the big one represents minutes. The rectangle represents seconds.