svitoora – 06 – Relative Time

sketch

// 
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
// 
// Relative Time
//
// This program is a spin-off from
// p5.js program for a very simple "abstract clock"
// Golan Levin, for 15-104 & 60-212

var w = 400;
var h = 400;

var H;
var M;
var S;
var mappedH;
var mappedM;
var mappedS;
var curSec;

var STATS = [];
var prev_stat;
var cur_stat;


// Statistics as objects:
// Internet
var stat_0 = {
		event: 8,
		mod_sec: 1,
		event_per_sec: null,
		cycle_time: null,
		text: "new people have joined the internet."
	}
	//Rape
var stat_1 = {
	event: 1,
	mod_sec: 90,
	event_per_sec: null,
	cycle_time: null,
	text: "women have been raped in the US."
}

// Tree
var stat_2 = {
		event: 150,
		mod_sec: 60,
		event_per_sec: null,
		cycle_time: null,
		text: "football fields of tree is lost."
	}
	// Cool Math Games
var stat_3 = {
		event: 3350000,
		mod_sec: 30 * 24 * 60 * 60,
		event_per_sec: null,
		cycle_time: null,
		text: "internet searches have been for cool math games."
	}
	// Donut
var stat_4 = {
		event: 10000000000,
		mod_sec: 365 * 24 * 60 * 60,
		event_per_sec: null,
		cycle_time: null,
		text: "doughnuts have been made."
	}
	// Drop Out
var stat_5 = {
	event: 7000,
	mod_sec: 60 * 60,
	event_per_sec: null,
	cycle_time: null,
	text: "highschool students have dropped out."
}

// Death
var stat_6 = {
	event: 6316,
	mod_sec: 60 * 60,
	event_per_sec: null,
	cycle_time: null,
	text: "people have died."
}

// Array of all Statistics
STATS = [stat_0, stat_1, stat_2, stat_3, stat_4, stat_5, stat_6];

// Converts event_per_sec to number of x happening in 1 second
function process_STATS() {
	for (i in STATS) {
		STATS[i].event_per_sec = STATS[i].event / STATS[i].mod_sec
			// Time it takes to complete 1 cycle in milliseconds
		STATS[i].cycle_time = (STATS[i].mod_sec / STATS[i].event) * 1000
	}
}


//--------------------------
function setup() {
	createCanvas(500, 500);
	process_STATS();
	cur_stat = STATS[1];
	prev_stat = cur_stat;
}


// Gives total time in second since midnight.
function total_seconds() {
	curSec = (hour() * 60 ** 2) + (minute() * 60) + second();
}

// Draws the clock based on the input statistic.
function draw_clock(stat) {
	noStroke();
	// Fetch the current time
	var S = second();
	var M = millis();
	var delta = .05; // for easing

	// Compute Clock hand with easing
	if (abs(prev_stat.cycle_time - cur_stat.cycle_time) > 40) {
        // if statement above helps removes jitter from easing
		var DELTA = abs(prev_stat.cycle_time - cur_stat.cycle_time);
		if (prev_stat.cycle_time <= cur_stat.cycle_time) {
			prev_stat.cycle_time += DELTA * delta
		} else {
			prev_stat.cycle_time -= DELTA * delta
		}
		mappedS = map(M, 0, prev_stat.cycle_time, 0, 1);
	} else {
		mappedS = map(M, 0, cur_stat.cycle_time, 0, 1);
	}

	// My clock
	angleMode(DEGREES);
	ellipse(w / 2, h / 2, w / 2, w / 2);
	// Draw second hands
	stroke(0);
	strokeWeight(1);
	line(w / 2, h / 2,
		(w / 2) + cos((mappedS * 360) - 90) * (w / 4) * .95,
		(w / 2) + sin((mappedS * 360) - 90) * (w / 4) * .95);

	// Create Text
	fill(255, 255, 255, 255 * .75);
	noStroke();
	textAlign(CENTER);
	textSize(11.25);
    text("Since midnight, " + nfc(floor(stat.event_per_sec * curSec)) +
		" " + stat.text,
		w / 2, h * .85)
    text("Please click for different statistic.",
        w / 2, h * .9)
}

