Category: Project-06-Abstract-Clock

Vicky Zhou – Project 06 – Clock

sketch

/*Vicky Zhou
Section E
vzhou@andrew.cmu.edu
Project-06-Clock*/ 

var prevsec;
var millisrollover;

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

function draw() {
	background(255);

	//current time 
	var h = hour();
	var m = minute();
	var s = second();


	//changes military to standard time
	if(h > 12){
		h = h - 12; 
	}

	//making seconds beocme smoother
	if (prevsec != s){
		millisrollover = millis();
	}
	prevsec = s;
	var mills = floor(millis() - millisrollover);
	var secfraction = s + (mills / 1000);

	//map function to adjust ratio of time to canvas size
	var hourmap = map(h, 0, 12, 0, height);
	var minmap = map(m, 0, 59, 0, height);
	var secmap = map(secfraction, 0, 59, 0, height);


	// seconds that spiral outwards 
		push();
		for (i = 0; i <= 360; i ++){
			fill(secmap, 180, 190, 5);
			stroke(200, 100, 20);
			strokeWeight(0.9);
			rotate(degrees(180));
			translate(-390, -300);
			ellipse(width/2, height/2, secmap, secmap);
		}
		pop();


	//min triangle that shifts from left to right
		push();
		for (i = 0; i <= 360; i ++){
			fill(200, minmap, 190, 20);
			stroke(100, 100, 200);
			strokeWeight(1);
			triangle(i + 480, 480, 0, i + 480, minmap, i * 20);
		}
		pop();


	//hour bar that travels from top to bottom 
		push();
		for (i = 0; i <= 360; i += 20){
			fill(240, 240, 240, 0.05);
			stroke(100, 120, hourmap);
			strokeWeight(1.5);
			rectMode(CENTER);
			rect(100, hourmap, 1000, i/3);
		}
		pop();
}

After reading of the brief history of time with clocks, I was most intrigued by the idea of the “sunflower clock” and other patterns in nature that stray away from the conventional “sun and moon” diagram. Initially, I wanted to create a cock that mimicked the high and low tide of the beach, with perhaps waves being the second, sea foam being the minutes, and sand particles on the beach being hours. However, I was much more drawn to the works of Vincent Toupe, and how interesting and dynamic his abstract clocks were. Therefore, I then decided to hash out a more abstract clock with seconds represented by a growing ring, minutes represented by a triangle that shifts from left to right, and hours represented by a bar that shifts up and down. My first iteration of this abstract clock had started off with all three “hands” being represented by circles, but I wanted some other more obvious, visual representation between the seconds, minutes, and hours.

Abstract clock sketches

Alice Fang – Project 6 – Abstract Clock

sketch

/*
Alice Fang
acfang@andrew.cmu.edu
Section E
Project-06-AbstractClock
*/

