Category: Project-06-Abstract-Clock

Gretchen Kupferschmid-Project 06-Abstract Clock

sketch

//Gretchen Kupferschmid

function setup() {
    createCanvas(480,480);
    
}
 function draw (){
    
    //gradient picking color
    var gradient1 = color(223, 202, 252); 
    var gradient2 = color(202, 252, 238); 
    createGradient(gradient1, gradient2); 

    //creating time veriaples 
    var h = hour();
    var m = minute();
    var s = second();
    
    //mapping time variables
    var dripsS = map(s, 0, 59, 200, height);
    var colorLemon = map(m, 0, 59, 0, 30);
    var highLight = map(h, 0, 23, 110, 240);
    
     
    //lemon shadow
    noStroke();
    fill(211,180,117);
    ellipse(235,274,124,33);
     
    //changing color of lemon with minutes
    var Yellow= color(244-colorLemon,216-colorLemon, 100-colorLemon);
    fill(Yellow);
    noStroke();
    ellipse(211,181,161,208);
    ellipse(289,182,28,19);
     

    //drawing lemon interior
    noStroke();
    fill(247,234,181);
    ellipse(182,185,107,208);
    strokeWeight(2);
    stroke(196,141,32);
    fill(244,226,149);
    ellipse(182,185,73,178);
    strokeWeight(1);
    line(181,95,181,274);
    line(209,126,153,240);
    line(145.5,185,218,173);
    line(153.3,130,213.3,229.3);
    
    //lemon highlight every hour
    noStroke();
    fill(255);
    ellipse(193,highLight,8,18);
     
    //drip goes down every second
    fill(247,223,119);
    ellipse(170, dripsS, 10.5, 31);
    
    //text of time
    fill(255);
    text(h+":"+m+":"+s,350,50);
 
    
 }

 //background 
function createGradient(top, bottom) {
    for(var i = 0; i <= height; i++) {
      var mapColor = map(i, 0, height, 0, 1);
      var interA = lerpColor(top, bottom, mapColor);
      stroke(interA);
      line(0, i, width, i);
    }
}

As I tried to decide what form to make my clock, I based it heavily on my love for simple graphic elements such as lemons and the simplicity that comes from them. I wanted to also try various techniques for showing the time in the illustration itself from the drip of the lemon, to the hue of the actual lemon itself. It was important to me to show time in subtle ways that didn’t take away from the illustration but added to it in a form of animation.

Cathy Dong-06-Abstract-Clock

sketch

/* Cathy Dong
   Section D
   yinhuid@andrew.cmu.edu
   Project: abstract clock
*/

//color scheme
var wall = '#D6C9C9';
var light = '#DDE1E4';
var dark = '#8C9A9B';
var sunset = '#D2AB99';
var coffee = '#60463E';
var table = '#2F2F2F';
var curtainC = '#CEB5A7';

//time variable
var s; //seconds
var m; //minutes
var h; //hours


//coffee cup
var cupGap = 10;
var cupWidth = 28;
var cupHeight = 60;
var coffeeHeight = 0;
var coffeeX = 10;


//curtain
var curtainHeight = 0;

//deco
var deco1X = 100;
var deco1Y = 100;
var deco1Size = 0;
var deco2X = 150;
var deco2Y = 80;
var deco2Size = 0;
var deco3X = 160;
var deco3Y = 160;
var deco3Size = 0;


function setup() {
    createCanvas(470, 480);
    background(0);


}

function draw() {
    //set time variables
    s = second();
    m = minute();
    h = hour();
    coffeeHeight = s;

    //wall & table setting
    noStroke();
    fill(wall);
    rect(0, 0, width, height);
    fill(table);
    rect(0, height - height / 5, width, height / 5);

    //call functions
    coffeeLevel();
    
    cup();
    skyColor();
    curtain();
    deco();
}

//cup outline don't change
function cup() {
    for (var i = 0; i < 12; i++) {
    stroke(0);
    strokeWeight(2);
    noFill();
    var cupX = cupGap * (i + 1) + cupWidth * i;
    var cupY = height - height / 5 - cupHeight;
    rect(cupX, cupY - 10, cupWidth, cupHeight + 10);
    }
}