// Randomly select a statistic that isn't the current one.
function mousePressed() {
	prev_stat = cur_stat;
	do {
		cur_stat = random(STATS)
	}
	while (cur_stat == prev_stat);
	process_STATS();
}


//--------------------------

function draw() {
	background(200, 200, 200);
	noStroke();
	draw_clock(cur_stat);
	total_seconds();
}

Relative Time

Statistics of absurd scales are often hard to wrap your mind around. As a designer, I’m interested in ways to help people understand information in the most intuitive way possible so that they can make the best decision. This Relative Time clock is an abstract clock that re-maps itself to a randomly selected statistic that I found on the internet. Some statistics are plain depressing, and some are just for laughs. I hope that this temporal data visualization can all help us better understand our world.

dayoungl Project 06

sketch

//Sharon Lee
//dayoungl@andrew.cmu.edu
//Section E
//Project-06
var d = 15;
var r = 0;
var g = 0;
var b = 0;
function setup() {
    createCanvas(450,450);
}

function draw(){
    background(255);
    fill(0, 10);
    stroke(0, 160);
    var H = hour();
    var M = minute();
    var S = second();
    // rectangle rotates by seconds
    translate(width/2, height/2);
    for (i = 0; i < S; i++) {
        push();
        rotate(i / 6.0);
        scale(i / 10.0);
        stroke(r,g,b);
        r = i * 10;
        b = i * 4;
        rect(0, -50, 10, 50);
        // print(S);
        pop();
    }
    //displays time
    var lo = height/2;
    textSize(20);
    textAlign(CENTER);
    fill(0);
    noStroke();
    text(H + " : ", 40, lo);
    text(M + " : ", 80, lo);
    text(S, 120, lo);

    // for (i = 0; i < H; i ++){
    //     r = 240;
    //     g = 240;
    //     b = 240;
    //     background(r,g,b);


}

    // var mappedH = map(H, 0,23, 0, width);
    // var mappedM = map(M, 0,59, 0, width);
    // var mappedS = map(S, 0,59, 0, width);

//     for (j = 0; j < 6; j ++){
//         for (i = 0; i <= S; i++){
//             stroke(r,g,b);
//             strokeWeight(2);
//             r = i * 5;
//             g = i * 3;
//             // line(10 * i, 100 * j, 10 * i, 150);
//             ellipse(10 * i, 10 * j, 50, 50);
//         }     
//     }
// }
//     for (i = 0; i <= M; i ++){
//         ellipse(10 * i, 10 * j, 50, 50);


//     }
    //second
//     for (i = 0; i < 6; i ++){
//         for(j = 0; j < 10; j ++){
//             // happy = [60 * j];
//             // sad = [60 * i];
//             push();
//             translate(40,40);
//             noStroke();
//             for (k = 0; k < S; k ++){
//                 fill(255);
//                 ellipse (20 * i, 60, d,d);
//             pop();
//             }
//         }
//     }    
// }       
    

    //Display the ellipses
    //ellipses change colour as time passes
    // for (i = 0; i < 24; i ++){
    //     var mappedH = map(H, 0,23, 0, d);
    //     fill(255);
    //     // r -= hour(-50);

    // }
    // for (i = 0; i < 24; i ++){
    //     var mappedM = map(M, 0.59, 0, d);
    //     fill (255,237,68);
    //     r = 255;
    //     g = 237;
    //     b -= 50;        
    //     ellipse(width/3 + 100, 100, d, d);
    // }
    // for (i = 0; i < 60; i ++){
    //     map (S, 0.59, 0, d); 
    //     fill(r,g,b);
    //     r = H - 5;
    //     g = H - 5;
    //     b = H - 5;
    //     ellipse(width/3 + 250, 100, d, d);
    // }

Project – 06 – ssontag – Binary Clock

I got the idea for this project from my friend who has a binary clock next to his bed, earlier this year he explained to me how to read the clock using binary, but i had no idea how it actually worked. By using my knowledge of how to read the clock i was able to reverse engineer the code to create my own!

Here is my logic behind the Clock!

sketch

function setup() {
    createCanvas(200, 100);
    background(200);
}

