Category: Project-06-Abstract-Clock

Project-06

sketchDownload
/* Nami Numoto
 * Section A
 * mnumoto@andrew.cmu.edu
 * Project 06 - Abstract Clock
 */

var x = [];
var y = [];
var s = 25;
var side = 10

var s;
var m;
var h;

//160, 160, 160
function setup() {
    createCanvas(480, 480);
    rectMode(CENTER);
    frameRate(1);
    stroke("white");
}

function circles(x, y) {
    fill(3,122,118); //squid game green
    ellipse(x, y, 10);
}

function triangles(x, y) {
    fill(237, 27, 118); //squid game pink
    triangle(x - side / 2, y - side * sqrt(3) / 2, x - side, y - 0, x - 0, y - 0);
}

function squares(x, y) {
    fill(255);
    rect(x, y, 30, 30);
}

function draw() {
    clear();
    background(0); //black background
    s = second();
    m = minute();
    h = hour();
    for (i = 0; i < h; i++) { // draw same # of shapes as hrs, mins, sec
        x[i] = random(10, 150);
        y[i] = random(10, 470);
        squares(x[i], y[i]);
    }
    for (j = 0; j < m; j++) {
        x[j] = random(170, 330);
        y[j] = random(10, 470);
        triangles(x[j], y[j]);
    }
    for (k = 0; k < s; k++) {
        x[k] = random(340, 470);
        y[k] = random(10, 470);
        circles(x[k], y[k]);
    }
}

I made a clock inspired by the Netflix show “Squid Game” – I used the colour palette of the outfits they wear as well as the shapes that represent ranks of the people running the game.

No spoilers 🙂

The circles (lowest rank symbol) represent seconds, triangles (soldiers) minutes, and squares (managers) hours.

I decided to make all of the shapes move at random within certain bounds to indicate controlled chaos, which pretty much sums up the dystopian narrative of Squid Game.

I haven’t watched it all yet, so PLEASE DON’T TELL ME ANYTHING ABOUT IT YALL

Project 06: abstract clock



function setup() {
    wd = 600
    ht = 600
    createCanvas(wd, ht);
    background(60,80,140);
}

function draw() {
    background(60,80,140)
    s = second();
    m = minute();
    h = hour();
   
    
    noStroke();
    
    xPos = 10*s
    yPos = 10*s
    
    
    //the minute bar
    fill(238,229,169)
    rect(0, 29, wd, 79);
    rect(0, ht-109, wd, 79);
    fill(105,160,225)
    rect(0, 49, wd*(m/60), 60)
    rect(0, ht-100, wd*(m/60), 60)
        
    //Hour Circle
    fill(255);
    circle(wd/2, ht/2, 199)
    fill(255,81,13)
    arc(wd/2, ht/2, 199, 199, -PI/2, -PI/2+h*(2*PI/12));
    
    //Seconds cirlcles
    fill(230,120,12)
    
    if (s <= 30) {
        circle(xPos, ht/2, 60);
    } else {
        circle(wd/2, yPos, 60);
    }
    
    if (s <= 30) {
        circle(wd-xPos, ht/2, 60);
    } else {
        circle(wd/2, ht-yPos, 60);
    }
        
}

Project 6: Abstract Clock

For my clock, I decided against breaking the idea of what a clock was. I wanted to keep the traditional conventions of what a clock is–12 hour face, hour/minute/second positions, etc., for readability and functionality purposes. I did, however, was to create something more abstract and engaging that might take a little time of discovery to immediately interpret the system.

sketch 

// John Henley; jhenley; 15-104 section D

var secondAngle; // initializes arrays/variables
var secondX = [];
var secondY = [];
var minuteAngle;
var minuteX = [];
var minuteY = [];
var hourAngle;
var hourX = [];
var hourY = [];

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

