Project-06-Abstract-Clock-akluk

sketch

//akluk

var com = true;
//--------------------------
function setup() {
    createCanvas(360, 360);
    background(0);
}

//--------------------------
function draw() {
    noStroke();
    //Generates space background
    if (com){
    	background(0);
    	for (var j = 0; j < 300; j++){
    		var x = random(0,360);
    		var y = random(0,360);
    		fill(255);
    		ellipse(x,y,2,2);
    	}
    	com = false;
    }

    //Clear path
    fill(0);
   	rect(0,height-50,width,50);

    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    var mappedS = map(S, 0,59, 0,360);

    //initializes light spacing and length at equator
    var div = 216/24;
    var seg = div - 4;

    var cut_start = width/2-109;
    var cut_end = width/2+109;
    fill(120);
    //The actual Deathstar
    ellipse(width/2,height/2, 220,220);
    fill(80);

    //Disc
    ellipse(width/2-40,height/2-35,55,55);
    fill(60);

    //Cannon
    ellipse(width/2-43,height/2-38,15,15);
    fill(0);
    ellipse(width/2-43,height/2-38,4,4);
    noFill();
    strokeWeight(2);
    stroke(color(60,255,28));
    //Charge Ring 1
    arc(width/2-40,height/2-35,53,53,0,radians(mappedS));
    
    if (S == 59){
    	line(width/2-43,height/2-38, width/2-40,height/2-61.5);
    	line(width/2-43,height/2-38, width/2-13.5,height/2-35);
    	line(width/2-43,height/2-38, width/2-66.5,height/2-35);
    	line(width/2-43,height/2-38, width/2-40,height/2-8.5);
    	strokeWeight(5);
    	line(width/2-43,height/2-38,0,0);
    	com = true;
    }

    //Star Destroyer
    var length = 85;
    var moved = M*(width + 85)/60;
    stroke(180);
    strokeWeight(1);
    fill(180);
    triangle(width-moved,height-17, width+70-moved,height-5,width+70-moved,height-29);
    triangle(width+70-moved,height-5,width+70-moved,height-29,width+85-moved,height-17);
    rect(width+45-moved,height-30,30,10);
    rect(width+55-moved,height-35,15,10);
    rect(width+60-moved,height-45,5,10);
    rect(width+55-moved,height-42,15,3);
    stroke(90);
    strokeWeight(1);
    line(width+5-moved,height-17,width+80-moved,height-17);

    //Ring2 
    noFill()
    stroke(40);
    strokeWeight(2);
	arc(width/2-43,height/2-38,22,22,0,radians(360));
	stroke(color(30,140,40));
    //Equator Line
    stroke(80);
    strokeWeight(3);
    line(width/2-109,height/2,width/2+109,height/2);

    //Equator Lights
    for (var i = 0; i < H; i++){
    	stroke(255);
    	strokeWeight(1);
    	line(cut_start+1+i*div, height/2, cut_start+1+i*div+seg,height/2);
    }
    // Compute the widths of the rectangles

    //Texture on the Deathstar
    var box_s = width/2 - 85;
    noStroke();
    fill(105);
    for (var i = 0; i < 3; i++){
    	rect(box_s + 20*i,height/2+10,10, 40)
	}    
	rect(box_s + 60, height/2+10, 70, 20);
	for (var i = 0; i < 2; i++){
    	rect(box_s + 135 + 20*i,height/2+10,15, 60-i*10)
	}    
	rect(box_s + 60, height/2+35,20,65);
	rect(box_s + 87.5, height/2+35, 42.5,42.5);
	rect(box_s + 87.5, height/2+82.5,42.5, 10);
	arc(box_s + 50, height/2+60, 85,65, radians(90),radians(180));
	arc(box_s + 85, height/2-10,180,180,radians(270),radians(360));
	fill(120);
	rect(box_s + 100, height/2-100,10,90);
	rect(box_s + 125, height/2-90,10,80);
	rect(box_s + 150, height/2-70,10,60);
    

}

I am a huge star wars fan and this was a fun project for me. I started off of thing about rings and how that can represent time, which then lead me to the death star on how the cannon needs to charge to fire. Below are some sketches that described what I had in mind before implementing it in p5.js. The seconds are represented by the green charging ring of the cannon of the Death Star. At the end of every min, the canon will fire. The lights at the equator of the Death Star represent each hour of the day. For example, 7AM will have 7 lights lit up. Finally the Star destroyer at the bottom moves across the screen every hour.

yunzhous-project-06

sketch

var eW = 30; //top of shishi odoshi
var eH = 15; //top of shishi odoshi
var yShift = 50; //mition of shishi odoshi
var SbeadD = 5;
var MbeadD = 8;
var HbeadD = 15;
var Mx = 110; //x position of minute moving bead
var Hx = 110;//x position of hour moving bead
var Sy = 5;////y position of second moving bead
var My = 100; ////y position of minute moving bead
var Hy = 260;////y position of hour moving bead


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

function draw() {
    var s = second();
    var m = minute();
    var h = hour();
    var mil = millis();

    //backgound color change from day to night
    if (h > 5 & h < 18){
        background(251, 237, 160);//yellow
    } else{
        background(70, 134, 186);//blue
    }

    //shishi odoshi pivot - second
    if (s % 2 != 0){
        shishiUP();
        plate();
        Sbead();
    } else{
        shishiDown();
        plate();
        Sbead();
    }

    //shishi odoshi pivot - minute
    if (s > 58){
        push();
        translate(0, 160);
        shishiDown();
        plate();
        Mbead();
        pop();
    } else{
        push();
        translate(0, 160);
        shishiUP();
        plate();
        Mbead();
        pop();
    }

    //shishi odoshi pivot - hour
    if (m > 58 & s > 58){
        push();
        translate(0, 320);
        shishiDown();
        plate();
        Hbead();
        pop();
    } else{
        push();
        translate(0, 320);
        shishiUP();
        plate();
        Hbead();
        pop();
    }

    //moving bead for second
    if (s % 2 != 0){
        Sy += 1;
        fill(199, 240, 245);
        ellipse(65, Sy, SbeadD, SbeadD);
    } else{
        //limit bead position
        Sy = 5;
    }
    
    //moving bead for minute
    if (s > 57 & s < 59){
        Mx -= 1.3;
        My += 3.2;
        fill(199, 240, 245);
        ellipse(Mx, My, MbeadD, MbeadD);
        //limit the bead position
        } else{
            Mx = 110;
            My = 100;
        }

    //moving bead for hour
    if (m > 58 & s > 57 && s < 59){
        Hx -= 1.3;
        Hy += 3.2;
        fill(199, 240, 245);
        ellipse(Hx, Hy, HbeadD, HbeadD);
        //limit the bead position
    } else {
        Hx = 110;
        Hy = 260;
    }

}

