rgroves – Abstract Clock – section B

sketch

var quote = ["All", "time", "is", "all", "time.", "It", "does", "not", "change.",
"It", "does", "not", "lend", "itself", "to", "warnings", "or", "explanations.", "It", "simply", "is.", "Take", "it", "moment", 
"by", "moment,", "and", "you", "will", "find", "that", "we", "are", "all,", "as", "I've", "said", "before",
"bugs", "in", "amber."];

var letters = 360;


function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(220, 170, 125);

	var H = hour();
    var M = minute();
    var S = second();

    
    //floor
    fill(162, 137, 118);
    quad(0, 250, width, 300, width, height, 0, height);
    strokeWeight(40);
    stroke(250, 180, 135);
    beginShape();
    curveVertex(0, 250);
    curveVertex(0, 250);
    curveVertex(width/3, 200);
    curveVertex(2 * width/3, 230);
    curveVertex(width, 300);
    curveVertex(width, 300);
    endShape();
    noStroke();
    

    //window
    fill(240, 190, 135);
    rect(width/3 - 14, 45, 50, 50);
    var time = H + M/60 + S/3600; 

    if (time <= 12) { //window gets light from midnight to noon
        var skyR = map(time, 0, 12, 35, 200);
        var skyG = map(time, 0, 12, 40, 220);
        var skyB = map(time, 0, 12, 70, 235);
        fill(skyR, skyG, skyB);
    }
    if (time >= 12) { //window gets darker from noon to midnight
    	var skyR = map(time, 12, 24, 200, 35);
    	var skyG = map(time, 12, 24, 220, 40);
    	var skyB = map(time, 12, 24, 235, 70);
    	fill(skyR, skyG, skyB);
    }
    rect(width/3 - 15, 45, 30, 30);

    //darkness filter - entire room gets darker from 19:00 to midnight and lighter from midnight to 7:00
    if (time <= 7) {
    	var a = map(time, 0, 7, 200, 0);
        fill(35, 40, 70, a);
    } else 
    if (time >= 19) {
    	var a = map(time, 19, 24, 0, 200);
        fill(35, 40, 70, a);
    } else {
    	var a = 0;
        fill(35, 40, 70, a);
    }
    rect(0, 0, width, height);

    //medallion
    stroke(50, 20, 50);
    strokeWeight(3);
    line(width/3 + 21, height/3 + 1, width/3 + 21, height/3 + 100);
    noStroke();
    fill(175, 110, 20);
    ellipse(width/3 + 20, height/3, 25, 25);
    fill(200, 155, 37);
    ellipse(width/3 + 21, height/3 + 1, 20.5, 20.5);
    fill(150, 50, 100);
    ellipse(width/3 + 21, height/3 + 1, 5, 5);
    for (i = 0; i < 10; i++) {
    	push();
    	translate(width/3 + 21, height/3 + 1);
    	var angle = map(i, 0, 10, 0, 2 * PI);
    	rotate(angle);
    	fill(255, 254, 208);
    	ellipse(0, 7, 2, 2);
    	pop();
    }

    //light from the medallion
    if (time <= 7) { //beam moves across the floor as the sun/moon move across the sky
    	var lightbeam = map(time, 0, 7, 200, 400);
    } else
    if (time >= 19) {
    	var lightbeam = map(time, 19, 24, 0, 200); 
    } else {
    	var lightbeam = map(time, 7, 19, 0, 400);
    }
    if (lightbeam < 200) { //beam becomes more concentrated at noon, midnight
    	var lightbeamwidth = map(lightbeam, 0, 200, 80, 20);
    } else {
    	var lightbeamwidth = map(lightbeam, 200, 400, 20, 80);
    }
    fill(230, 180, 80, 100);
    ellipse(lightbeam, letters, lightbeamwidth, 20);
    var whitelight = color(230, 240, 200, 40);
    var redlight = color(150, 50, 10, 60);
    var redlightheight = map(M, 0, 60, height/3 + 1, letters);
    var lines = 5000
    for(i = 0; i < lines; i++) { //amount of red in the light bean represents minutes in the hour
    	strokeWeight(.1);
    	var leftx = map(i, 0, lines, width/3 + 21, lightbeam - lightbeamwidth/2);
    	var rightx = map(i, 0, lines, width/3 + 21, lightbeam + lightbeamwidth/2);
    	var y = map(i, 0, lines, height/3 + 1, letters);
    	var amt = map(y, redlightheight, letters, 0, 1);
    	var fade = lerpColor(redlight, whitelight, amt);
    	if (y < redlightheight) {
    		stroke(redlight);
    	} else {
    		stroke(fade);
    	}
    	line(leftx, y, rightx, y);
    }

    //light from window
    fill(whitelight);
 	quad(width/3 - 15, 45, width/3 + 35, 45, lightbeam + (5 * lightbeamwidth), height, lightbeam - (5 * lightbeamwidth), height);

 	//words go across the page - quote loops every minute
 	var textspeed = map(S, 0, 60, 0, quote.length); //quote is fewer than 60 words, so have to convert
 	var textspeedinteger = textspeed - (textspeed%1);
 	var textspacing = map(textspeedinteger, 0, quote.length, 0, width - 25);
 	if (dist(textspacing, letters, lightbeam, letters - 5) < 5 * lightbeamwidth) {
 		fill(whitelight);
 	} else {
 		fill(155, 125, 110);
 	}
 	text(quote[textspeedinteger], textspacing, letters - 5, width, 50);

 	
}

For this project I was inspired by the medallion in Indiana Jones that illuminates a point on a map at a certain time of day. The beam of light moves across the screen every 12 hours from 7am to 7pm and 7pm to 7am (as the sun and moon move across the sky) and fills with red every hour. The beam of light is also thinner in the middle of the picture (when the sunlight is most direct) and wider towards the edges. The quote at the bottom cycles every minute and the light through the window represents the time of day. The entire room also gets darker at night. It’s a random Kurt Vonnegut quote about time that I picked, I may think harder about what quote I really want and change it.