function draw() {
    background(255);
    var center_x = width / 2;
    var center_y = height / 2;
    noFill();
    stroke(255, 0, 0); // sets color settings
    strokeWeight(2);
    push();
    translate(center_x, center_y);
    
    
    secondAngle = map(second(), 0, 59, 0, 360) - 90; // maps second 0 - 60 onto 360 degree scale
    for (i = 0; i < 10; i++) { // generates radian position for second, plus larger triangles
        secondX[i] = i*100*cos(radians(secondAngle));
        secondY[i] = i*100*sin(radians(secondAngle));
    }

    minuteAngle = map(minute(), 0, 59, 0, 360) -90; // maps minute 0 - 60 onto 360 degree scale
    for (i = 0; i < 10; i++) { // maps radian position for minute, plus larger triangles
        minuteX[i] = i*75*cos(radians(minuteAngle));
        minuteY[i] = i*75*sin(radians(minuteAngle));
    }

    currentHour = hour(); // adjusts 24 hour clock to 12 hour
        if (currentHour > 12) {
            currentHour = currentHour-12;
        }
    hourAngle = map(currentHour, 0, 12, 0, 360) - 90; // maps hour 0 - 12 onto 360 degree scale
    for (i = 0; i < 10; i++) { // maps radian position for hour, plus larger triangles
        hourX[i] = i*50*cos(radians(hourAngle));
        hourY[i] = i*50*sin(radians(hourAngle));
    }

    for (i = 0; i < 10; i++) { // draws triangles connected three points from each i array
        triangle(secondX[i], secondY[i], minuteX[i], minuteY[i], hourX[i], hourY[i]);
        color(255, 0, 0)
    }

    pop();
}

Project 6

I used the rotation of the hexagons and pointer to represent second hand; smallest circles also represent second hand, middle size circles represent minute hand, and largest circles represent hour hand. The background changes from dark to white every 24 hours representing a day. It is fun to think of various representations of time.

sketchDownload
function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate(1)
    angleMode(DEGREES)
    rectMode(CENTER)
}
var s = [100,20,100]
var angles = 0
var angles1 = 150
var angles2 = 150
var radius = 0
var colorBackground = 0
var angleEllipse1 = 0
var angleEllipse2 = 0
var angleEllipse3 = 0

function draw() {
    background(colorBackground)
    //background color changes from black to white and resets every day
    if(colorBackground <= 255){
        colorBackground += 255/24/3600
    }
    if(colorBackground >= 255){
        colorBackground = 0
    }
    //background strings
    stroke(200,200,220);
    strokeWeight(.4)
    for (var x = 0; x <= 50; x += .3) {
        line(480, 50, 480/50 * x - 3, 0); //right upwards lines
    }
    for (var x = 20; x <= 80; x += .3) {
        line(480, 50, 480/40 * x, 480); //right downwards lines
    }
    for (var x = 0; x <= 30; x += .3) {
        line(0, 430, 480/60 * x, 0); //left upwards lines
    }
    for (var x = 0; x <= 30; x += .3) {
        line(0, 430, 480/30 * x, 480); //left downwards lines
    }
    //draw bottom hexagon and rotates clockwise
    push()
    translate(240,320)
    rotate(angles2)
    noStroke()
    fill(255)
    hexagon(s[2])
    angles2 +=10
    pop()
    //draw second hand and rotates anticlockwise
    push()
    translate(240,320)
    fill(102,91,169)
    noStroke()
    rotate(angles)
    hexagon(s[1])
    strokeWeight(7)
    stroke(200,200,220)
    line(0,0,0,-50)
    pop()
    //draw upper hexagon and rotates anticlockwise
    push()
    translate(240,150)
    noStroke()
    fill(0)
    rotate(angles1)
    hexagon(s[0])
    angles1 -= 10
    pop()   
    //draw second hand and rotates clockwise
    push()
    translate(240,150)
    fill(102,91,169)
    noStroke()
    rotate(angles)
    hexagon(s[1])
    strokeWeight(7)
    stroke(200,200,220)
    line(0,0,0,-50)
    angles += 6
    pop()
    //draw circles that rotate once every minute, hour, and day
    push()
    //rotate once every minute
    translate(240,240)
    fill(100,200,220)
    rotate(angleEllipse1)
    ellipse(0,-180,10,10)
    ellipse(0,180,10,10)
    ellipse(180,0,10,10)
    ellipse(-180,0,10,10)
    angleEllipse1 += 6
    pop()
    push()
    //rotate once every hour
    translate(240,240)
    fill(50,100,110)
    rotate(angleEllipse2)
    ellipse(0,-200,15,15)
    ellipse(0,200,15,15)
    ellipse(200,0,15,15)
    ellipse(-200,0,15,15)
    angleEllipse2 += 0.1
    pop()
    push()
    //rotate once every day
    translate(240,240)
    fill(10,50,55)
    rotate(angleEllipse3)
    ellipse(0,-220,20,20)
    ellipse(0,220,20,20)
    ellipse(220,0,20,20)
    ellipse(-220,0,20,20)
    angleEllipse3 += 0.1/24
    pop()
    print(colorBackground)
}
    //set up hexagon