function shishiUP(){
    //shishi odoshi
    fill("green");
    rect(55, 45, 5, 35);//support
    quad(50, 30, 80, 30, 30, 80, 0, 80);
    arc(15, 79, eW, eH, 0, 180);
        //top
    ellipse(65, 30, eW, eH);
    fill(0);
    ellipse(65, 30, eW - 7, eH - 7);
            //support
    fill("green");
    rectMode(CORNER);
    quad(42, 55, 52, 45, 52, 50, 47, 55);
    rect(40, 50, 5, 35);
}

function shishiDown(){
    fill("green");
    rect(55, 45, 5, 35);//support
    quad(65, 30 + yShift, 95, 30 + yShift, 45, 80 - yShift, 15, 80 - yShift);
    arc(30, 81 - yShift, eW, eH, 180, 0);
    arc(80, 79, eW, eH, 0, 180);     //top
            //support
    fill("green");
    rectMode(CORNER);
    quad(42, 55, 52, 45, 52, 50, 47, 55);
    rect(40, 50, 5, 35);
}

function plate(){
    fill(255);
    //base
    ellipse(150, 110, 40, 20);
    //top
    ellipse(150, 100, 90, 30);
}

function Sbead(){ //beads accumulating according to seconds
    var s = second();
    var x = [110,115,120,125,130,135,140,145,150,155,160,165,170,175,180,185,
        115,120,125,130,135,140,145,150,155,160,165,170,175,180,
        120,125,130,135,140,145,150,155,160,165,170,175,
        125,130,135,140,145,150,155,160,165,170,
        130,135,140,145,150,155,160,165];
    var y = [100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,
        96,96,96,96,96,96,96,96,96,96,96,96,96,96,
        92,92,92,92,92,92,92,92,92,92,92,92,
        88,88,88,88,88,88,88,88,88,88,
        84,84,84,84,84,84,84,84,];
    for (i = 0; i < s; i ++){
        frameRate(20);
        fill(199, 240, 245);
        ellipse(x[i], y[i], SbeadD, SbeadD);
    }

}

function Mbead(){//beads accumulating according to minutes
    var m = minute();
    var x = [110,115,120,125,130,135,140,145,150,155,160,165,170,175,180,185,
        115,120,125,130,135,140,145,150,155,160,165,170,175,180,
        120,125,130,135,140,145,150,155,160,165,170,175,
        125,130,135,140,145,150,155,160,165,170,
        130,135,140,145,150,155,160,165];
    var y = [100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,100,
        96,96,96,96,96,96,96,96,96,96,96,96,96,96,
        92,92,92,92,92,92,92,92,92,92,92,92,
        88,88,88,88,88,88,88,88,88,88,
        84,84,84,84,84,84,84,84,];
    for (i = 0; i < m; i ++){
        frameRate(20);
        fill(199, 240, 245);
        ellipse(x[i], y[i], MbeadD, MbeadD);
    }

}

function Hbead(){//beads accumulating according to hours
    var h = hour();
    if (h > 12){
        h -= 12;  //12-hour clock
    }
    var x = [110,125,140,155,170,185,
            125,140,155,170,
            140,155,];
    var y = [100,100,100,100,100,100,
            88,88,88,88,
            76,76];
    for (i = 0; i < h; i ++){
        frameRate(20);
        fill(199, 240, 245);
        ellipse(x[i], y[i], HbeadD, HbeadD);
    }
}

I got the idea from shishi odoshi, a Japanese devices that’s made to frighten away animals. The weight of running water makes the bamboo pivot. I feel like water could be a metaphor for time, so I made three shishi odoshis, each representing second, minute, and hour, respectively. Beads that represent water, fall into the shishi odoshis, and the weight of the beads make the bamboo pivot and fall down to a plate nearby. The beads are passed down like time flows. The number of beads in the plate indicate the second/minute/hour. The background color indicate day/night.

I had problem making the bamboo to pivot according to time at first. Then I break the motion down to two parts: one with the bamboo up, one with bamboo down, and wrote conditions according to time to control motion. I also had trouble matching the motion of the bamboo with that of the moving beads. After hours of test/adjustments they finally match.

Project-06-Abstract-Clock-sjahania

sketch

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