// coffee level changes every second
function coffeeLevel() {
    noStroke();
    fill(coffee);
    //coffee level increase per second
    for (var j = 0; j < 12; j++) {
        var coffeeY = height - height / 5 - coffeeHeight;
        var coffeeX = cupGap * (j + 1) + cupWidth * j; 
        rect(coffeeX, coffeeY, cupWidth, coffeeHeight);   
    }
}

// sky changes color based on hours
function skyColor() {
    stroke(255);
    strokeWeight(5);
    if ((h > 6) & (h < 15)) {
        fill(light); //morning
    }
    else if ((h > 14) & (h <17)) {
        fill(sunset); //dawn
    }
    else {
        fill(dark); //night
    }
    rect(width / 5 * 3, height / 4, width / 4, height / 3);
}

//curtain height changes based on hours
function curtain() {
    stroke(0);
    strokeWeight(1);
    fill(curtainC);
    var curtainX = width / 5 * 3;
    var curtainY = height / 4;
    var curtainWidth = width / 4;
    var curtainHeight = h * 5;
    rect(curtainX, curtainY, curtainWidth, curtainHeight);
}

//decoration size changes based on minutes
//color changed based on hours (matching sky color)
function deco() {
    stroke(255);
    strokeWeight(3);
    //morning
    if ((h > 6) & (h < 15)) {
        fill(light);
    }
    //dawn
    else if ((h > 14) & (h <17)) {
        fill(sunset);
    }
    //night
    else {
        fill(dark);
    }   
    deco1Size = m * 2;
    deco2Size = m;
    deco3Size = m * 3 / 2;
    circle(deco1X, deco1Y, deco1Size);
    circle(deco2X, deco2Y, deco2Size);
    circle(deco3X, deco3Y, deco3Size);
}

initial sketch

The abstract clock is an animation changes based on time in the day. There will not be any repetitions anytime in the same day. The coffee levels in the cups change based on seconds. The hour decides color of the sky and decoration elements and height of the curtain, whereas decoration dimensions change based on the minute.

There are three color modes: day time as light blue, evening as dark blue, and sunset as pale orange. 7 AM to 2 PM are considered as day time, 3 PM to 4 PM are sunset, and 5 PM to 6 AM are evening. 

Kristine Kim- Project 06- Abstract-Clock


sketch

//Kristine Kim
//Section D
//younsook@andrew.cmu.edu
//Project -06- Abstract Clock


var prevSec;

//cloud
var dx = 0;
var x = 30
var y = 110;
var db = 120


function setup() {
    createCanvas(480, 380);
    secondRolloverTime = 0;
    noStroke();
}

function draw() {
    background('lightblue'); // sky
    


//grass
    var grassTop = 330;
    var grassBottom = 380;
    var grassTilt = 30;


    for(var g = 0 - 30; g < 530; g = g + 10){
        stroke(3, 168, 50);
        strokeWeight(3);
        line(g + grassTilt, grassTop, g, grassBottom);
        line(g - grassTilt, grassTop + 10, g, grassBottom);
  }
    
   

//clock part

    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) {
        secondRolloverTime = millis();
    }
    prevSec = S;

    var mils = floor(millis() - secondRolloverTime);

   
    var hourballoonheight   = map(H, 0, 23, 0, height);
    var minuteballoonheight = map(M, 0, 59, 0, height);
    var secondballoonheight = map(S, 0, 59, 0, height);

    
    // // 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 secondballoonheightSmooth  = map(secondsWithFraction, 0, 60, 0, height);


    
   
    //hour balloon (green)
    stroke(255);
    strokeWeight(5);
    line(80,330 - hourballoonheight, 80, 500 - hourballoonheight)

    noStroke();
    fill(138, 199, 107);
    triangle(80, 330 - hourballoonheight, 50 ,  390 - hourballoonheight , 110,  390 - hourballoonheight);
    
    fill(168, 247, 129);
    stroke(138, 199, 107);
    strokeWeight(5);
    ellipse(80, 300 - hourballoonheight, db, db + 30);


    //minute balloon (pink)
    strokeWeight(5);
    stroke(255);
    line(240,330 - minuteballoonheight, 240, 500 - minuteballoonheight)

    noStroke();
    fill(214, 152, 227);
    triangle(240, 330 - minuteballoonheight, 210 ,  390 - minuteballoonheight , 270,  390 - minuteballoonheight);
    
    fill(247, 209, 255);
    stroke(214, 152, 227);
    strokeWeight(5);
    ellipse(240, 300 - minuteballoonheight, db, db + 30);

    //seconds balloon(yellow)
    stroke(255);
    line(400,330 - secondballoonheightSmooth, 400, 500 - secondballoonheightSmooth)

    noStroke();
    fill(196, 209, 96);
    triangle(400, 330 - secondballoonheightSmooth, 370 ,  390 - secondballoonheightSmooth , 430,  390 - secondballoonheightSmooth);
    
    stroke(196, 209, 96);
    strokeWeight(5);
    fill(246, 255, 176);
    ellipse(400, 300 - secondballoonheightSmooth, db,db + 30);


    translate(dx,0);
    dx ++;

    for(var c = 0; c < 3; c++){
        fill(245);
        noStroke()
        ellipse(c * x *-1, y, 50, 50);
        ellipse(c * x + 160 * -1, y - 80, 50, 50);
        ellipse(c *x + 300 * -1, y + 35, 50, 50);
        //if (dx -50 > width){
            //dx = -100;
        if ( dx - 350 > width){
        dx = -50
        }
    } 
      


    }