function setup() {
    createCanvas(400, 400);
    noStroke();
}
function draw() {
	background(146, 211, 231);

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

	// sun
	var arc = 140; // radius of sun trajectory path
	var angle = H;
	push();
	translate(width/2, height/2);
	rotate(radians(7.5*H)); // rotate based on time of day, with highest point at 12:00 pm
	fill(239, 244, 214);
	ellipse(0 - arc, 0, 36, 36);
	pop();

	//static landscape
	fill(145, 168, 113); // farthest mountain
	beginShape();
	vertex(0, 166);
	vertex(67, 186);
	vertex(115, 175);
	vertex(150, 182);
	vertex(240, 152);
	vertex(270, 160);
	vertex(328, 144);
	vertex(352, 153);
	vertex(369, 150);
	vertex(400, 157);
	vertex(400, 400);
	vertex(0, 400);
	endShape(CLOSE);

	fill(125, 147, 96); //third mountain
	beginShape();
	vertex(0, 226);
	vertex(40, 208);
	vertex(95, 224);
	vertex(183, 205);
	vertex(288, 218);
	vertex(400, 186);
	vertex(400, 400);
	vertex(0, 400);
	endShape(CLOSE);

	fill(81, 110, 81, 80); // second mountain
	beginShape();
	vertex(0, 266);
	vertex(20, 258);
	vertex(40, 265);
	vertex(110, 244);
	vertex(200, 275);
	vertex(260, 312);
	vertex(400, 323);
	vertex(400, 400);
	vertex(0, 400);
	endShape(CLOSE);

	fill(81, 110, 81, 80); // closest mountain
	beginShape();
	vertex(0, 280);
	vertex(47, 298);
	vertex(77, 289);
	vertex(119, 330);
	vertex(175, 348);
	vertex(211, 326);
	vertex(288, 337);
	vertex(325, 370);
	vertex(400, 400);
	vertex(0, 400);
	endShape(CLOSE);
 
 	// hot air balloon!
	var mapY1 = map(S, 0, 60, height, -175); // map y position of turquoise balloon to seconds
	var mapY2 = map(M, 0, 60, height * 2, -175); // map y position of magenta balloon to minutes
	var mapY3 = map(H, 0, 24, height * 2.857, -175); // map y position of orange balloon to hours
	var balX = 300; // X position of balloon
	var balY1 = mapY1;
	var balY2 = mapY2;
	var balY3 = mapY3;

	drawBalloon(balX, balY1 + 60, 120, 1, 26, 120, 142); // turquoise balloon
	drawBalloon(balX, balY2 + 60, 120, 0.5, 137, 62, 101); // magenta balloon
	drawBalloon(balX - 100, balY3 + 60, 120, 0.35, 233, 153, 95); // orange balloon

	if (H <= 11 & H >= 6) {
		fill(252, 217, 192, 75) // morning color
		rect(0, 0, width, height);
	} else if (H >= 14 & H <= 20) {
		fill(228, 77, 46, 75); // sunset color
		rect(0, 0, width, height);
	} else if (H > 20 || H < 6) {
		fill(5, 6, 90, 99); // dusk color
		rect(0, 0, width, height);
	}
}

function drawBalloon(balX, balY, balSize, balScale, R, G, B) {
	push();
	scale(balScale);
	fill(R, G, B);
	ellipse(balX, balY, balSize, balSize); // balloon shape
	quad(balX - 44, balY + 40, balX + 44, balY + 40, balX + 14, balY + 77, balX - 13, balY + 77);
	
	stroke(0); // basket lines
	line(balX - 12, balY + 77, balX - 12, balY + 90);
	line(balX + 12, balY + 77, balX + 12, balY + 90);
	noStroke();
	
	fill(104, 81, 32); // basket
	rect(balX - 12, balY + 90, 25, 25);
	pop();
}

Concept sketch
Illustrator concept; morning
Illustrator concept; evening
Illustrator concept; dusk

I was inspired by some photographs that I saw of hot air balloons, and I really wanted to play with the different colors of sky at different times of day. The trickiest parts for me were setting up the function drawBalloon() to create the balloons, because once I scaled them, I forgot what variables would be affected in terms of animation.

The largest, turquoise balloon represents seconds, with the magenta balloon as minutes and the orange balloon as hours. The sun also rises and sets based on the hour, with the highest point at noon.

Lingfan Jiang-Project-06-Abstract Clock

lingfanj-06

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-06

var y = 100;
var up = 0;

function setup(){
    createCanvas (480, 200);
}