function draw() {
    background(255, 239, 213);
    noStroke();
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();

    //Glass streaks
    stroke(0);
    line(100, 150, 115, 135);
    line(100, 155, 120, 135);
    line(105, 155, 120, 140);

    line(220, 150, 235, 135);
    line(220, 155, 240, 135);
    line(225, 155, 240, 140);

    line(340, 150, 355, 135);
    line(340, 155, 360, 135);
    line(345, 155, 360, 140);
    
    // Compute the widths of the rectangles
    var mappedH = map(H, 0,23, 0, 300);
    var mappedM = map(M, 0,59, 0, 300);
    var mappedS = map(S, 0,59, 0, 300);

    //Display glasses
    noFill();
    stroke(0);
    rect(30, 100, 100, 300);
    rect(150, 100, 100, 300);
    rect(270, 100, 100, 300);
    
    // Display the rectangles. 
    fill(47, 184, 255);
    quad(30, 400 - mappedH, 130, 400 - mappedH, 130, 400, 30, 400);
    fill(47, 132, 255);
    quad(150, 400 - mappedM, 250, 400 - mappedM, 250, 400, 150, 400);
    fill(47, 46, 255);
    quad(270, 400 - mappedS, 370, 400 - mappedS, 370, 400, 270, 400);

    //Glass bases
    fill(0);
    rect(30, 390, 100, 10);
    rect(150, 390, 100, 10);
    rect(270, 390, 100, 10);

    //Water drops
    fill(47, 184, 255);
    ellipse(80, 50, 50, 50);

    fill(47, 132, 255);
    ellipse(200, 50, 50, 50);

    fill(47, 46, 255);
    ellipse(320, 50, 50, 50);

    // Display numbers to indicate the time
    fill(255);
    textAlign(CENTER);
    textSize(15);
    text(H, 80, 50);
    text(M, 200, 50);
    text(S, 320, 50);
    

    
}

I really like the glass half-empty and glass half-full idea, and how it gets harder to see things as glass half-full as time runs out. So I flipped it, and made it so the glasses fill with water as time goes on. It took me a while to figure out how map() works, but I eventually got it.

jooheek-Project06-AbstractClock

Blender making peach and lemon smoothie

sketch

//JooHee Kim
//jooheek@andrew.cmu.edu
//Section E
//Project06

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

function draw() {
	//variables for each seconds, minutes, and hours
	var S = second();
    var M = minute();
    var H = hour();

	background(245, 245, 220);

	//start of graphics for blender background
	//blender handle
	fill(200, 200, 200);
	noStroke();
	rect(20, height/2, 40, 40);

	//whole blender
	fill(240, 240, 240, 140);
	stroke(200, 200, 200);
	strokeWeight(10);
	rect(width/2, height/2, 400, 400, 100);

	//blender base
	fill(220, 220, 220);
	noStroke();
	rect(width/2, height/2, 150, 150, 50);

	//blender center circle piece
	fill(200, 200, 200);
	stroke(180, 180, 180);
	strokeWeight(5);
	ellipse(width/2, height/2, 50, 50)

	//blender knife star
	beginShape();
	vertex (width/2, height/2 - 30);
	vertex (width/2 + 10, height/2 - 10);
	vertex (width/2 + 30, height/2);
	vertex (width/2 + 10, height/2 + 10);
	vertex (width/2, height/2 + 30);
	vertex (width/2 - 10, height/2 + 10);
	vertex (width/2 - 30, height/2);
	vertex (width/2 - 10, height/2 - 10);
	vertex (width/2, height/2 - 30);
	endShape();

	//measurement marks at side of blender
	noStroke();
	var x = width/2 + 100;
	for (var i = 1; i <= 6; i += 1) {
		rect(x, height/2, 3, 10*i);
		x += 20;
	}
	//center line going through measurement marks
	stroke(200, 200, 200);
	strokeWeight(3);
	line(width/2 + 100, height/2, width/2 + 180, height/2);

	//HOURS
	//changing from 24 hour to 12 hour clock
	var H = hour()%12;
	if (H == 0) {
		H = 12;
	}

	//making pink transparent juice get larger proportionate to the hour
	noStroke();
	fill(255, 180, 160, 125);
	rect(width/2, height/2, 33*H, 33*H, 50 + H);

	//SECONDS
	//rotates 4 peaches in the middle by seconds
	push();
	translate(width/2, height/2);
	rotate(6*S);
		for (peachY = -40; peachY <= 40; peachY += 80) {
			for (peachX = -40; peachX <= 40; peachX += 80) {
				fill(245, 142, 80);
				ellipse(peachX + 10, peachY, 70, 70);

				fill(245, 162, 100);
				ellipse(peachX, peachY, 70, 70);

				fill(64, 183, 75);
				ellipse(peachX + 10, peachY - 35, 10, 5);

				fill(245, 182, 120);
				ellipse(peachX + 15, peachY - 15, 15, 15);
			}
		}
	pop();

	//MINUTES
	//rotates 2 lemons by minutes
	var Mmap = map(M, 0, 60, 0, 360);

	push();
	translate(width/2, height/2);
	rotate(Mmap);
	for (lemonX = -125; lemonX <= 125; lemonX += 250) {
			fill(240, 229, 90);
			ellipse(lemonX + 55, 0, 20, 15);

			fill(240, 229, 90);
			ellipse(lemonX - 55, 0, 20, 15);

			fill(250, 239, 100);
			ellipse(lemonX, 0, 110, 90);

			fill(255, 249, 120);
			ellipse(lemonX + 20, - 20, 30, 20);
	}
	pop();

}

I got inspiration from my previous project and decided that I wanted to do something fruit related again. To show time, I wanted to have things rotate according to the hours, minutes, and seconds. When thinking of fruits and rotation, I thought of fruits in a blender. Therefore, I chose the peach and lemon and made the peach go according to the seconds and the lemon according to the minutes. After thinking about what to do for the hour, I figured out I could make the juice that the peach and lemon make rise according to the hours.

heeseoc-Project-06-AbstractClock

sketch

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-06

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

}