function hexagon(s){
    beginShape()
    vertex(s,0)
    vertex(s/2,s*sqrt(3)/2)
    vertex(-s/2,s*sqrt(3)/2)
    vertex(-s,0)
    vertex(-s/2,-s*sqrt(3)/2)
    vertex(s/2,-s*sqrt(3)/2)
    endShape(CLOSE)
}

Project 06 – Abstract Clock

clock
var x = [];
var y = [];
var sec; // second
var minutes; // minute
var hr; // hour

// every second, coffee fills up a little bit in a cup and coffee mug gets larger
// every minute, coffee completely fills up a cup
// every hour, the background color darkens

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

// each cup of coffee represents one minute 

function draw() {
    var hr = hour();
    background(255-(hr*5), 255-(hr*5), 255-(hr*3)); // background color gets darker by the hour

    minutes = minute();
    sec = second();

    for(var row = 0; row < 6; row +=1 ) {
        for(var col = 0; col < 10; col += 1) {
            fill(250, 247, 222); // cream color for mug
            var current = row*10+col; // current mug
            mug(40+(40*col), 43+(40*row), current); // draw the mug
            }
        }
}

function mug(x, y, cur) { // function to draw the mug
    // body of the mug
    var frac = 1;
    if (cur < minutes) {
        fill(117, 72, 50); // brown
    } else if (cur == minutes) {
        frac = sec/60;
        fill(250+(117-250)*frac, 247+(72-247)*frac, 222+(50-222)*frac); // cream -> brown
    } else {
        return;
    }

    push();

    translate(x, y);
    scale(frac); // every second, the mug gets bigger

    ellipse(0, 0, 30, 7); // top of mug
    beginShape();
    curveVertex(-15, 0);
    curveVertex(-15, 0);
    curveVertex(-14, 10);
    curveVertex(-10, 25);
    curveVertex(-5, 28);
    curveVertex(0, 28);
    curveVertex(5, 28);
    curveVertex(10, 25);
    curveVertex(14, 10);
    curveVertex(15, 0);
    curveVertex(15, 0);
    endShape();

    // mug handle
    noFill(); 
    strokeWeight(1.5);
    beginShape();
    curveVertex(12, 20);
    curveVertex(12, 20);
    curveVertex(18, 13);
    curveVertex(15, 5);
    curveVertex(14, 8);
    curveVertex(14, 8);
    endShape();
    strokeWeight(1);

    pop();
}

The idea behind this project stemmed from my love for coffee. My time is basically measured by cups of coffee, which inspired me to create a canvas full of coffee mugs. The hours of each day are represented by the darkening of the background. The minutes of each hour are represented by the sixty mugs. The seconds of each minute are represented by the size and color of the mugs (filling up the mugs).

My initial sketch:

Sketch

I found this project quite challenging. I realized that executing a concept in code can be a lot more difficult than expected.

Project 6: Abstract Clock

luca’s clock

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

function draw() {

    //set variables as time
    var sc = second();//second of clock
    var mt = minute();//minute of clock
    var hr = hour();//hour of clock
    var yh = hr*20;//y position of hour ellipse

    //color change

    background(0,0,0)

     if (yh >= 400 & yh < 420){//20:00 - 21:00
        background(99,30,80);
    } else if (yh >= 420 & yh < 480){//21:00-00:00
        background(57,25,84);
    } else if (yh >= 0 & yh < 80){//00:00-04:00
        background(1,8,79);
    } else if (yh >= 80 & yh < 120){//04:00-06:00
        background(0,173,255);
    } else if (yh >= 120 & yh < 160){//06:00-08:00
        background(252,255,181);
    } else if (yh >= 160 & yh < 240){//08:00-12:00
        background(255,255,112);
    } else if (yh >= 240 & yh < 300){//12:00-15:00
        background(255,221,64);
    } else if (yh >= 300 & yh < 360){//15:00-18:00
        background(255,121,84);
    } else if (yh >= 360 & yh < 400){//18:00-20:00
        background(167,60,90);
    }
   

    fill(233, 236, 239);
    //text(hr + ':' + mt + ':' + sc, 30, 300);//clock for reference

    push();
    stroke(233, 236, 239);
    strokeWeight(5);
    line(50,0,50,sc*8);
    line(200,0,200,mt*8);
    line(400,0,400,yh);
    pop();

    //clock hands
    ellipse(50,sc*8,60,60);//second
    ellipse(200,mt*8,90,90);//minute
    ellipse(400,yh,135,135);//hour


}

I enjoyed looking at the different approaches to keep time. I showed the passing of time through the movement of the circles and the changes in the background color. The left, middle, and right circles depict seconds, minutes, and hours, respectively. As the hour circle moves up and down, the background color also changes, reflecting the day’s time.

Project-06: Abstract Clock

For this project, I first think about the way I want to represent the current time. Then, I choose to use two circles, one controlled by current second, the other controlled by current minute, to represent two planets rotating around the red sun in the center. The lines in gradually varied colors are the hour representation, 1 am/pm to 12am/pm starting from the line in lightest color to the brightest color to the lightest color. Since this is a 12 hours clock, the background color changes based on pm/am. When it is pm, the background is in dark blue, and when it is am, the background will be in light blue.

Project Draft
Abstract Clock
/*Name:Camellia(Siyun) Wang; 
Section: C; 
Email Address: siyunw@andrew.cmu.edu;*/

var angle= -180;
var radius = 0;

var s;
var h;
var m;


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

}

function hourLine(h){
//draw the time lines of 1-12 am/pm
    translate(240,240);
    stroke(238,232,170);
    line(-200,0,0,0);//1pm/am
    stroke(240,230,140);
    line(0,0,200*cos(radians(-150)),200*sin(radians(-150)));//2pm/am
    stroke(255,255,0);
    line(0,0,200*cos(radians(-120)),200*sin(radians(-120)));//3pm/am
    stroke(255,215,0);
    line(0,0,200*cos(radians(-90)),200*sin(radians(-90)));//4pm/am
    stroke(218,165,32);
    line(0,0,200*cos(radians(-60)),200*sin(radians(-60)));//5pm/am
    stroke(255,165,0);    
    line(0,0,200*cos(radians(-30)),200*sin(radians(-30)));//6pm/am
    stroke(255,69,0);
    line(200,0,0,0);//7pm/am
    stroke(240,230,140);
    line(0,0,200*cos(radians(150)),200*sin(radians(150)));//8pm/am
    stroke(255,255,0);
    line(0,0,200*cos(radians(120)),200*sin(radians(120)));//9pm/am
    stroke(255,215,0);
    line(0,0,200*cos(radians(90)),200*sin(radians(90)));//10pm/am
    stroke(218,165,32);
    line(0,0,200*cos(radians(60)),200*sin(radians(60)));//11pm/am
    stroke(255,165,0);    
    line(0,0,200*cos(radians(30)),200*sin(radians(30)));//12pm/am
    noStroke();
}