function draw(){
    background("pink");

    //turn down the frame rate to limit the movement
    frameRate(1);
    angleMode(DEGREES);

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

    //remap second according to the width of the canvas
    var x = map(S, 0, 60, 0, 480);

    //fill the base with dark grey
    fill(45);
    strokeWeight(0);
    rect(0, 145, 48, 100);
    rect(48, 140, 40, 100);
    rect(88, 135, 40, 100);
    rect(128, 130, 40, 100);
    rect(168, 125, 40, 100);
    rect(208, 120, 72, 100);
    rect(280, 125, 40, 100);
    rect(320, 130, 40, 100);
    rect(360, 135, 40, 100);
    rect(400, 140, 40, 100);
    rect(440, 145, 40, 100);

    //fill the platforms with different shades of grey
    fill(240);
    rect(0, 110, 48, 35);
    fill(200);
    rect(48, 105, 40, 35);
    fill(160);
    rect(88, 100, 40, 35);
    fill(120);
    rect(128, 95, 40, 35);
    fill(100);
    rect(168, 90, 40, 35);
    fill(80);
    rect(208, 85, 72, 35);
    fill(100);
    rect(280, 90, 40, 35);
    fill(120);
    rect(320, 95, 40, 35);
    fill(160);
    rect(360, 100, 40, 35);
    fill(200);
    rect(400, 105, 40, 35);
    fill(240);
    rect(440, 110, 40, 35);

    textSize(10);
    text('Time Survived:', 140, 170);
    textSize(13);
    text(nf(H + ' hours', 8, 0), 220, 170);
    text(nf(M + ' minutes', 10, 0), 279, 170);

//set a strokeweight for the man
    strokeWeight(0.7);
    //body
    line (x, y, x, y + 8);
    //front leg
    line (x, y + 8, x + 5, y + 10);
    line (x + 5, y + 10, x + 5, y + 15);
    //back leg
    line (x, y + 8, x, y + 11);
    line (x, y + 11, x - 5, y + 15);
    //arms
    line (x, y + 4, x + 6, y + 4);
    line (x, y + 6, x + 6, y + 6);
    //head
    ellipse(x, y, 5, 5);

//pac-man at the back
    strokeWeight(0.5);
    fill("yellow");
    arc(x - 30, y + 8, 20, 20, 40, 320, PIE);

    //eye of pac-man
    fill(0);
    ellipse(x - 30, y + 3, 2.5, 2.5);


    //set conditions so that the running man moves up 5 pixels every 5 seconds
    if (S % 5 == 0) {
        up = 5;
    }
    else {
        up = 0;
    };

    //set the man back to the left of the screen
    if (S > 60) {
        x = 0;
    };

    //make the man goes up before he reaches the middle
    if (S > 0 & S < 30){
        y -= up;
    }
    //make the man goes down after he reaches the middle
    if (S > 30 & S < 60) {
        y += up;
    };





}

The way to read the clock is that the minute and the hour are clearly stated in the text, and the second is related to the position of the stickman. The stickman would climb up 5 pixels every 5 seconds before it reaches to the middle, and it would climb down afterward.

The biggest struggle I had while doing this assignment is that I do not know how to make the man only step up once every 5 seconds and not to go straight up unstopping. Also, every time I refresh the page, the stickman would go back to its pre-set “y” location which causes a problem visually. Although there are a few hard codes in it, the final result still turns out good to me.

early sketch

 

cmhoward-project-06

cmhoward-06

function setup() {
	createCanvas(480, 100);
}

function draw() {
	var H = hour();
	var M = minute();
	var S = second();
	var colorFill = 0;

	background('black');

	for (var i = 0; i < H + 1; i++) {
		colorFill = (3000/i);
		stroke(colorFill, 0, 0);
		line(width - i * 10 + 9, 0, width - i * 10 + 9, height/3);
	}
	for (var i = 0; i < 24 - H; i++) {
		colorFill = (3000/i);
		stroke(colorFill, 0, 0);
		line(i * 10, 0, i * 10, height/3);
	}

	for (var i = 0; i < M + 1; i++) {
		colorFill = (3000/i);
		stroke(colorFill, 0, 0);
		line(width - i * 5 + 4, height/3, width - i * 5 + 4, height/3*2);
	}

	for (var i = 0; i < 60 - M; i++) {
		colorFill = (3000/i);
		stroke(colorFill, 0, 0);
		line(i *5, height/3, i * 5, height/3*2);
	}

	for (var i = 0; i < S + 1; i++) {
		colorFill = (3000/i);
		stroke(colorFill, 0, 0);
		line(width - i * 2.5 + 1.5, height/3*2, width - i * 2.5 + 1.5, height);
	}

	for (var i = 0; i < 60 - S; i++) {
		colorFill = (3000/i);
		stroke(colorFill, 0, 0);
		line(i * 2.5, height/3*2, i * 2.5, height);
	}
}

For this project, I was inspired by a simple abacus.

The abacus has historically been used as a mathematical and computational device, but I immediately was inspired by this as a clock, with each row representing a different time keeping variable (hour, minute, seconds) and each vertical line counting those variables. The script basically reflects the current time on the right and whatever is left over on the left, as if someone is moving a line over for each second, minute, etc.