function draw() {
	background(19,43,90);
	noStroke();
	angleMode(DEGREES);
	textAlign(CENTER);

	var hr = hour();
    var mn = minute();
    var sc = second();

    fill(235,226,211);
	text("happy birthday!", width/2, 40);

	//cake//
	var hrAngle = map(hr, 0, 12, 0, 360);
	fill(235,226,211);
	rect(40,height/2+75,320,150);
	fill(255,248,235);
	ellipse(width/2,height/2+75,320,100);

	//making the clock based on 12 hour//
	if (hr == 0) { 
        hr = 12; 
	    } else if (hr > 12 & hr < 24) { 
	        hr -= 12; 
	    } else { 
	        hr = hour(); 
	    }

    var maphr = map(hr, 0, 12, 0, 300);

    //making the candles appaear each hour//
	for (var i = 1; i <= maphr; i += 25) {

		var canw = 5;
	    var canh = 150;

	    var mappedmn = map(mn, 59,0, 0,canh);

				//flickers every other second//
				if(second() % 2 == 0){ 
					fill(random(100,255), random(100,255), random(200,255), 60);
					ellipse(i+62.5, height/2-100+canh-mappedmn, 75, 75);
				} else {
					fill(random(100,255), random(100,255), random(200,255), 20);
					ellipse(i+62.5, height/2-100+canh-mappedmn, 75, 75);
				}

			//candle body//
			fill(154, 188, 255);
			rect(i-canw/2+62.5, height/2+canh/2, canw, -mappedmn);
			ellipse(i+62.5, 275, canw, canw/3);
			fill(126, 162, 233);
			ellipse(i+62.5, 275-mappedmn, canw, canw/3);

			//fire//
			fill(random(100,255), random(100,255), random(200,255));
			ellipse(i+62.5, height/2-95+canh-mappedmn, 15, 30);

			fill(255,250,200);
			ellipse(i+62.5, height/2-90+canh-mappedmn+2.5, 5, 15);

}

}

When I read the term “day-long animation” in the instructions, I immediately thought of birthday, and started to wonder a way to visualize a birthday as a clock. Then, I got an idea of a candle, which I thought was a perfect way to show the passing time because the size actually shrinks, and for this project, since I needed different variables that represent different units of time (such as seconds, minutes, and hours), I thought that I would be able to manipulate the number of the candles and the flickering fire to represent those different variables. The candles flicker every other second, shrink as a minute passes, and adds as an hour passes.

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.

enwandu-Project-06-Abstract Clock

sketch

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section
// Project-06- Abstract Clock

var bgColmin = (0, 255, 255);
var bgColmax = (92, 26, 102);

// X and Y positions of the lights controlled by the minutes
var xarray = [62, 73, 98, 86, 150, 170, 175, 102, 95, 62, 293, 298, 287, 367, 31, 70, 177, 203, 265, 278, 82, 55, 85, 94, 142, 151, 176, 83, 59, 60, 147, 177,
     93, 80, 68, 64, 373, 320, 296, 270, 315, 309, 267, 200, 98, 84, 40, 98, 108, 293, 301, 377, 354, 257, 197, 169, 205, 292, 232, 173];
var yarray = [47, 78, 116, 50, 202, 217, 191, 104, 88, 280, 195, 252, 155, 253, 320,303, 235, 270, 296, 312, 132, 110, 75, 97, 289, 251, 319, 149, 150, 176, 230, 261,
    172, 192, 248, 194, 230, 261, 324, 310, 174, 184, 217, 216, 235, 211, 312, 287, 293, 324, 292, 280, 298, 317,267, 260, 283, 290, 313, 329, 318];

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

function draw() {
var milli = map(millis(), 0, 999, -35, width + 35);
var sec = map(second(), 0, 59, -35, width + 35);
var min = map(minute(), 0, 58, 0, 255);
var hrND = map(hour(), 0, 11, bgColmax, bgColmin);
var hrDN = map(hour(), 12, 23, bgColmin, bgColmax);
// var hrMoon = map(hour(), 0, 11, 250, Sun);
// var hrSun = map(hour(), 12, 23, Sun, 250);


var timeND = {r:min, g:sec, b:hrND};
var timeDN = {r:min, g:sec, b:hrDN};
// var timeSun = {r:min, g:sec, b:hrSun};
// var timeMoon = {r:min, g:sec, b:hrMoon};

var hrNDColor = color(0, 0, timeND.b);
var hrDNColor = color(0, 0, timeDN.b);
// var hrSunColor = color(timeSun.b, timeSun.b, 0);
// var hrMoonColor = color(timeMoon.b, timeMoon.b, 0);

var gray = color(240);

// Maps the sky/background color to the hours of the day
// Simulating dark to light, and light to dark depending on the time of day
for(var c = 0; c <= height; c+=5){
    var amt = map(c, 0, height, 0, 1);
    var background = lerpColor(hrNDColor, gray, amt);
    fill(background);
    rect(0, c, width, 5);
    if(int(hour()) >= 12){
        hrNDColor = hrDNColor;
    }
}
// Draws Sun/Moon
    fill(200, 170, 0);
    ellipse(width, 0, 175, 175);

// Calls blimp function; Blimp movement contolled by seconds
    blimp(sec, height/10);

// Draws Skyline
    fill(0);
    noStroke();
    strokeJoin(MITER);
    beginShape();
    vertex(0, 400); vertex(0, 306); vertex(4, 306);
    vertex(4, 292); vertex(31, 292); vertex(31, 282);
    vertex(50, 282); vertex(50, 30); vertex(60, 30);
    vertex(60, 20); vertex(103, 20); vertex(103, 30);
    vertex(116, 30); vertex(116, 282); vertex(128, 282);
    vertex(128, 304); vertex(132, 304); vertex(132, 268);
    vertex(140, 268); vertex(140, 190); vertex(169, 190);
    vertex(169, 185); vertex(189, 185); vertex(189, 226);
    vertex(202, 226); vertex(206, 185); vertex(208, 226);
    vertex(216, 226); vertex(216, 216); vertex(226, 216);
    vertex(226, 226); vertex(232, 226); vertex(232, 306);
    vertex(244, 306); vertex(244, 199); vertex(252, 199);
    vertex(252, 139); vertex(260, 139); vertex(260, 127);
    vertex(295, 127); vertex(295, 139); vertex(305, 139);
    vertex(305, 170); vertex(330, 170); vertex(330, 306);
    vertex(365, 306); vertex(365, 250); vertex(390, 250);
    vertex(390, 306); vertex(400, 306); vertex(400, 400);
    endShape();

// Draw a new light every minute
    for(var i = 0; i < int(minute()); i++){
        fill(200, 200, 0);
        rect(xarray[i], yarray[i], 7, 7);
    }
}