//the rotating circle(planet) on the outside representing minute
function minuteSun(m){
    stroke(255,165,0);
    fill(255,69,0);
    circle(150*cos(radians(angle+m*6)),150*sin(radians(angle+m*6)),10);
}
//the rotating circle(planet) on the inside representing second
function secondSun(s){
    stroke(255,215,0);
    fill(255,99,71);
    circle(60*cos(radians(angle+s*6)),60*sin(radians(angle+s*6)),10);
}
//the quuivery line representing current hour
function Hour(h){
    strokeWeight(3);
    stroke(255,240,245);
    line(200*cos(radians(-210+30*h+random(-2,2))),200*sin(radians(-210+30*h+random(-2,2))),0,0);
    strokeWeight(1);
}

function draw() {
    if(h<=12){
        background(173,216,230);//when it is am
    }
    else{
        background(0,0,139);//when it is pm
    }
    noFill();
    strokeWeight(4);
    stroke(255,160,122);
    circle(240,240,120);//orbit of second planet
    circle(240,240,300);//orbit of minute planet
    strokeWeight(2);
    noStroke();
    s = second();
    m = minute();
    h = hour();
    hourLine();
    minuteSun(m);
    secondSun(s);
    Hour(h);
    //the center sun
    strokeWeight(2);
    stroke(255,0,0);
    fill(255,0,0);
    circle(0,0,20);
    noFill();
    noStroke();
}

Project 6: Abstract Clock

sketch

var x = [0];
var y = [0];
var w = 25;
var rc;
var gc;
var bc;
var r = [];
var g = [];
var b = [];
var theta = [0];
var dtheta = [];
var rad = [50];
var mo;
var d;
var h;
var mi;
var s;


function setup() {
    createCanvas(480, 480);
    translate(240, 240);
    rotate(radians(270)); // midnight pointing upwards
    strokeWeight();
    var mo = month(); // establishing times as variables
    var h = hour();
    var mi = minute();
    var s = second();
    if (mo == 1) { // converting days to be out of 365
        d = day();
    } else if (mo == 2) {
        d = 31 + day();
    } else if (mo == 3) {
        d = 59 + day();
    } else if (mo == 4) {
        d = 90 + day();
    } else if (mo == 5) {
        d = 120 + day();
    } else if (mo == 6) {
        d = 151 + day();
    } else if (mo == 7) {
        d = 181 + day();
    } else if (mo == 8) {
        d = 212 + day();
    } else if (mo == 9) {
        d = 243 + day();
    } else if (mo == 10) {
        d = 273 + day();
    } else if (mo == 11) {
        d = 304 + day();
    } else if (mo == 12) {
        d = 334 + day();
    }
    if (h < 12) { // tying hour to red fill
        rc = map(h, 0, 11, 0, 255);
    } else {
        rc = map(h, 23, 12, 0, 255);
    }
    if (mi < 29) { // tying minutes to green fill
        gc = map(mi, 0, 29, 0, 255); 
    } else {
        gc = map(mi, 59, 30, 0, 255);
    } if (s < 29) { // tying seconds to blue fill
        bc = map(s, 0, 29, 0, 255);
    } else {
        bc = map(s, 59, 30, 0, 255);
    }
    fill(rc, gc, bc);
    circle(0, 0, 480); // clock face
    for(j = 0; j < 4; j += 1) { 
        if (j == 0) { // setting colors of markers inverse
            r[j] = 90;
            g[j] = 75;
            b[j] = map(bc, 255, 0, 0, 255);
        } else if (j == 1) {
            r[j] = 50;
            g[j] = map(gc, 255, 0, 0, 255);
            b[j] = 0;
        } else if (j == 2) {
            r[j] = map(rc, 255, 0, 0, 255);
            g[j] = 50;
            b[j] = 50;
        } else if (j == 3) {
            if (d < 182) {
                r[j] = map(d, 0, 364, 0, 255);
                g[j] = map(d, 0, 364, 0, 255);
                b[j] = map(d, 0, 364, 0, 255);
            } else {
                r[j] = map(d, 364, 0, 0, 255);
                g[j] = map(d, 364, 0, 0, 255);
                b[j] = map(d, 364, 0, 0, 255);
            }
        }
        r.push(r[j]);
        g.push(g[j]);
        b.push(b[j]);
        fill(r[j], g[j], b[j]);
        specialcircle(rad[j], y[j], w);
        rad.push(rad[j] + 50);
        x.push(0);
        y.push(0);
        theta.push(0);
    }
}