I began by creating ellipses first, but then decided to create lines to create a deeper graphic relationship between the the hour, minutes, and seconds, as you can see that while the spacing is different between the lines for each variable, there are times when all of the lines vertically connect and it adds another element to this abstraction.

Project 6 – Abstract Clock Sara Frankel

sketch

// Sara Frankel
// sfrankel
// Project 6
// Section A


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

var earthw = 340;
var earthh = 350;
var sunw = 50;
var sunh = 50;


function draw() {
	background(0); 
	var hours = hour();
	var mins = minute();
	var sec = second();
	textSize(30);

	//little dipper
	stroke(80); // I put in lines to emphasize the shape of the dipper :), I put this in for aesthetic effect
	line(50, 40, 110, 60);
	line(110, 60, 150, 100);
	line(150, 100, 200, 135);
	line(200, 140, 280, 85);
	line(285, 85, 225, 45);
	line(230, 45, 155, 105);
	fill('yellow');
	text('*', 50, 60);
	text('*', 110, 80);
	text('*', 150, 120);
	text('*', 200, 155);
	text('*', 280, 100);
	text('*', 225, 65);


	noStroke();
	fill('blue');
	ellipse(width/2, height, earthw, earthh);
	//sun
	fill('orange');
	ellipse(width/2 + cos(radians(360 * ((hours + 6)/24.0))) * (200), height + sin(radians(360 * ((hours + 6)/24.0))) * (200), sunw, sunh); //I used sin and cos to help rotate the sun around the earth at the speed of each hour (from 6am to 6pm you will be able to see the sun)
	//moon
	fill(50);
	ellipse(width/2 + cos(radians(360 * ((hours + 18)/24.0))) * (200), height + sin(radians(360 * ((hours + 18)/24.0))) * (200), sunw, sunh);//I used sin and cos to help rotate the moon around the earth at the speed of each hour (from 6pm to 6am you will be able to see the moon)

	//cloud
	var clouddir = hours % 2 === 0; //Boolean value that, as used in the if statement, that helps to depict the direction of the cloud
	if  (clouddir){
		mins = minute();
	} else {
		mins = 60 - minute(); // when the cloud moves 1 hour, it will change direction and go accross the screen the other direction
	}
	var cloudx =  cos(radians(90 * ((mins - 5)/60.0)) + 180) * 300 + width/2 - 50; //I used sin and cos to help move the cloud around the screen at the speed of each minute (it will move at the speed of the minute and change direction every hour)
	var cloudy = sin(radians(90 * ((mins - 5)/60.0)) + 180) * 450 + height + 20;
	fill('grey');
	ellipse(0 + cloudx, 100 + cloudy, 50, 50);
	ellipse(30 + cloudx, 80 + cloudy, 50, 50);
	ellipse(60 + cloudx, 80 + cloudy, 50, 50);
	ellipse(90 + cloudx, 100 + cloudy, 50, 50);
	ellipse(60 + cloudx, 120 + cloudy, 50, 50);
	ellipse(30 + cloudx, 120 + cloudy, 50, 50);

	//airplane
	var planedir = mins % 2 === 0;//Boolean value that, as used in the if statement, that helps to depict the direction of the plane
	if  (planedir){
		sec = second();
	} else {
		sec = 60 - second(); //after 60 seconds, the plane will change directions
	}
	var planex = cos(radians(90 * ((sec - 5)/60.0)) + 180) * 300 + width/2 - 100; //I used sin and cos to help move the plane around the screen at the speed of each second (it will move at the speed of the minute and change direction every minute)
	var planey = sin(radians(90 * ((sec - 5)/60.0)) + 180) * 450 + height - 50;
	var backwing = [50, 120, 70, 80, 100];
	var frontwing = [100, 70, 60, 130, 140];

	if (!planedir) { //the plane will change direction when going back accross the screen
		backwing = [200 - backwing[0], 200 - backwing[1], 200 - backwing[2], 200 - backwing[3], 200 - backwing[4]];
		frontwing = [200 - frontwing[0], 200 - frontwing[1], 200 - frontwing[2], 200 - frontwing[3], 200 - frontwing[4]];
	}

	//body/wings of plane
	fill(255);
	rectMode(CENTER);
	rect(100 + planex, 100 + planey, 100, 20, 30);
	triangle(backwing[0] + planex, backwing[1] + planey, backwing[0] + planex, backwing[3] + planey, backwing[2] + planex, backwing[4] + planey);
	triangle(frontwing[0] + planex, frontwing[0] + planey, frontwing[1] + planex, frontwing[2] + planey, frontwing[3] + planex, frontwing[0] + planey);
	triangle(frontwing[0] + planex, frontwing[0] + planey, frontwing[1] + planex, frontwing[4] + planey, frontwing[3] + planex, frontwing[0] + planey);


}