// Draws Blimp
function blimp(x, y){
    fill(200, 75, 175);
    quad(x - 20, y, x + 15, y, x + 7, y + 23, x -17, y + 23);
    fill(75)
    ellipse(x, y, 70, 35);
    triangle(x - 45, y -15, x - 25, y, x - 45, y + 15);
    fill(200, 75, 175);
    ellipse(x, y, 68, 15);
}

For this project I was aiming for something seemingly realistic. The background/sky color is controlled by the hours, moving from dark to light and vice versa as you move throughout the day. Every minute a light switches on in the building, and a blimp moves across the screen a certain distance every second.

It was somewhat challenging, but I learnt a lot from the experience.

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section
// Project-06- Abstract Clock

var bgColmin = (0, 255, 255);
var bgColmax = (92, 26, 102);

var xarray = [55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70,
    100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305];
var yarray = [306, 306, 306, 285, 285, 285, 285, 285, 270, 270, 285, 285, 285, 270, 265, 275, 250, 250, 250, 270, 190, 190, 190, 200, 200, 215, 235, 235, 180, 180, 50, 50,
    50, 265, 300, 290, 255, 285, 175, 175, 100, 100, 110, 255, 235, 240, 295, 260, 160, 160, 145, 132, 149, 240, 272, 300, 306, 210, 150, 150];

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

function draw() {
var milli = map(millis(), 0, 999, -35, width + 35);
var sec = map(second(), 0, 59, -35, width + 35);
var min = map(minute(), 0, 58, 0, 255);
var hrND = map(hour(), 0, 11, bgColmax, bgColmin);
var hrDN = map(hour(), 12, 23, bgColmin, bgColmax);
// var hrMoon = map(hour(), 0, 11, 250, Sun);
// var hrSun = map(hour(), 12, 23, Sun, 250);


var timeND = {r:min, g:sec, b:hrND};
var timeDN = {r:min, g:sec, b:hrDN};
// var timeSun = {r:min, g:sec, b:hrSun};
// var timeMoon = {r:min, g:sec, b:hrMoon};

var hrNDColor = color(0, 0, timeND.b);
var hrDNColor = color(0, 0, timeDN.b);
// var hrSunColor = color(timeSun.b, timeSun.b, 0);
// var hrMoonColor = color(timeMoon.b, timeMoon.b, 0);

var gray = color(240);

// Maps the sky/background color to the hours of the day
// Simulating dark to light, and light to dark depending on the time of day
for(var c = 0; c <= height; c+=5){
    var amt = map(c, 0, height, 0, 1);
    var background = lerpColor(hrNDColor, gray, amt);
    fill(background);
    rect(0, c, width, 5);
    if(int(hour()) >= 12){
        hrNDColor = hrDNColor;
    }
}
// Draws Sun/Moon
    fill(200, 170, 0);
    ellipse(width, 0, 175, 175);

// Calls blimp function; Blimp movement contolled by seconds
    blimp(sec, height/10);

// Draws Skyline
    fill(0);
    noStroke();
    strokeJoin(MITER);
    beginShape();
    vertex(0, 400); vertex(0, 306); vertex(4, 306);
    vertex(4, 292); vertex(31, 292); vertex(31, 282);
    vertex(50, 282); vertex(50, 30); vertex(60, 30);
    vertex(60, 20); vertex(103, 20); vertex(103, 30);
    vertex(116, 30); vertex(116, 282); vertex(128, 282);
    vertex(128, 304); vertex(132, 304); vertex(132, 268);
    vertex(140, 268); vertex(140, 190); vertex(169, 190);
    vertex(169, 185); vertex(189, 185); vertex(189, 226);
    vertex(202, 226); vertex(206, 185); vertex(208, 226);
    vertex(216, 226); vertex(216, 216); vertex(226, 216);
    vertex(226, 226); vertex(232, 226); vertex(232, 306);
    vertex(244, 306); vertex(244, 199); vertex(252, 199);
    vertex(252, 139); vertex(260, 139); vertex(260, 127);
    vertex(295, 127); vertex(295, 139); vertex(305, 139);
    vertex(305, 170); vertex(330, 170); vertex(330, 306);
    vertex(365, 306); vertex(365, 250); vertex(390, 250);
    vertex(390, 306); vertex(400, 306); vertex(400, 400);
    endShape();

    for(var i = 0; i < int(minute()); i++){
        fill(200, 200, 0);
        rect(xarray[i], yarray[i], 7, 7);
    }
}

// Draws Blimp
function blimp(x, y){
    fill(200, 75, 175);
    quad(x - 20, y, x + 15, y, x + 7, y + 23, x -17, y + 23);
    fill(75)
    ellipse(x, y, 70, 35);
    triangle(x - 45, y -15, x - 25, y, x - 45, y + 15);
    fill(200, 75, 175);
    ellipse(x, y, 68, 15);
}

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section
// Project-06- Abstract Clock

var bgColmin = (0, 255, 255);
var bgColmax = (92, 26, 102);

var xarray = [55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70,
    100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305];
var yarray = [306, 306, 306, 285, 285, 285, 285, 285, 270, 270, 285, 285, 285, 270, 265, 275, 250, 250, 250, 270, 190, 190, 190, 200, 200, 215, 235, 235, 180, 180, 50, 50,
    50, 265, 300, 290, 255, 285, 175, 175, 100, 100, 110, 255, 235, 240, 295, 260, 160, 160, 145, 132, 149, 240, 272, 300, 306, 210, 150, 150];

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