function draw() {
//these variables take each digits place of the hour, min, and sec and translate them into
//binary, these variables will give an output of 1 or zero 
    var hr1 = floor(hour() / 10);
    var hr2 = hour() % 10;
    var min1 = floor(minute() / 10);
    var min2 = minute() % 10;
    var sec1 = floor(second() / 10);
    var sec2 = second() % 10;

//this creates an array of these points so i can use a for loops to iterate over each variable
    var timeArray = [hr1, hr2, min1, min2, sec1, sec2]
    var nTimeArray = timeArray.length;

//this for loop will iterate over each variable to give the binary values of each circle in
//each column, then using if statements to set the fill to green only if the binary value is 1
    for(var i = 0; i < nTimeArray; i++) {
        var x = timeArray[i];

        var a = floor(x / 8);
        var b = floor((x - 8 * a) / 4);
        var c = floor((x - 8 * a - 4 * b) / 2);
        var d = x % 2;

        
        

        if(a == 1) {
            fill(0, 255, 0);

        } else {
            fill(250);
        }

        ellipse(25 + 30 * i, 20, 10, 10);

        if(b == 1) {
            fill(0, 255, 0);

        } else {
            fill(250);
        }
        ellipse(25 + 30 * i, 40, 10, 10);

        if(c == 1) {
            fill(0, 255, 0);

        } else {
            fill(250);
        }
        ellipse(25 + 30 * i, 60, 10, 10);

        if(d == 1) {
            fill(0, 255, 0);

        } else {
            fill(250);
        }
        ellipse(25 + 30 * i, 80, 10, 10);

    }

}

jwchou-project06-abstractClock

sketch 66

//Jackie Chou
//Section E
//jwchou@andrew.cmu.edu
//Project 06 Abstract Clock

var prevSec;
var millisRolloverTime;

//--------------------------
function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;   
}
//--------------------------
function draw() {
	noStroke;
	fill(255, 60, 60); //red background
	rect(35,0, width-70, height); 
	fill(255);
	rect(0,0, 35, height); //left white margin
	rect(width-35, 0, 35, height); //right white margin
	rect(0,0, width, 15); //top white margin
	rect(0,height-15, width, 15); //bottom white margin
	var fillLevel = 255/24; //rectangle opacity

 
  	for(i=0; i < 23; i++) { //create 24 evenly columns spanning canvas
   	  noStroke;
   	  filllevel = fillLevel * i;
   	  fill(255, 255, 255, fillLevel);
   	  rect(35,0,((width-70)/24)*i, height); //keeps margins in consideration
    }
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Reckon the current millisecond, 
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    
    fill(128,100,100);
    text("Hour: "   + H, 10, 22);
    text("Minute: " + M, 10, 42);
    text("Second: " + S, 10, 62);
    text("Millis: " + mils, 10, 82);
    
    var hourBarWidth   = map(H, 0, 23, 45, height-45);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);
    
    // Make a bar which *smoothly* interpolates across 1 minute.
    // We calculate a version that goes from 0...60, 
    // but with a fractional remainder:
    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);
    var yPos = secondBarWidth-53  //vertical second position 
    var xPos = hourBarWidth-39.5 //horizontal hour position

    //plane
    noStroke();
    fill(190);
    ellipse(xPos + 40, yPos + 40, 70, 11); //wings
    ellipse(xPos + 40, yPos + 20, 35, 8); //horz stabilizer
    fill(108, 190, 225);
    ellipse(xPos + 40, yPos + 40, 17, 45); //fuselage
    ellipse(xPos + 57, yPos + 45, 6, 15); //left engine
    ellipse(xPos + 23, yPos + 45, 6, 15); //right engine
    fill(0);
    ellipse(xPos + 23, yPos + 50, 10, 2); //right propeler
    ellipse(xPos + 57, yPos + 50, 10, 2); //left propeller
    fill(190);
    ellipse(xPos + 40, yPos + 15, 5, 17); //tail
    fill(0);
    beginShape(); //cockpit
    vertex(xPos + 35, yPos + 50);
    vertex(xPos + 40, yPos + 57);
    vertex(xPos + 45, yPos + 50);
    vertex(xPos + 45, yPos + 45);
    vertex(xPos + 40, yPos + 50);
    vertex(xPos + 35, yPos + 45);
    vertex(xPos + 35,yPos +  50);
    endShape();

	for(c=0; c < M; c++) { //create dots trailing the plane to tell minutes
	  fill(255);
	  ellipse(hourBarWidth, yPos - 6.5*c, 3, 3) //dots using yPos of plane +hour position
	}    
}