I enjoyed making this project as I used it to try and understand how to use sin and cos for an object to rotate around another. I decided to go with an adventurous space theme with with the earth in the bottom center and the sun and moon rotating around the earth. The sun is orange and the moon grey, both resembling the hour of the day (at 6pm and 6am you will be able to see both the sun and moon). The cloud resembles the minute of the hour and changes direction every hour. The cloud is seconds. I put the Little Dipper in the background as a nice accent to the overall picture.

Jenna Kim (Jeeyoon Kim)- Project 6- Abstract Clock

jeeyoonk06

var x = [];
var y = [];

function setup() {
    createCanvas(500, 500);
    for (i = 0; i < 100; i++){
    	x[i] = random(50, 450);
    	y[i] = random(50, 450);
    }
}

function draw() {
	background(1, 41, 71);
	var S = second(); //variables for time
	var M = minute();
	var H = hour();

	var Hmap = map(H, 0, 20, 0, 500); // ground (pink block) adds up every "HR"
	for(i = 0; i < H; i++)
		stroke(255);
        strokeWeight(2);
		fill(255, 138, 143);
		rect(0, 460, Hmap, 40);

	stroke(255); //fire fly JAR
	strokeWeight(2);
	line(192, 196, 289, 196);
	line(192, 196, 192, 242);
	line(192, 242, 163, 274);
	line(163, 274, 163, 460);
	line(163, 460, 318, 460);
	line(318, 460, 318, 274);
	line(318, 274, 289, 242);
	line(289, 242, 289, 196);

	push(); //Jar lid
	translate(260, -78)
	fill(255);
	rotate(PI / 3);
	rect(192, 196, 10, 100); 
    pop();

    for(i = 0; i < S; i++){ //tiny firefly appears every "SEC"
    	fill(247, 246, 146);
    	noStroke();
    	ellipse(x[i], y[i], 4, 4);
    }

    push(); //firefly rotates every "MIN"
    translate(width / 2, height / 2);
    noStroke();
    ellipseMode(CENTER);
    fill(255);
    rotate(radians(M * 6));
    stroke(255);
    strokeWeight(0.8);
    line(85, 70, 87, 80); //left bug tentacle
    stroke(255);
    strokeWeight(0.8);
    line(75, 60, 74, 80); //right bug tentacle
    noStroke();
    fill(249, 196, 65); //body
    ellipse(80, 40, 19, 50);
    fill(247, 216, 146);
    ellipse(80, 40, 17, 30);
    fill(244, 224, 189);
    ellipse(80, 40, 14, 18);
    fill(45, 16, 35); //wings
    ellipse(75, 50, 10, 33);
    fill(45, 16, 35); //wings
    ellipse(85, 50, 10, 33);
    fill(255, 0, 68); //head
    ellipse(80, 65, 12, 12);
    fill(0); //left eye
    ellipse(85, 70, 5, 5);
    fill(0);
    ellipse(75, 70, 5, 5);
    pop();

}

For this project, I was inspired by the fireflies I saw in my backyard. The tiny firefly adds up every second, pink block adds up every hour, and the firefly in the middle rotates every minute. From last week to this week, my biggest challenge had been understanding “arrays” and “loops”. Through this project, I could understand these concepts better, and I had fun exploring different styles, color, and movements of the parts of the project.

I did a quick sketch before going into Illustrator.
Drawing on Illustrator helps me visualize more clearly.

Christine Chen-Project-06-Abstract Clock

Christine Chen-Project-06-Abstract Clock

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-06-Abstract Clock
*/

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