function draw() {
var milli = map(millis(), 0, 999, -35, width + 35);
var sec = map(second(), 0, 59, -35, width + 35);
var min = map(minute(), 0, 58, 0, 255);
var hrND = map(hour(), 0, 11, bgColmax, bgColmin);
var hrDN = map(hour(), 12, 23, bgColmin, bgColmax);
// var hrMoon = map(hour(), 0, 11, 250, Sun);
// var hrSun = map(hour(), 12, 23, Sun, 250);


var timeND = {r:min, g:sec, b:hrND};
var timeDN = {r:min, g:sec, b:hrDN};
// var timeSun = {r:min, g:sec, b:hrSun};
// var timeMoon = {r:min, g:sec, b:hrMoon};

var hrNDColor = color(0, 0, timeND.b);
var hrDNColor = color(0, 0, timeDN.b);
// var hrSunColor = color(timeSun.b, timeSun.b, 0);
// var hrMoonColor = color(timeMoon.b, timeMoon.b, 0);

var gray = color(240);

// Maps the sky/background color to the hours of the day
// Simulating dark to light, and light to dark depending on the time of day
for(var c = 0; c <= height; c+=5){
    var amt = map(c, 0, height, 0, 1);
    var background = lerpColor(hrNDColor, gray, amt);
    fill(background);
    rect(0, c, width, 5);
    if(int(hour()) >= 12){
        hrNDColor = hrDNColor;
    }
}
// Draws Sun/Moon
    fill(200, 170, 0);
    ellipse(width, 0, 175, 175);

// Calls blimp function; Blimp movement contolled by seconds
    blimp(sec, height/10);

// Draws Skyline
    fill(0);
    noStroke();
    strokeJoin(MITER);
    beginShape();
    vertex(0, 400); vertex(0, 306); vertex(4, 306);
    vertex(4, 292); vertex(31, 292); vertex(31, 282);
    vertex(50, 282); vertex(50, 30); vertex(60, 30);
    vertex(60, 20); vertex(103, 20); vertex(103, 30);
    vertex(116, 30); vertex(116, 282); vertex(128, 282);
    vertex(128, 304); vertex(132, 304); vertex(132, 268);
    vertex(140, 268); vertex(140, 190); vertex(169, 190);
    vertex(169, 185); vertex(189, 185); vertex(189, 226);
    vertex(202, 226); vertex(206, 185); vertex(208, 226);
    vertex(216, 226); vertex(216, 216); vertex(226, 216);
    vertex(226, 226); vertex(232, 226); vertex(232, 306);
    vertex(244, 306); vertex(244, 199); vertex(252, 199);
    vertex(252, 139); vertex(260, 139); vertex(260, 127);
    vertex(295, 127); vertex(295, 139); vertex(305, 139);
    vertex(305, 170); vertex(330, 170); vertex(330, 306);
    vertex(365, 306); vertex(365, 250); vertex(390, 250);
    vertex(390, 306); vertex(400, 306); vertex(400, 400);
    endShape();

    for(var i = 0; i < int(minute()); i++){
        fill(200, 200, 0);
        rect(xarray[i], yarray[i], 7, 7);
    }
}

// Draws Blimp
function blimp(x, y){
    fill(200, 75, 175);
    quad(x - 20, y, x + 15, y, x + 7, y + 23, x -17, y + 23);
    fill(75)
    ellipse(x, y, 70, 35);
    triangle(x - 45, y -15, x - 25, y, x - 45, y + 15);
    fill(200, 75, 175);
    ellipse(x, y, 68, 15);
}

// Emmanuel Nwandu
// enwandu@andrew.cmu.edu
// Section
// Project-06- Abstract Clock

var bgColmin = (0, 255, 255);
var bgColmax = (92, 26, 102);

var xarray = [55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70,
    100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305, 55, 70, 100, 150, 175, 190, 207, 228, 262, 305];
var yarray = [306, 306, 306, 285, 285, 285, 285, 285, 270, 270, 285, 285, 285, 270, 265, 275, 250, 250, 250, 270, 190, 190, 190, 200, 200, 215, 235, 235, 180, 180, 50, 50,
    50, 265, 300, 290, 255, 285, 175, 175, 100, 100, 110, 255, 235, 240, 295, 260, 160, 160, 145, 132, 149, 240, 272, 300, 306, 210, 150, 150];

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

function draw() {
var milli = map(millis(), 0, 999, -35, width + 35);
var sec = map(second(), 0, 59, -35, width + 35);
var min = map(minute(), 0, 58, 0, 255);
var hrND = map(hour(), 0, 11, bgColmax, bgColmin);
var hrDN = map(hour(), 12, 23, bgColmin, bgColmax);
// var hrMoon = map(hour(), 0, 11, 250, Sun);
// var hrSun = map(hour(), 12, 23, Sun, 250);


var timeND = {r:min, g:sec, b:hrND};
var timeDN = {r:min, g:sec, b:hrDN};
// var timeSun = {r:min, g:sec, b:hrSun};
// var timeMoon = {r:min, g:sec, b:hrMoon};

var hrNDColor = color(0, 0, timeND.b);
var hrDNColor = color(0, 0, timeDN.b);
// var hrSunColor = color(timeSun.b, timeSun.b, 0);
// var hrMoonColor = color(timeMoon.b, timeMoon.b, 0);

var gray = color(240);

// Maps the sky/background color to the hours of the day
// Simulating dark to light, and light to dark depending on the time of day
for(var c = 0; c <= height; c+=5){
    var amt = map(c, 0, height, 0, 1);
    var background = lerpColor(hrNDColor, gray, amt);
    fill(background);
    rect(0, c, width, 5);
    if(int(hour()) >= 12){
        hrNDColor = hrDNColor;
    }
}
// Draws Sun/Moon
    fill(200, 170, 0);
    ellipse(width, 0, 175, 175);

// Calls blimp function; Blimp movement contolled by seconds
    blimp(sec, height/10);

// Draws Skyline
    fill(0);
    noStroke();
    strokeJoin(MITER);
    beginShape();
    vertex(0, 400); vertex(0, 306); vertex(4, 306);
    vertex(4, 292); vertex(31, 292); vertex(31, 282);
    vertex(50, 282); vertex(50, 30); vertex(60, 30);
    vertex(60, 20); vertex(103, 20); vertex(103, 30);
    vertex(116, 30); vertex(116, 282); vertex(128, 282);
    vertex(128, 304); vertex(132, 304); vertex(132, 268);
    vertex(140, 268); vertex(140, 190); vertex(169, 190);
    vertex(169, 185); vertex(189, 185); vertex(189, 226);
    vertex(202, 226); vertex(206, 185); vertex(208, 226);
    vertex(216, 226); vertex(216, 216); vertex(226, 216);
    vertex(226, 226); vertex(232, 226); vertex(232, 306);
    vertex(244, 306); vertex(244, 199); vertex(252, 199);
    vertex(252, 139); vertex(260, 139); vertex(260, 127);
    vertex(295, 127); vertex(295, 139); vertex(305, 139);
    vertex(305, 170); vertex(330, 170); vertex(330, 306);
    vertex(365, 306); vertex(365, 250); vertex(390, 250);
    vertex(390, 306); vertex(400, 306); vertex(400, 400);
    endShape();

    for(var i = 0; i < int(minute()); i++){
        fill(200, 200, 0);
        rect(xarray[i], yarray[i], 7, 7);
    }
}