For this project, I wanted to continue the theme of planes that I started last week.

I was wondering how I would depict time using the plane. This sketch represents my initial idea:

I wanted the plane to move vertically, 1/24 of its way through the canvas per hour, with a trail of dots behind it to signify the minutes. However, I quickly realized, after coding it, that the minute dots would go off the canvas for an entire hour at a time if the time was in the morning.

So I revised my idea, so that the plane would move horizontally one unit per hour. The dots would still signify the minutes. To signify seconds, the plane would move vertically by a 1/60 of the height every second. In this second configuration, the dots behind the plane are visible at least for a few moments per minute.

agusman-Project06-AbstractClock

sketch

//Anna Gusman
//agusman@andrew.cmu.edu
//Section E
//
//Project 06 Abstract Clock

var prevSec;
var millisRolloverTime;
var circleorigin = 0;

var milsecangle = 0;
var secondsangle = 0;
var minutesangle = 0;
var hoursangle = 0;

var degreespmsec;
var degreespsec;
var degreespmin;
var degreesphour;


//--------------------------
function setup() {
    createCanvas(300, 300);
    background(255);
    millisRolloverTime = 0;
    angleMode(DEGREES);
}

//--------------------------
function draw() {
    background(255, 10);

    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();

    // Reckon the current millisecond,
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    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);

    // Make a bar which *smoothly* interpolates across 1 minute.
    // We calculate a version that goes from 0...60,
    // but with a fractional remainder:
    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);

    noFill();
    // ellipse(150, 150, 135, 135);
    // stroke(0, 10);
    // ellipse(150, 150, hourBarWidth, hourBarWidth);
    // stroke(0);
    // ellipse(150, 150, secondBarWidthChunky, secondBarWidthChunky);
    // stroke(0);
    // ellipse(150, 150, secondBarWidthSmooth, secondBarWidthSmooth);
    // stroke(0);
    // ellipse(150, 150, minuteBarWidth, minuteBarWidth);

    degreespmsec = map(S + (mils / 1000.0), 0, 59, 0, 360);
    push();
    translate(150, 150);
    rotate(milsecangle);
    stroke(255, 0, 0);
    ellipse(30, 30, 50, 50);
    pop();
    milsecangle = degreespmsec;

    degreespsec = map(S, 0, 59, 0, 360);
    push();
    translate(150, 150);
    rotate(secondsangle);
    stroke(255, 0, 0);
    ellipse(30, 30, 50, 50);
    ellipse(38, 38, 75, 75);
    pop();
    secondsangle = degreespsec;

    degreespmin = map(M, 0, 59, 0, 360);
    push();
    translate(150, 150);
    rotate(minutesangle);
    stroke(0, 0, 255);
    ellipse(95, 95, 30, 30);
    pop();
    minutesangle = degreespmin;

    degreesphour = map(H, 0, 11, 0, 360);
    push();
    translate(150, 150);
    rotate(hoursangle);
    stroke(0, 255, 0);
    ellipse(20, 20, 250, 250);
    pop();
    hoursangle = degreesphour;

    // 30 * 12 = 360, different center for every hour, hoursangle
    // then write mincircle function relative to that
    //variable  = 20, 0, + 30 degrees 
}

//get center of outside circle
//

I think I am on the cusp of honing in on a very interesting interaction, but the final execution in the period of time we were allotted isn’t very satisfactory to me. I was inspired to create a clock based on an optical illusion of circular infinity- after coming across this captivating image, I entertained myself with trying to map out the logic behind it:

In my logic, I detail how the circles would be drawn from the outside in, and then rotating the circle matrix by the corresponding time (e.g. mapping 12 (hours) or 60 (seconds) to 360 (degrees)). I would then translate the matrix by the difference between the radius of the parent circle and the child circle. For some reason I’m unsure of, the content uploads folder won’t accept my jpegs or pngs of my sketch work, so I’ll try to amend that as soon as possible.

mstropka-Looking Outwards-06-E