function draw() {
    background(43, 43, 47); //darl gray background

    //background circle
    strokeWeight(0); //no stroke
    for (i = 560; i > 320; i = i - 60){
        fill(70); //light gray
        ellipse(200, 200, i, i);

        fill(55); //medium gray
        ellipse(200, 200, i - 20, i - 20);

        fill(43); //dark gray
        ellipse(200, 200, i - 40, i - 40); 
    }

    var angleH = 0; //angle for hour circle rotations
    var angleM = 0; //angle for minute circle rotations
    var angleS = 0; //angle for second circle rotations

    //y position for the circles of Hour, Minute, Second
    var yH = 0; 
    var yM = 20; 
    var yS = 40; 
    
    //Fetch current time
    var H = hour();
    var M = minute();
    var S = second();

    //ratio for controlling spiral circles within borders
    var ratio = 0.3 * width;

    strokeWeight(0.5);

    //Seconds Spiral
    for (var i = 0; i < S; i++){
        push();
        translate (200, 200);
        rotate(angleS);

        stroke(255); //white
        line(0, yS, 0, 0); //draw from canvas center to circle center

        noStroke();
        fill(255); //white
        ellipse(0, yS, 5, 5);
        pop();

        yS += ratio/60;
        angleS += 12;
    }

    //Hour Spiral
    for (var i = 0; i < 24; i++){
        push();
        translate (200, 200);
        rotate(angleH);
        
        if(i < H){
            fill(133, 185, 250); //light blue for current time
        } else {
            fill(100); //gray circles for the rest
        }
    
        ellipse(0, yH, 13, 13);
        pop();

        yH += ratio/24;
        angleH += 30;
    }


    //Minute Spiral
    for (var i = 0; i < 60; i++){
        push();
        translate (200, 200);
        rotate(angleM);

        if(i < M){
            fill(122, 150, 255); //dark blue for current time
        } else {
            fill(70); //gray circles for the rest
        }

        ellipse(0, yM, 10, 10);
        pop();

        yM += ratio/60;
        angleM += 12;
    }


}

My idea was a lot harder to create than I thought it would be. I created a spiral form of an abstract clock. The largest circles represent the hour, the medium sized ones represent minutes, and the smallest ones represent seconds. All 24 circles representing hours and all 60 circles representing minutes are drawn out. They get lighted up to represent the current time. The smallest circles representing seconds are drawn in real time which shows how time is moving forward.

Initial draft for abstract clock

I added in the background layers of ellipses and to make the clock more visually interesting. I also experimented with lines and added the lines to connects the canvas center to the second circles to make the movement of the clock more dynamic. I also ended up with having the circles of the more center parts of the spiral overlapping each other because I just like how it gives it a more dynamic “spiral” look rather than having equal distances between all of the circles.

Tanvi Harkare – Project 06 – Abstract Clock

tanvi_sketch

var H;
var M;
var S;

var posX = 0;
var posY = 0;;

var rectSize;

function setup() {  
    createCanvas(480, 300);
}

function draw() {
    noStroke();
    posX = 0;
    posY = 0;
    background("pink");

    //hour
    H = hour();
    for(var i = 0; i < 24; i++){
        if(H == i){
            fill(0);
        }
        else{
            fill(240);
        }
        rect(posX, posY, width / 24, height / 3);
        posX += width / 24; 
    }
    posX = 0;
    posY += 100;
    
    //minute
    M = minute();
    for(var j = 0; j < 60; j++){
        if(M == j){
            fill(0);
        }
        else{
            fill(240);
        }
        rect(posX, posY, width / 60, height / 3);
        posX += width / 60;
    }
    posX = 0;
    posY += 100;

    //second
    S = second();
    for(var k = 0; k < 60; k++){
        if(S == k){
            fill(0);
        }
        else{
            fill(240);
        }
        rect(posX, posY, width / 60, height / 3);
        posX += width / 60;
    }   
}

For this project, I was inspired by making a simple abstract clock. My clock resembles a piano, with a white background and black stripes representing the hour, minute, and second in real time.

A quick sketch of what I wanted my clock to look like

Audrey Zheng- Project-06

sketch

//Audrey Zheng
//Section A
//audreyz@andrew.cmu.edu
//Assignment-06-C


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