When I was brainstorming for this project, I saw a balloon fly outside my window and that sparked an idea in my head; to represent time with balloons flying. I didn’t want just the balloons to be the only things in the canvas so I put them in a setting. I created grass and clouds to make my abstract clock more interesting. I struggled with having the balloons and the triangles move according to the hour/minute/second variables the most. I am very glad I added those elements because it resulted in an animation for my abstract clock . 

Carly Sacco – Project 6 – Abstract Clock

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 6 - Abstract Clock

function setup() {
	createCanvas(450, 450);	
}
	
function draw() {
	var sec = second();
	var min = minute();
	var hr = hour();
	var start = 140; //start is how far over on x axis you start drawing
	var diameter = 20; 

	background(225, 244, 252);
	
	//leaf
	fill(96, 163, 140);
	stroke(96, 163, 140);
	bezier(400, 150, 350, 400, 250, 450, 100, 400); //bottom of leaf
	bezier(400, 150, 250, 200, 250, 150, 100, 400); //top of leaf
	
	fill(151, 209, 185);
	bezier(400, 150, 325, 200, 400, 350, 100, 400);
	bezier(400, 150, 200, 250, 250, 250, 100, 400);

	//caterpillar
	k = hr % 12 
	for(i = 1; i <= k; i +=1) {
		noStroke();
		fill(217, 56, 102);
		ellipse(start + ((diameter)*(i)), 385 - (i * 18), diameter, diameter);
	}
	
	//caterpillar face
	fill(255, 231, 153);
	ellipse(155, 365, 5, 5);
	ellipse(160, 370, 5, 5);
	
	//antennas
	noFill();
	stroke(0);
	bezier(160, 360, 162, 360, 165, 355, 170, 354);
	bezier(165, 365, 162, 363, 164, 362, 170, 360);
	
	//nose
	noStroke();
	fill(255, 195, 186);
	ellipse(155, 370, 7, 7);
	
	//fly
	var wingy = 90
	var flyBodyY = 100
		
		noStroke();
		let flyBodyX = map(min, 0, 60, 0, 450); // makes the x position correspond to the minute
												//and the width of the canvas
		if (sec % 2 == 0) {//makes the fly bounce every second
		//fly wing
		fill(162, 166, 168);
		ellipse(flyBodyX, wingy, 45, 15);
		
		//fly body
		fill(208, 212, 214)
		ellipse(flyBodyX, flyBodyY, 50, 20);	
		
		//fly eye
		fill(0);
		ellipse(flyBodyX + 15, wingy + 5, 5, 5);
		
		} else {
		//wing
		fill(162, 166, 168);
		ellipse(flyBodyX, wingy + 5, 45, 15);
		
		//body
		fill(208, 212, 214)
		ellipse(flyBodyX, flyBodyY + 5, 50, 20);
		
		//fly eye
		fill(0);
		ellipse(flyBodyX + 15, wingy + 10, 5, 5);		
		}
}

When I was thinking about what to make for this project a fly had landed on my computer. I then thought about a creative way to use insects to represent the time. I thought an easy way to represent hour was by using a caterpillars body, and each circle of his body could represent the hour. The fly flapping every second was my next idea and then by letting him move across the screen to represent the minutes I thought was a cute way to add more motion to the screen.

