Sarita Chen – Project 06 – Abstract Clock

sketch

var secR; // Initialise sec colour var
var secG;
var secB;
var minR; // Initialise min colour var
var minG;
var minB;
var hourR; // Initialise hour colour var
var hourG;
var hourB;
var h; // Initialise hour var
var m; // Initialise min var
var s; // Initialise sec var

function setup() { 
    createCanvas(500, 500);
    background(220);
    
}

function draw() { 
	background(255);

	secR = map(s,0,59,90,255); //Maps colour onto the seconds
	secG = map(s,0,59,90,180);
	secB = map(s,0,59,90,180);
	minR = map(m,0,59,90,177);  //Maps colour onto the minutes
	minG = map(m,0,59,90,91);
	minB = map(m,0,59,90,204);
	hourR = map(h,0,23,90,85); //Maps colour onto the hours
	hourG = map(h,0,23,90,134);
	hourB = map(h,0,23,90,186);

	h = hour(); // Hour variable
	m = minute(); // Minute variable
	s = second (); // Second variable

	text("Current Time:" +h,75, 50);
    text(":"+m,161,50);
    text(":"+s,178,50);


	noStroke();
	push();
	translate(width/5,height/2);
	fill(secR,secG,secB);
	ellipse(0,0,150,150);
	fill(minR,minG,minB);
	ellipse(150,0,150,150);
	fill(hourR,hour);
	ellipse(300,0,150,150);
	pop();



 
	
}

My inspiration for this abstract clock came from this website called What Colour Is It? that changes colour with the time. The website doesn’t split the time into hours/minutes/seconds, and it also displays the 6 value hex code for the colour. My only issue is that you can’t really see the minutes and hours change colour as you can the seconds.