Artist Jason Salavon made these digital works of art that appear to depict blurred out women. The women depicted are actually an amalgamation of all of the Playboy centerfolds from each decade. He creates these images by inputting all of the data from the centerfolds into an algorithm that averages all of the images. You could look at the data from the centerfolds as random information. His algorithm organizes this “random” data to create the image. It is particularly interesting to see these works next to each other because, despite the blurriness of the image, you can see a pattern of how the centerfold girls have become whiter and thinner over the years. This creative method of data visualization makes a statement about how people’s concept of attractiveness and beauty have changed over the last couple decades.

monicah1-project-06

sketch

var prevSec;
var millisRolloverTime;

function setup() {
	createCanvas(400, 400);
	ellipseMode(CENTER);
	fill(255);
	noStroke();
}

function draw(){
	background(0);

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

    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    var rotate1 = TWO_PI * noise(0.005*frameCount + 5);		
	var rotate2 = TWO_PI * noise(0.005*frameCount + 10);
	var rotate3 = TWO_PI * noise(0.005*frameCount + 15);
	var rx = 60 * noise(0.005*frameCount + 10);
	var tx = 200 * noise(0.005*frameCount + 20);
	var volume1 = 200 * noise(0.005*frameCount + 30);
	var volume2 = 50 * noise(0.005*frameCount + 30);

	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);

	translate(width/2, height/2);
	for (var i = 0; i < 10; i++) {
		push();
		rotate(rotate1 + TWO_PI * i / 3);
		translate(tx, 0);
		fill(0,255,60);
		ellipse(0, 0, volume1, volume2);
		for (var j = 0; j < 9; j++) {
			push();
			rotate(rotate2 + TWO_PI * j / 1);
			translate(rx, 0);
			rotate(rotate3);
			fill(250,250,0);
			ellipse(rx, 0, volume2, volume2);
			pop();
		}		
		translate()
		pop();
	}
}

I made a clock based on elements of rotation and noise.

myoungsh-project-06-abstract-clock

sketch

//Mason Young-Shor 
//Section C 
//myoungsh@andrew.cmu.edu 
//Abstract Clock
function setup() {
  createCanvas(600, 600);
  background(0);
}
function draw() {
  background(0);
  angleMode(DEGREES);
  var h = hour();
  var m = minute();
  var s = second();
  if (h > 12) { //12 hour clock
    h -= 12;
  }
  for (var H = 1; H < h + 1; H ++) { //hour indicatior
    var x = 0;
    var y = 0;
    push();
    translate(300, 300);
    rotate(180);
    rotate(30 * H);
    if (H % 3 === 0) { //every three hours is big and white
      stroke(256);
      fill(256);
      x += 15;
      y += 5;
    } else { //the rest are small and yellow
      stroke(256, 256, 0);
      fill(256, 256, 0);
    }
    line(0, 0, 0, 110 + x);
    ellipse(0, 110 + x, 10 + y, 10 + y);
    pop();
  }
  for (var M = 1; M <= m; M ++) { //minute indicator
    x = 0;
    y = 0;
    push();
    translate(300, 300);
    rotate(180);
    rotate(6 * M);
    if (M % 5 === 0) { //every five minutes is big and white
      stroke(256);
      fill(256);
      x += 15;
      y += 5;
    } else { //the rest are smal and yellow
      stroke(256, 256, 0);
      fill(256, 256, 0);
    }
    line(0, 0, 0, 170 + x);
    ellipse(0, 170 + x, 10 + y, 10 + y);
    pop();
  }
  for (var S = 1; S <= s; S ++) { //second indicator
    x = 0;
    y = 0;
    push();
    translate(300, 300);
    rotate(180);
    rotate(6 * S);
    if (S % 5 === 0) { //every five seconds is big and white
      stroke(256);
      fill(256);
      x += 15;
      y += 5;
    } else { //the rest are small and yellow
      stroke(256, 256, 0);
      fill(256, 256, 0);
    }
    line(0, 0, 0, 230 + x);
    ellipse(0, 230 + x, 10 + y, 10 + y);
    pop();
  }
}

monicah1-lookingoutward-06

Nothing There by Brendan Dawes, 2004