I at first had trouble with how to convert the actual time to numbers to run in the code, but after solving those minor issues, I enjoyed drawing on the face and adding the leaf.

Jasmine Lee – Project 06 – Abstract Clock

abstractclock

//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C
//Project-06-Abstract Clock

var h;
var m;
var s;
var start;

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

function draw(){
    h = hour();
    m = minute();
    s = second();
    start = 270;
    var cloudX = s * 8;

    //determines if day-sky or night-sky
    if (h > 6 & h < 19){
        background(156, 224, 229);
    } else{
        background(31, 47, 71);
    }

    angleMode(DEGREES);

    //minute-cloud
    if (cloudX > width){
        cloudX = 0;
    } else{ 
        cloudX = cloudX + width / 60 / 60;
    }
    noStroke();
    fill(255, 255, 255, 240);
    ellipse(cloudX, 130, 100, 40);
    ellipse(cloudX + 20, 105, 40, 40);
    ellipse(cloudX - 10, 110, 60, 40);

    //rainbow
    noFill();
    strokeWeight(20);
    //red-hours-clock
    stroke(255, 89, 74, 100);
    arc(240, 125, 200, 200, start, start + h * 15);
    //yellow-minutes-clock
    stroke(255, 234, 74, 100);
    arc(240, 125, 180, 180, start, start + m * 6);
    //blue-seconds-clock
    stroke(74, 146, 255, 100);
    arc(240, 125, 160, 160, start, start + s * 6);

    //lens-flares
    strokeWeight(1);
    stroke(255, 255, 255);
    ellipse(240, 125, 280, 280);
    strokeWeight(3);
    stroke(255, 255, 255, 100);
    ellipse(240, 125, 295, 295);
    noStroke();
    fill(255, 255, 255, 50);
    ellipse(120, 225, 60, 60);
    ellipse(150, 200, 30, 30);
    ellipse(320, 70, 10, 10);
    ellipse(350, 50, 40, 40);

    //determines whether sun or moon is in center
    if (h > 6 & h < 19){

        //sun
        fill(255, 234, 74);
        ellipse(240, 125, 100, 100);

        //sun-rays
        push();
        noStroke();
        translate(240, 125);
        triangle(-10, 0, 10, 0, 0, 70 * (s % 2));
        triangle(-10, 0, 10, 0, 0, -70 * (s % 2));
        triangle(-70 * (s % 2), 0, 0, 10, 0, -10);
        triangle(70 * (s % 2), 0, 0, 10, 0, -10);
        pop();

        } else{

        //moon
        noStroke();
        fill(189, 201, 219, 240);
        ellipse(240, 125, 130, 130);
        ellipse(270, 110, 10, 10);
        ellipse(235, 105, 30, 30);
        ellipse(210, 80, 20, 20);
        ellipse(270, 150, 40, 40);
        ellipse(270, 80, 10, 10);
        ellipse(290, 95, 5, 5);
        ellipse(230, 175, 20, 20);
        ellipse(205, 140, 40, 40);

        //lower-left-star
        push();
        noStroke();
        fill(229, 241, 255);
        translate(120, 225);
        triangle(-5, 0, 5, 0, 0, 20 * (s % 2));
        triangle(-5, 0, 5, 0, 0, -20 * (s % 2));
        triangle(-20 * (s % 2), 0, 0, 5, 0, -5);
        triangle(20 * (s % 2), 0, 0, 5, 0, -5);
        pop();

        //upper-right-star
        push();
        noStroke();
        fill(229, 241, 255);
        translate(350, 50);
        triangle(-5, 0, 5, 0, 0, 30 * (s % 2));
        triangle(-5, 0, 5, 0, 0, -30 * (s % 2));
        triangle(-30 * (s % 2), 0, 0, 5, 0, -5);
        triangle(30 * (s % 2), 0, 0, 5, 0, -5);
    }

}

Preliminary Sketch of my Abstract Clock.

I decided to use the sun and moon symbols in my abstract clock because I felt they were both universal symbols for representing time. I also experimented with transparency and movement when I created the cloud and stars moving in the sky. I was able to use modulus as a way to make the stars twinkle. With this exercise, I was able to learn a lot about using rotation, push, and pop.It was a bit frustrating getting everything to move in order with each other, but in the end I managed to make it work.