function draw() {
    strokeWeight(0);
    translate(240, 240);
    rotate(radians(270)); // midnight pointing upwards
    var mo = month(); // establishing times as variables
    var h = hour();
    var mi = minute();
    var s = second();
    if (h < 12) { // tying hour to red fill
        rc = map(h, 0, 11, 0, 255);
    } else {
        rc = map(h, 23, 12, 0, 255);
    }
    if (mi < 29) { // tying minutes to green fill
        gc = map(mi, 0, 29, 0, 255); 
    } else {
        gc = map(mi, 59, 30, 0, 255);
    } if (s < 29) { // tying seconds to blue fill
        bc = map(s, 0, 29, 0, 255);
    } else {
        bc = map(s, 59, 30, 0, 255);
    }
    r[0] = 90; // marker fill inverse of clock face
    g[0] = 75;
    b[0] = map(bc, 255, 0, 0, 255);
    r[1] = 50;
    g[1] = map(gc, 255, 0, 0, 255);
    b[1] = 0;
    r[2] = map(rc, 255, 0, 0, 255);
    g[2] = 50;
    b[2] = 50;
    if (d < 182) {
        r[3] = map(d, 0, 364, 0, 255);
        g[3] = map(d, 0, 364, 0, 255);
        b[3] = map(d, 0, 364, 0, 255);
    } else {
        r[3] = map(d, 364, 0, 0, 255);
        g[3] = map(d, 364, 0, 0, 255);
        b[3] = map(d, 364, 0, 0, 255);
    }
    fill(rc, gc, bc);
    circle(0, 0, 480); // clock face
    for(j = 0; j < 4; j += 1) { // movement with time
        theta[0] = map(s, 0, 59, 0, 355);
        theta[1] = map(mi, 0, 59, 0, 355);
        theta[2] = map(h, 0, 23, 0, 355);
        theta[3] = map(d, 0, 364, 0, 355);
        x[j] = rad[j] * cos(radians(theta[j]));
        y[j] = rad[j] * sin(radians(theta[j]));
        fill(r[j], g[j], b[j]);
        specialcircle(x[j], y[j], w);
    }
}

function specialcircle(x, y, w) {
    ellipse(x, y, w, w);
}

I wanted to create a clock that was both readable and abstract. The seconds marker corresponds to blue, the minutes to green, the hours to red, and the days of the year to grayscale. The clock face fill is a combination of all of these colors, but the inverse of the marker colors.

Project-06: Abstract Clock

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

function setup() {
    createCanvas(450, 380);
    var hr = hour();
    var min = minute();
    var sec = second();
    //set range for displaying sec location
    for (i = 0; i <= 60; i ++) { 
    	x[i] = random(315, 345);
    	y[i] = random(255, 285);
    }
}