Nothing There is a computational work made from the soundtrack within the movie, The Man Who Wasn’t There. In the piece, each element is dictate by the amount of sound present during that movie frame. The piece is a representation of silences and pauses within the film.

I is interested in the seemingly not organized, randomness, of this piece, is actually generated from a specific movie and specific timing within the movie. It is powerful to concise a movie silences and pauses frames visually in one piece. The black and white color choice add into to topic of silence. Looking at each element closely and standing back and look them as one piece of work, I do feel the pauses and silences that the Dawes want to represent. It is interest to see the precise informations generating the sense of randomness in the piece.

hdw – Project 6 – Abstract Clock

sketch

//Helen Wu
//hdw@andrew.cmu.edu
//Project 6
//Section A

function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
}

function draw() {

  var rSpring = 180
  var gSpring = 299
  var bSpring = 123

  var rSummer = 255
  var gSummer = 224
  var bSummer = 114

  var rFall = 255
  var gFall = 191
  var bFall = 135

  var rWinter = 255
  var gWinter = 107
  var bWinter = 107

  var season = month()

  //set colors of tree outline to month

  if (season == 3 || 4 || 5){
    var r = rSpring;
    var g = gSpring;
    var b = bSpring;
  }

  if (season == 6 || 7 || 8){
    var r = rSummer;
    var g = gSummer;
    var b = bSummer;
  }

  if (season == 9 || 10 || 11){
    var r = rFall;
    var g = gFall;
    var b = bFall;
  }

  if (season == 12 || 1 || 2){
    var r = rWinter;
    var g = gWinter;
    var b = bWinter;
  }

  //background changes with respect to hour.
  //from = color(206, 242, 255), to = color(255, 198, 220)
  var proportion = hour()/60;
  background(206+49*proportion,242-44*proportion,255-35*proportion);

  //draw trees
  tree1(-35,115,200,r,g,b)
  tree3(115,115,200,r,g,b)
  tree2(-185,115,200,r,g,b)
  tree2(265,115,200,r,g,b)

  tree1(width-190,height-200,100,r,g,b);
  tree2(width-340,height-200,100,r,g,b);
  tree3(width-490,height-200,100,r,g,b);

}

//set strokeWeight 's'
var s = 3

//falling leaf pattern 1
function tree1(x,y,a,r,g,b) {
  push();
  translate(x,y);

  //tree outline is mapped with respect to minutes.
  strokeWeight(s);
  var minutes = minute();
  if ((minutes+3)%3==1){
    noFill();
    stroke(r, g, b);
    //stroke(180,229,123)
  }  else {
  noFill();
  stroke(255,255,255);
  }
  ellipse(a,a-a*50/240, a*300/240, a*350/240);

  //tree branches.
  stroke(255, 255, 255);
  strokeWeight(s)

  line(a, a/3, a, a*400/240);
  line(a, a*187/240, a+a/3, a*100/240);
  line(a, a*294/240, a-a/3, a*200/240);


  //falling leaves are drawn; color and position changes with seconds.
  noStroke();
  var seconds = second();
  var r = a/5-a/24

  //right side leaves
  if ((seconds+4)%4==0){
    fill(180, 229, 123);
    arc(a+a/3, a*10/24, r, r, 240, 20);
  }

  if ((seconds+4)%4==1){
    fill(255, 224, 114);
    arc(a+a/3+a/24, a*200/240, r, r, 340, 120);
  }

  if ((seconds+4)%4==2){
    fill(255, 191, 135);
    arc(a+a/3-a/8, 5*a/4, r, r, 60, 200);
  }

  if ((seconds+4)%4==3){
    fill(255, 107, 107);
    arc(a+a/3, a*400/240, r, r, 340, 120);
  }


  //left side leaves
  if ((seconds+3)%3==0){
    fill(180, 229, 123);
    arc(a-a/3, a*200/240, r, r, 160, 300);
  }

  if ((seconds+3)%3==1){
    fill(255, 191, 135);
    arc(a-a/3+a/8, a*300/240, r, r, 340, 120);
  }

  if ((seconds+3)%3==2){
    fill(255, 107, 107);
    arc(a-a/3-a/48, a*400/240, r, r, 340, 120);
  }
  pop();
}