Timothy Liu — Project 06 — Abstract Clock

tcliu-openended-06

// Timothy Liu
// 15-104 Section C
// tcliu@andrew.cmu.edu
// OpenEnded-06

// variables defining the sapling + base characteristics
var leaf = 12;
var stem = 50;
var stemW = 4;
var base = 30;
var leafMax = 16;
var leafMin = 11;
var leafChange = 0.1;
var leafH;

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

function draw() {

    noStroke();

    // time variables; militaryH uses a 24 hr scale, and H uses a 12 hr scale with the modular
    var militaryH = hour();
    var H = hour() % 12;
    var M = minute();
    var S = second();
    var mM = map(M, 0, 59, 0, 50); // mapping mM so it's constrained between 0 and 50, the height of each sapling

    // these variables are used later when determining sky color and when it should change
    var mH1 = militaryH + 1;
    var H3 = H - 3;
    
    // defining where leafH is
    leafH = height / 2;

    // the following if statements make the sky change color based on the time, indicating am vs. pm:
    // ex: if there are 2.5 saplings grown, and the sky is dark blue, it must be 2.5am because it's still dark outside.
    
    // if it's from 12am - 8am, the sky slowly gets brighter every hour
    if (militaryH < 8) {
        fill(0 + (15 * mH1), 15 + (20 * mH1), 100 + (15 * mH1));
        rect(0, 0, width, 2 * height / 3); 

    // if it's 8am - 4pm, the sky stays consistently bright out
    } else if (militaryH >= 8 & militaryH < 16) {
        fill(120, 175, 220);
        rect(0, 0, width, 2 * height / 3); 

    // if it's 4pm - 12pm, the sky slowly gets darker every hour
    } else {
        fill(120 - (15 * H3), 171 - (20 * H3), 220 - (15 * H3));
        rect(0, 0, width, 2 * height / 3); 
    }

    // base ground color
    fill(191, 148, 115);
    rect(0, 2 * height / 3, width, height / 3);

    // this for loop draws all of the 12 saplings and the mounds of dirt they grow out of
    for (var a = 0; a < 12; a++) {

        // dirt mounds around base of saplings
        fill(171, 125, 91);
        ellipse((a + 1) * width / 13 + (stemW / 2), height / 2 + stem, base, base / 2);   

        // this if statement draws all the saplings that are already fully grown
        if (a < H) {
            fill(84, 61, 40);
            ellipse((a + 1) * width / 13 + (stemW / 2), height / 2 + stem, 8, 4); // shadow at base of sapling
            fill(63, 209, 0); // sapling color
            rect((a + 1) * width / 13, height / 2, stemW, stem);
            arc(((a + 1) * width / 13) - (stemW), leafH, leaf, leaf / 2, 0, 5 * PI / 4, CHORD); 
            arc(((a + 1) * width / 13) + (2 * stemW), leafH, leaf, leaf / 2, 7 * PI / 4, PI, CHORD);
        }

        // this if statement draws the sapling that is currently growing
        if (a == H) {
            fill(84, 61, 40);
            ellipse((a + 1) * width / 13 + (stemW / 2), height / 2 + stem, 8, 4); // shadow at base of sapling
            fill(63, 209, 0); // sapling color            
            rect((a + 1) * width / 13, leafH + stem, stemW, -mM);
            arc(((a + 1) * width / 13) - (stemW), leafH + stem - mM, leaf, leaf / 2, 0, 5 * PI / 4, CHORD); 
            arc(((a + 1) * width / 13) + (2 * stemW), leafH + stem - mM, leaf, leaf / 2, 7 * PI / 4, PI, CHORD); 
        }
        
        // this if statement makes the leaves flutter/pulsate once every second, serving as a measure of S (seconds)
        if (S % 2 == 0) {
            leaf = min(leaf + leafChange, leafMax);
        } else {
            leaf = max(leaf - leafChange, leafMin);
        }
    
    }

}

I really enjoyed the concept of envisioning an abstract clock. Time in itself is such an abstract construct, so it was a fun challenge trying to represent it in an unconventional way. One of my first ideas about showing time was through plants, like bamboo, that grow at a rapid rate. I realized that I could play with this concept using plant saplings, so my abstract clock portrays a series of 12 saplings that grow and sway in the wind with the seconds, minutes, and hours in the day.