function draw() {
    background(7, 55, 99);
    var hr = hour();
    var min = minute();
    var sec = second();
    var mapHr = map(hr, 0, 20, 0, width);
    var mapMin = map(min, 0, 50, 0, width);
    var mapSec = map(sec, 0, 50, 0, width);

    //flowerpot
    fill(76, 32, 1);
    strokeWeight(8);
    stroke(102, 42, 0);
    ellipse(110, 110, 110, 110);

    //succulent leaf [represents hour]
    if (hr > 12) {
    	hr = hr % 12;
    }
    noStroke();
    fill(114, 196, 143);
	for (var i = 0; i < hr; i ++) {
		push();
		translate(110, 110);
		rotate(radians(i * 30));
		ellipse(0, -30, 20, 50);
		pop();
	}

	//flower
	fill(244, 204, 204);
	ellipse(110, 97, 19, 19);
	ellipse(95, 108, 19, 19);
	ellipse(125, 108, 19, 19);
	ellipse(101, 125, 19, 19);
	ellipse(119, 125, 19, 19);
	ellipse(110, 111, 21, 21);
	fill(255, 229, 153);
	ellipse(110, 112, 13, 13);

	//coffee plate
    fill(220, 200, 186);
    stroke(255, 248, 244);
    strokeWeight(2);
    ellipse(330, 270, 100, 100);

    //coffee handle [represents minute]
    noStroke();
    push();
    translate(330, 270);
    rotate(radians(min * 6));
    fill(255, 248, 244);
    rect(-6, -60, 12, 60, 4);
    pop();

    //coffee cup
    strokeWeight(3);
    fill(220, 200, 186);
    stroke(255, 248, 244);
    ellipse(330, 270, 70, 70);

    //coffee 
    fill(78, 34, 0);
    stroke(120, 52, 0);
    strokeWeight(2);
    ellipse(330, 270, 53, 53);

    //coffee bubble [represents second]
    for (i = 0; i < sec; i ++) {
        fill(120, 52, 0);
        ellipse(x[i], y[i], 2, 2);
    }
    //keyboard
    noStroke();
    fill(188, 188, 188);
    rect(280, 30, 300, 140, 7);
    fill(238, 238, 238);
    rect(280, 30, 300, 10, 1);

    //keyboard keys
    fill(255, 255, 255);
    stroke(145,145,145);
    strokeWeight(1);
    rect(288, 48, 19, 11, 2); //first row keys
    rect(310, 48, 19, 11, 2);
    rect(332, 48, 19, 11, 2);
    rect(354, 48, 19, 11, 2);
    rect(376, 48, 19, 11, 2);
    rect(398, 48, 19, 11, 2);
    rect(420, 48, 19, 11, 2);
    rect(442, 48, 19, 11, 2);

    rect(288, 63, 19, 17, 2); //second row keys
    rect(310, 63, 19, 17, 2);
    rect(332, 63, 19, 17, 2);
    rect(354, 63, 19, 17, 2);
    rect(376, 63, 19, 17, 2);
    rect(398, 63, 19, 17, 2);
    rect(420, 63, 19, 17, 2);
    rect(442, 63, 19, 17, 2);

    rect(288, 84, 30, 17, 2); //third row keys
    rect(321, 84, 19, 17, 2); 
    rect(343, 84, 19, 17, 2); 
    rect(365, 84, 19, 17, 2); 
    rect(387, 84, 19, 17, 2); 
    rect(409, 84, 19, 17, 2); 
    rect(431, 84, 19, 17, 2);     

    rect(288, 105, 37, 17, 2); //fourth row keys
    rect(328, 105, 19, 17, 2); 
    rect(350, 105, 19, 17, 2); 
    rect(372, 105, 19, 17, 2); 
    rect(394, 105, 19, 17, 2); 
    rect(416, 105, 19, 17, 2); 
    rect(438, 105, 19, 17, 2); 

    rect(288, 126, 49, 17, 2); //fifth row keys
    rect(340, 126, 19, 17, 2); 
    rect(362, 126, 19, 17, 2); 
    rect(384, 126, 19, 17, 2); 
    rect(406, 126, 19, 17, 2); 
    rect(428, 126, 19, 17, 2); 
    rect(450, 126, 19, 17, 2); 

    rect(288, 147, 19, 17, 2); //sixth row keys
    rect(310, 147, 19, 17, 2); 
    rect(332, 147, 19, 17, 2); 
    rect(354, 147, 19, 17, 2); 
    rect(376, 147, 100, 17, 2); 


    //iPad
    fill(45, 45, 45);
    stroke(255, 255, 255);
    strokeWeight(10);
    translate(90, 230);
    rotate(PI / 5.0);
    rect(0, 0, 130, 200, 3);
    fill(0);
    noStroke();
    ellipse(65, 0, 3, 3);

}
Sketch of how I wanted to illustrate my desk setting