// Draws Blimp
function blimp(x, y){
    fill(200, 75, 175);
    quad(x - 20, y, x + 15, y, x + 7, y + 23, x -17, y + 23);
    fill(75)
    ellipse(x, y, 70, 35);
    triangle(x - 45, y -15, x - 25, y, x - 45, y + 15);
    fill(200, 75, 175);
    ellipse(x, y, 68, 15);
}

ashleyc1-Section C-Project-06-Abstract-Clock

sketch

 //Ashley Chan
 //Section C
 //ashleyc1@andrew.cmu.edu
 //Project-06-Abstract-Clock

var  lastSecond;
var  currentSecond;

var lastMinute;
var currentMinute;

var lastHour;
var currentHour;

var secondAngle;
var minuteAngle;
var hourAngle;

var x = 0;
var y = 0;

var maxDiameter = 280;
var theta = 0;

var strokeCol;
var weight;


function setup() {
    frameRate(1);
    createCanvas(300, 300);
   // translate(150, 150); //Set origin to center of canvas
    angleMode(DEGREES);
    background(215, 192, 208);
    drawMinuteArc();
}

function draw() {
    translate(150, 150); //Set origin to center of canvas
    rotate(-90); //set hands so they start where 12 would be

        drawStuffBasedOffMinute();

        drawStuffEverySecond();

        drawMinuteArc();

        drawStuffBasedOffHour();

     
     if (second() != 0) {
     //clock outline
        stroke(255);
        strokeWeight(5);
        noFill();
        ellipse(0, 0, 200, 200);

    }


}

function drawStuffBasedOffHour() {

      currentHour = hour();

            if (lastHour != currentHour) {

                //calculate how much to rotate hour rect
                hourAngle = currentHour * (360/12);
                    //For every hour that passes, rotate hour rect
                    for (var i = 0; i <= 12; i++){
                        push();
                        rotate(hourAngle);
                        fill(255, 100, 150, 8);
                        noStroke();
                        rect(0, 50, 25, 25);
                        pop();

                    }

            }
}


function drawStuffBasedOffMinute() {

      currentMinute = minute();
      
            if (lastMinute != currentMinute) {
                //have circle with stroke outline pulse according to minute
                for (var i = 0; i < 60; i ++) {
                    var diam = (sin(theta) * maxDiameter/2) + maxDiameter/2;

                    strokeWeight(.1);
                    stroke(0);
                    noFill();
                    ellipse(0, 0, diam, diam);

                    theta += 1;
                    }
                }

                
}

function drawStuffEverySecond() {

      currentSecond = second();

                if (currentSecond != 0) {

                    //Calculate how much to rotate line
                    secondAngle = currentSecond * (360/60);
                        push();
                        rotate(secondAngle);
                        fill(255, 100, 150, 8);
                        stroke(50, 50, 50);
                        line(0, 0, 80, 0);
                        noStroke();
                        ellipse(0, 110, 10, 10);
                        pop();
                    
            }

            else {
                setup();
            }

}

function drawMinuteArc() {

            if (lastMinute != currentMinute) {
                //calculate houw much to rotate min hand
                minuteAngle = currentMinute * (360/60);
                    //For every hour that passes, rotate hour hand
                    push();
                    rotate(minuteAngle);
                    stroke(255);
                    strokeWeight(1);
                    ellipse(20, 20, 25, 25);            
                    pop();

                print(minuteAngle);
        }   
}

This clock isn’t what I thought it would be. I think I had a lot of creative ideas that just didn’t completely work out. I wanted to create a pulsing circle based on the minute and have a “second” hand and circle revolve around the center. Every hour, a square would rotate as well. I also wanted all of these shapes to draw over each other. By doing so I could create a cool optical illusion effect which I think I was successful at but there are still bugs in my code that I couldn’t quite resolve. Additionally, wordpress seems to not be able to handle my clock since so much information is being stored and drawn over. My code doesn’t normally freeze when the index is run normally if you want to check: ashleyc1-Section C-Project-06

In progress code of just seconds that I like better than my final

Sheenu-Project 06-Abstract Clock

sketch

//Sheenu You
//Section E
//sheenuy@andrew.cmu.edu
//Project-06
var one=50

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;
}