//falling leaf pattern 2
function tree2(x,y,a,r,g,b) {
  push();
  translate(x,y);

  //tree outline is colored with respect to minutes.
  strokeWeight(s);
  var minutes = minute();
  if ((minutes+3)%3==2){
    noFill();
    stroke(r, g, b);
    //stroke(180,229,123)
  }  else {
  noFill();
  stroke(255,255,255);
  }
  ellipse(a,a-a*50/240, a*300/240, a*350/240);

  //tree branches.
  stroke(255, 255, 255);
  strokeWeight(s)

  line(a, a/3, a, a*400/240);
  line(a, a*187/240, a+a/3, a*100/240);
  line(a, a*294/240, a-a/3, a*200/240);

  //falling leaves are drawn; color and position changes with seconds.
  noStroke();
  var seconds = second();
  var r = a/5-a/24

  //right side leaves
  if ((seconds+4)%4==1){
    fill(180, 229, 123);
    arc(a+a/3, a*10/24, r, r, 240, 20);
  }

  if ((seconds+4)%4==2){
    fill(255, 224, 114);
    arc(a+a/3+a/24, a*200/240, r, r, 340, 120);
  }

  if ((seconds+4)%4==3){
    fill(255, 191, 135);
    arc(a+a/3-a/8, 5*a/4, r, r, 60, 200);
  }

  if ((seconds+4)%4==0){
    fill(255, 107, 107);
    arc(a+a/3, a*400/240, r, r, 340, 120);
  }


  //left side leaves
  if ((seconds+3)%3==1){
    fill(180, 229, 123);
    arc(a-a/3, a*200/240, r, r, 160, 300);
  }

  if ((seconds+3)%3==2){
    fill(255, 191, 135);
    arc(a-a/3+a/8, a*300/240, r, r, 340, 120);
  }

  if ((seconds+3)%3==0){
    fill(255, 107, 107);
    arc(a-a/3-a/48, a*400/240, r, r, 340, 120);
  }
  pop();

}

//falling leaf pattern 3
function tree3(x,y,a,r,g,b) {
  push();
  translate(x,y);

  //tree outline is mapped with respect to minutes.
  strokeWeight(s);
  var minutes = minute();
  if ((minutes+3)%3==0){
    noFill();
    stroke(r, g, b);
    //stroke(180,229,123)
  }  else {
  noFill();
  stroke(255,255,255);
  }
  ellipse(a,a-a*50/240, a*300/240, a*350/240);

  //tree branches.
  stroke(255, 255, 255);
  strokeWeight(s)

  line(a, a/3, a, a*400/240);
  line(a, a*187/240, a+a/3, a*100/240);
  line(a, a*294/240, a-a/3, a*200/240);


  //falling leaves are drawn; color and position changes with seconds.
  noStroke();
  var seconds = second();
  var r = a/5-a/24

  //right side leaves
  if ((seconds+4)%4==2){
    fill(180, 229, 123);
    arc(a+a/3, a*10/24, r, r, 240, 20);
  }

  if ((seconds+4)%4==3){
    fill(255, 224, 114);
    arc(a+a/3+a/24, a*200/240, r, r, 340, 120);
  }

  if ((seconds+4)%4==0){
    fill(255, 191, 135);
    arc(a+a/3-a/8, 5*a/4, r, r, 60, 200);
  }

  if ((seconds+4)%4==1){
    fill(255, 107, 107);
    arc(a+a/3, a*400/240, r, r, 340, 120);
  }


  //left side leaves
  if ((seconds+3)%3==2){
    fill(180, 229, 123);
    arc(a-a/3, a*200/240, r, r, 160, 300);
  }

  if ((seconds+3)%3==0){
    fill(255, 191, 135);
    arc(a-a/3+a/8, a*300/240, r, r, 340, 120);
  }

  if ((seconds+3)%3==1){
    fill(255, 107, 107);
    arc(a-a/3-a/48, a*400/240, r, r, 340, 120);
  }
  pop();

}

I chose to represent time with a forest. The leaves fall to seconds, the background color is mapped to hours of the day, and the tree outline rotates by minutes. The color of the trees correlate with seasons. At first I struggled with how to make this piece dynamic because my movement was very simple, so I created a recursion and repeated different tree patterns.