For this project, I wanted to create a 12-hour clock illustration using a top-view desk setting. To represent the numerical value of ‘hour’, I used the leaves of the flower. To represent the ‘minute’, I used the handle of the coffee cup to direct actual minute. Last but not least, I used the bubbles of coffee to represent ‘second’. In addition, I added details of my desk of an iPad along with my MacBook keyboard. It was super fun to depict my desk surrounding into this project.

Clock Project

sketch
var fall;
var spring;
var winter;
var summer;

function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
    textAlign(CENTER);
    rectMode(CENTER);
    fall = {r1:108, g1:12, b1:12, 
            r2:75, g2:28, b2:0, 
            r3:189, g3:81, b3:19};
    winter = {r1:253, g1:249, b1:231, 
            r2:202, g2:213, b2:255, 
            r3:21, g3:54, b3:186};
    spring = {r1:177, g1:244, b1:249, 
            r2:253, g2:217, b2:73, 
            r3:255, g3:204, b3:255};
    summer = {r1:123, g1:227, b1:243, 
            r2:255, g2:145, b2:145, 
            r3:250, g3:244, b3:228};
}

function draw() {
    background(220);
    translate(240, 240);
    date();
    rotate(-90);

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

    strokeWeight(30);
    noFill();

    if (m==3 || m==4 || m==5) {
        secondscircle(sc, spring);
        minutescircle(mn, spring);
        hourscircle(hr, spring);
    }
    else if (m==6 || m==7 || m==8) {
        secondscircle(sc, summer);
        minutescircle(mn, summer);
        hourscircle(hr, summer);
    }
    else if (m==9 || m==10 || m==11) {
        secondscircle(sc, fall);
        minutescircle(mn, fall);
        hourscircle(hr, fall);
    }
    else {
        secondscircle(sc, winter);
        minutescircle(mn, winter);
        hourscircle(hr, winter);
    }

}
function date() {
    stroke(0);
    strokeWeight(9);
    fill(255);
    rect(0,0, width/2,height/3,20);
    m = month();
    d = day();
    y = year();
    textSize(50);
    fill(0);
    strokeWeight(1);
    stroke(0);
    textFont('Orbitron')
    text(m + '.' + d + '.' + y, 0,15);

}

function secondscircle(sc, coloring) {
    stroke(coloring.r1,coloring.g1,coloring.b1);
    let secondsAngle = map(sc, 0, 60, 0, 360);
    arc(0, 0, 450, 450, 0, secondsAngle);
}

function minutescircle(mn, coloring) {
    stroke(coloring.r2,coloring.g2,coloring.b2);
    let minutesAngle = map(mn, 0, 60, 0, 360);
    arc(0, 0, 385, 385, 0, minutesAngle);
}

function hourscircle(hr, coloring) {
    stroke(coloring.r3,coloring.g3,coloring.b3);
    let hoursAngle = map(hr % 24, 0, 24, 0, 360);
    arc(0, 0, 320, 320, 0, hoursAngle);
}

Some challenges I faced were trying to use objects as a system of carrying the different color schemes for the different seasons in the year. Once I got the hang of using objects, I realized how useful and helpful they can be.