function draw() {
    background(198,229,217); // My favorite blueish greem
    
    // 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);
    
    noStroke();
    //Metronome Variables 
    var speed =2;
    var dir = 1;
    var secondx = 120
    var winklex=240
    //Controls Metronome Arm
    if(S%2==0){
    	 secondx = 120
    } else { 
    	 secondx = 360
    }
    //Metronome Itself
    fill(151,208,199)
    ellipse(240,438,420,50)
    fill(214,129,137);
    quad(184,47,294,47,367,324,101,324);
    rectMode(CORNERS);
    rect(101,324,367,439);
    fill(198,164,154)
    quad(189,52,289,52,362,322,106,322)
    fill(233,78,119)
    triangle(111,367,111,430,357,430)
    fill(244,234,213)
    rect(219,66,263,311)
    strokeWeight(3);
    stroke(233,78,119);
    //Metronome Arm
    line(secondx,74,240,325)
    fill(233,78,119);
    rect(106,323,362,328);
    fill(244,234,213);
    rect(107,331,361,363);
    noStroke();
    fill(214,129,137);
    text("Minutes",220,78)
    //Minutes Dashes
    for(var poop=0; poop<M+1;poop++){
    	    stroke(233,78,119);
        strokeWeight(1);
    	line(240,308-poop*4,258,308-poop*4)
    	//Resets Dashes when Minutes is 0(?)
    	if(M==0){
    		fill(244,234,213)
    		rect(219,66,263,311)

    	}
    }
    //Hours
    text("Est. 19"+H,215,351)

}

When I was very young, I never understood what a metronome was used for. The only thing that I found fascinating about the thing was the satisfying ticking noises, a unique and signature sound that sounded different and more pleasant compared to other ticking objects I encountered with everywhere at the time. Although the movement of the wand was repetitive and wasn’t really that interesting, I used to wonder why and how it moves back and fourth. I always wondered about the purpose of the metronome until I started to learn how to play the piano and learned that the metronome was used to control your tempo. Before I knew anything about the metronome, I assumed the metronome to be some type of clock since it had numbers, ticked, and moved back and fourth like a pendulum on old fashioned wall clocks or grandfather clocks. This gave me the inspiration to make this project. Although the color palette is a bit strange and there is no ticking noises, I still really like this project regardless.

hannajan-Project06-Abstract Clock

sketch

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project 6: Abstract Clocks 

var thehead=80; 
var offset=50; 
var offset2=30; 
var offset3=130; 


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

function draw() {
	background(197, 216, 184); 
	noStroke(); 
	
	//race paths 
	for (var j=1; j<4; j++) {
	fill(233, 176, 77); 
	rect(0, j*100, width, height/6); 
		}
	
	//race signs 
	fill(255); 
	rect(width/17, height/10, width/6, width/10); 
	rect(width*14/18, height/10, width/6, width/10); 
	
	//race sign letters
	strokeWeight(2); 
	fill(0); 
	text("START", width/11, height/6); 
	text("FINISH", width*9/11, height/6); 
	
	//character names 
	fill(0); 
	text("Second the Rabbit", width/4+8, offset3); 
	text("Minute Man", width/4+8, offset3*2-offset2); 
	text("Hour the Panda", width/4+8, offset3*3-offset); 
	
	//Fetch the current Time 
	var H=hour(); 
	var M=minute(); 
	var S=second(); 
	
	//track clock paths for racers 
	if (H<13) {
	var mappedH=map(H, 0, 11, 0, width-thehead/2); 
} else {
	var mappedH=map(H-12, 0, 11, 0, width-thehead/2);
}
	var mappedM=map(M, 0, 59, 0, width-thehead/2); 
	var mappedS=map(S, 0, 59, 0, width-thehead/2); 
	
	//Second the Rabbit 
	//head 
	fill(255); 
	ellipse(mappedS, width/3, thehead, thehead); 
	//ears 
	ellipse(mappedS-offset2, width/3-offset, thehead/4, thehead*4/5); 
	ellipse(mappedS+offset2, width/3-offset, thehead/4, thehead*4/5); 
	//eyes 
	fill(0); 
	ellipse(mappedS-thehead/5, width/3-thehead/10, thehead/10, thehead/10); 
	ellipse(mappedS+thehead/5, width/3-thehead/10, thehead/10, thehead/10); 
	
	//Minute the Man 
	//head 
	fill(255, 222, 168); 
	ellipse(mappedM, width/2+offset2, thehead, thehead); 
	//hair 
	fill(123, 79, 8);
	arc (mappedM, width/2+offset2, offset2*3, offset2*3, PI, TWO_PI ); 
	//eyes 
	fill(0); 
	ellipse(mappedM-thehead/5, height/3+offset3-20, thehead/10, thehead/10); 
	ellipse(mappedM+thehead/5, height/3+offset3-20, thehead/10, thehead/10); 
	
	//Hour the Panda 
	//ears 
	fill(0); 
	ellipse(mappedH-offset2, width/2+offset*2, thehead/3, thehead/3); 
	ellipse(mappedH+offset2, width/2+offset*2, thehead/3, thehead/3); 
	//head 
	fill(255); 
	ellipse(mappedH, width/2+offset3, thehead, thehead); 
	//eyes 
	fill(0); 
	ellipse(mappedH-thehead/4, width/2+offset*2+30, thehead/3, thehead/3); 
	ellipse(mappedH+thehead/4, width/2+offset*2+30, thehead/3, thehead/3); 
	fill(255); 
	ellipse(mappedH-thehead/4, width/2+offset*2+30, thehead/10, thehead/10); 
	ellipse(mappedH+thehead/4, width/2+offset*2+30, thehead/10, thehead/10); 
	
	
	//text showing clock time on top. 	
	//If the Hours value is higher than 12, then 12 is subtracted. 
	fill(255); 
	if (H<13) {
	text(H, width/4, 20); 
} else {
	text(H-12, width/4, 20); 
	}
	text(":", width/4+15, 20); 
	text(M, width/3-9, 20); 
	text(":", width/3+8, 20); 
	text(S, width/3+15, 20); 
}

I thought of how the seconds clock moves faster than the minute and the hours is the slowest. I then thought of different symbols to represent this difference in speed. I came up with Second the Rabbit, Minute Man, and Hour the Panda. I am quite pleased with the outcome and the race my symbols are running.