A few key things to note about my clock:

  1. I decided to only show 12 saplings to represent the two 12-hour halves in the day because I felt that 24 saplings would cause my clock to lose meaning and groundedness. To help represent AM vs. PM time, I made the sky change color as a function of what hour is. From 12AM — 8AM, the sky slowly changes from dark blue to light blue each hour. At 8AM, the sky is light blue, and it stays that way until 4PM. Then, from 4PM — 12AM, the sky slowly gets darker again every hour. Using this logic, the user can deduce what time it is in the day; for example, if I see that there are 3.5 saplings and the sky is dark, that means it must be 3:30AM and it’s not light out yet. If there are 3.5 saplings and it’s light out, it must be 3:30PM in the early afternoon.
  2. My program has the leaves of the saplings pulsating/fluttering once every second. They serve as a good way to track the number of seconds in my clock, as even though there’s no counter, it’s an easy metric to count and follow.

Below are some sketches from my ideation phase.

Some of the sketches from my notebook. I started with a two-row concept, but switched to one because it was easier to follow.

Xiaoyu Kang-Project 06-Abstract Clock


sketch

//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-06

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

function draw(){
    background(233,217,120);
    noStroke();

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

    //background circle
    fill(62,124,208);
    circle(150, 150, 270);

    //arc of second
    strokeWeight(10);
    stroke(180,230,255);
    arc(width/2, height/2, 230, 220, PI + HALF_PI, PI + HALF_PI + 2 * PI * (s/60));

    //arc of minute
    strokeWeight(20);
    stroke(147,193,255);
    arc(width/2, height/2, 170, 170, PI + HALF_PI, PI + HALF_PI + 2 * PI * (m/60));

    //arc of hour
    strokeWeight(30);
    stroke(110,148,255);
    fill(71,93,137);
    arc(width/2, height/2, 90, 90, PI + HALF_PI, PI + HALF_PI + 2 * PI * (h/12));
    
    //center circle 
    fill(233,217,120);
    noStroke();
    circle(width/2, height/2, 15);

    //marks on the sides
    fill(255);
    noStroke();
    rect(width/2 - 20/2, 0, 20, 50);
    rect(width/2 - 20/2, height - 50, 20, 50);
    rect(0, height/2 - 20/2, 50, 20);
    rect(width - 50, height/2 - 20/2, 50, 20);
}

For this project, I thought about the more modern design of watches that is designed nowadays. So I tried to keep the way of representing the time simple and easy to understand. I also tries to use some pop of color to make the image visually pleasing.

Kimberlyn Cho- Project 06- Abstract Clock

ycho2-06

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project-06 */

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

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

	var hr = h % 12
	var sec = map(s, 0, 59, 0, width);

	background(hr + hr * 20);

	//cloud
	fill(230);
	ellipse(sec, 45, 70, 55);
	ellipse(sec + 35, 50, 70, 55);
	ellipse(sec + 65, 45, 60, 45);
	ellipse(sec + 25, 25, 50, 35);
	ellipse(sec + 52, 25, 50, 35);	

	//buildings
	fill(0);
	rect(0, 100, 60, 300);
	rect(65, 150, 45, 250);
	rect(110, 75, 75, 325);
	rect(185, 110, 50, 300);
	rect(235, 200, 35, 100);
	rect(275, 50, 80, 250);
	rect(355, 125, 40, 175);
	rect(400, 80, 80, 220);

	//window1
	var a = 115
	for (var y = 0; y < 8; y++) {
		var wa = a + y * 25
		fill(255);
		rect(15, wa, 10, 10);
		rect(35, wa, 10, 10);
	};

	//window2
	var bx = 122
	var by = 85
	var count = 0
	for (var y = 0; y < 8; y++) {
		for (var x = 0; x < 3; x++) {
			var wbx = bx + x * 20
			var wby = by + y * 28

			if (count == m & count < 24) {
			fill(255, 255, 0);
			rect(wbx, wby, 10, 10);

		    } else {
		    	fill(100);
		    	rect(wbx, wby, 10, 10);
		    }
		    count += 1
		};
	};

	//window3
	var c = 120
	for (var y = 0; y < 12; y++) {
		var wc = c + y * 15
		fill(230);
		rect(192, wc, 30, 5);
	};

	//window4
	var d = 65
	for (var y = 0; y < 7; y++) {
		var wd = d + y * 35
		fill(255);
		rect(290, wd, 10, 20);
		rect(310, wd, 10, 20);
		rect(330, wd, 10, 20);
	};

	//window5
	var ex = 412
	var ey = 90
	for (var y = 0; y < 9; y++) {
		for (var x = 0; x < 4; x++) {
			var wex = ex + x * 15
			var wey = ey + y * 24

			if (count == m & count > 23) {
			fill(255, 255, 0);
			rect(wex, wey, 10, 10);

		    } else {
		    	fill(100);
		    	rect(wex, wey, 10, 10);
		    }
		    count += 1
		};
	};	
};

