Austin Treu – Project 06

atreu-proj-06

/*Austin Treu
	atreu@andrew.cmu.edu
	Section B
	Project-06*/

var hSize = 80, mSize = 40, sSize = 20
    hourX = 0, hourY = 150, 
    minX = 0, minY = 250,
    secX = 0, secY = 350, 
    wProp = 0, hProp = 0, 
    wPropH = 0, hPropH = 0;

//--------------------------
function setup() {
    createCanvas(480, 480);
    wProp = width/60;
    hProp = height/60;
    wPropH = width/12;
    hPropH = height/24;
}

//--------------------------
function draw() {

    /*TEST CODE - grid for measurement
    line(30*wProp, 0, 30*wProp, height);
    line(0, 30*hProp, width, 30*hProp);
    line(15*wProp, 0, 15*wProp, height);
    line(0, 15*hProp, width, 15*hProp);
    line(45*wProp, 0, 45*wProp, height);
    line(0, 45*hProp, width, 45*hProp);*/
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
 

    //draw background, base upon time
    background((S+1)*2.125,int(255-(S+1)*2.125),255-S, (H+S)/4);

    //set current ellipse locs
    hourX = H*hPropH;
    hourY = ((pow(((hourX-width/2)),2)/16)+7*height)/16;
    minX = M*hProp;
    minY = (abs(pow((minX-height/2)/6,2)-height))/4;
    secX = S*hProp;
    secY = -(abs(pow((secX-height/2)/6,2)-height)-4*height)/4;

    //add trail lines every few seconds (pulsating effect)
    if(S%3 === 0){
		stroke(3*S,200-S, 200-S, 10);
	    strokeWeight(5);
	    for(var i = 0; i<width; i++){
	    	//H
	    	var y = -(abs(pow((i-height/2)/6,2)-height)-4*height)/4;
	    	point(i,y);
	    	//M
	    	y = (abs(pow((i-height/2)/6,2)-height))/4;
	    	point(i,y);
	    	//S
	    	y = ((pow(((i-width/2)),2)/16)+7*height)/16;
	    	point(i,y);
	    }
	    noStroke();
	}

    //draw ellipses for time
    fill('yellow');
    ellipse(hourX, hourY, hSize, hSize);
    fill(0,100,255);
    ellipse(minX, minY, mSize, mSize);
    fill(230);
    ellipse(secX, secY, sSize, sSize);
}

This clock assignment took a few different forms in my head, as I wanted to have a vague space/sky theme and also be as minimalist as possible while still getting the point across. I initially thought about utilizing orbital circles, but I ultimately decided that it would be more interesting to mess around with some other types of functions, with the ‘sun’ (hours) having a simple parabola to portray sunrise and sunset. The ‘planet’ (minutes) and ‘moon’ (seconds) actually mirror each other in their patterns, bouncing off of the bottom of the screen at 1/4 and 3/4 of the way through. This keeps things simple whilst allowing an onlooker to easily see quarter minutes and hours as well as days.