function draw() {
	background(220);

	var h = hour();
	var  m = minute();
	var s = second();

	text(h + ":" + m + ":" + s, 125, 20);

	ellipseMode(CENTER);
	ellipse(width/2,height/2,200,200)

	translate(width/2,height/2);
	rotate(3 * PI /2);



	for (var i = 0; i < 60; i++) {
		push();
		rotate(TWO_PI * i /60);

		stroke(170);
		if (i == 0) {
			stroke(255,0,0);
			line(80,0,100,0);
		}

		else if (i %5 == 0) {
			line(80,0,100,0);
		}

		else {
			line(90,0,100,0);
		}

		pop();
	}

	//second
	var x = 100 *cos(TWO_PI * s /60) ;
	var y = 100 *sin(TWO_PI * s /60) ;

	line(0,0,x,y);

	//hour
	strokeWeight(5);
	var x = 50 *cos(TWO_PI * h /12) ;
	var y = 50 *sin(TWO_PI * h /12) ;

	line(0,0,x ,y);

	//minute
	strokeWeight(3);
	var x = 80 *cos(TWO_PI * m /60) ;
	var y = 80 *sin(TWO_PI * m /60) ;

	line(0,0,x ,y );



    
}

Project 06 Abstract Clock John Legelis

sketch

// John Legelis
// Section D


// candle dimensions
var ctop = 90
var xi = 7
var spacing = 40
var wcandle = 25
var hcandle = 150
var radius = 7

// flame dimensions
var flameEh = 20
var flameEw = 10

// holder dimensions
var holderWtop = 30
var holderWmid = 20
var holderHtop = 20
var holderHmid = 40
var holderWbot = 40


// initialize background
function setup() {
    createCanvas(480, 480);
    background(0);
}


function draw() {
    background(0)

    //assign variables to current time in hours and minutes
    var hsub = hour()
    var msub = minute()
    
    // Hours variable
    var h = ((hsub - 1) % 12) + 1
    var haway = abs(12 - h)
    
    // Minute variable
    var m = msub
    var maway = abs(60 - m)
    // dimensions of curent hour candle in relation to minutes
    var hcandleshort = hcandle * maway/60
    var ctopshort = ctop + hcandle - hcandleshort

    // loop through number of hours
    for(i = 0; i <= haway; i++) {
        
        var cx = xi + spacing * i

        // for hours to come that arent current ours
        if (i < haway){
            fill("yellow")
            rectMode(CORNER)
            rect(cx, ctop, wcandle, hcandle, radius, radius, 0, 0)
            flame(cx + wcandle/2, ctop)
            holder(cx + wcandle/2, ctop + hcandle)
        }
        // for current hour hieght is minute dependant
        else {
            fill("yellow")
            rectMode(CORNER)
            rect(cx, ctopshort, wcandle, hcandleshort, radius, radius, 0, 0)
            flame(cx + wcandle/2, ctopshort)

        }
    }
    // loop through every possible hour and draw candlestick and number
    for (i = 0; i < 12; i++){
        var cx = xi + spacing * i
        holder(cx + wcandle/2, ctop + hcandle)

        fill(255)
        textAlign(CENTER)
        textSize(20);
        text(abs(12-i), (xi + wcandle/2 + (spacing * i)), ctop + hcandle + 50)

    }

    //update every 1 second
    frameRate(1)
}


// draw flame with bottom center at x, y
function flame(x,y) {
    var h = random(5,62)
    var s = random(0,92)
    colorMode(HSB)
    fill(h,s,100)
    ellipseMode(CENTER)
    ellipse(x, y - flameEh/2, flameEw, flameEh)
}

// draw holder with top center at x, y
function holder(x,y){
    colorMode(RGB)
    fill(244,0,0)
    rectMode(CORNER)
    rect(x - holderWtop/2, y, holderWtop, holderHtop, radius)
    rect(x - holderWmid/2, y + holderHtop, holderWmid, holderHmid)
    rect(x - holderWbot/2, y+ holderHtop + holderHmid, holderWbot, holderHtop, radius)
}

This project made me think about ancient ways of keeping track of time. One of which was by candle. I chose to recreate this in a intuitive way while also making the candles seem lifelike. The hour is represented by the rightmost lit candle, and the minutes are represented by how far down the current hour candle has burned. The further into the hour it gets, the more burned down the candle becomes. The flames flicker every second.