I was inspired by the night view of my home, NYC. The lights in some of the buildings light up according to the minutes to represent how the city is never really dead. The clouds move by the second and the background color changes a different shade of gray based on the hour. I went through different iterations in the input parameters for the time through my sketches.

Raymond Pai-Project 06 – Abstract Clock

sketch

///RAYMOND PAI
///SECTION D
///RPAI@ANDREW.CMU.EDU
///PROJECT 06

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

}

function draw() {
    strokeWeight(0);
    background(255);

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

    //diameter variables
    var sd = 200;
    var md = 400;
    var hd = 550;

    //angles of arcs
    c = 2 * PI;
    var sa = s * c;
    var ma = m * c;
    var ha = h * c;

    //seconds
    angleMode(DEGREES);
    noFill();
    stroke(255, 0, 0);
    strokeWeight(50);
    arc(width/2, height/2, sd, sd, 0, sa);

    //minutes
    angleMode(DEGREES);
    noFill();
    stroke(0, 255, 0);
    strokeWeight(50);
    arc(width/2, height/2, md, md, 0, ma);

    //hours
    angleMode(DEGREES);
    noFill();
    stroke(0, 0, 255);
    strokeWeight(49);
    arc(width/2, height/2, hd, hd, 0, ha);
}

Inspired by Apple Watch rings:

Image result for apple watch rings

Each ring represents a different aspect of time. Red is seconds, Green is minutes, and blue is hours.

Min Ji Kim Kim – Project 06 – Abstract Clock


sketch

At first I didn’t really know how to approach this project, so I started looking at what kind of shapes I wanted to use for my clock. I ultimately found inspiration from a picture of hanging frames online. I started by sketching the shapes using magic numbers and then I tried to figure out how to use the hour, minute, and second functions to manipulate the time. I used the map function to manipulate the time increments to fit the box height. I decided to use primary colors for the boxes and secondary colors for the small rectangles connecting the boxes. Time is indicated by the increasing darker hues in the lighter hue background. Overall, I had a lot of fun creating this abstract clock.

inspiration from dreamstime

/*
Min Ji Kim Kim
Section A
mkimkim@andrew.cmu.edu
Project-06
*/

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

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

    background(0); //map time to fit the boxes
    mS = map(s, 0, 59, 0, 110);
    mM = map(m, 0, 59, 0, 110);
    mH = map(h, 0, 23, 0, 110);
    
    //purple rectangle
    noStroke();
    fill('#804FB3');
    rect(150, 140, 20, 40);
    
    //yellow rectangle
    fill('#edd011');
    rect(190, 300, 20, 40);

    //blue hour
    strokeWeight(10);
    stroke('#e3edff');
    fill('#0058ff');
    rect(60, 20, 120, 120);
    
    //red minute
    stroke('#ffdbdb');
    fill('#ff3333');
    rect(140, 180, 120, 120);
    
    //green second
    stroke('#d7ffcf');
    fill('#2bcf2b');
    rect(105, 340, 120, 120);

    //changing the box color inside to match time
    noStroke();
    fill('#82adff');
    rect(65, 25, 110, 110 - mH); //hour
    fill('#ff9696'); //minute
    rect(145, 185, 110, 110 - mM);
    fill('#a2fc90'); //second
    rect(110, 345, 110, 110 - mS);

    //display time on top
    noStroke();
    fill(255);
    text(nf(h, 2, 0) + ":" + nf(m, 2, 0) + ":" + nf(s, 2, 0), 270, 30);
    textSize(18);
}