Category: Project-06-Abstract-Clock

sketch

/*
Romi Jin
Section B
rsjin@andrew.cmu.edu
Project-06
*/

var hr;
var min;
var sec;

var secMap;
var minMap1;
var minMap2;
//var hrMap;

function setup() {
    createCanvas(480, 900);
    background(255, 228, 225);
    angleMode(DEGREES);

    //carrots redraw
    for(var i = 0; i < second(); i++) {
        push();
        carrots(i*(width/60));
        pop();
    }
}

function draw() {

    hr = hour();
    min = minute();
    sec = second();

    secMap = map(sec, 0, 60, 0, width);
    minMap1 = map(min, 0, 60, 50, height-100);
    minMap2 = map(min, 0, 60, 101, height-50);
    //hrMap = map(hr % 12, 0, 12, 0, height);

    push();
    balloons(minMap1);
    pop();
    push();
    bunny(minMap2);
    pop();
    push();
    carrots(secMap);
    pop();
    grass();

    //redraw canvas after one minute so the carrots begin at 0 again
    if (sec==59) {
        background(255,228,225);
        push();
        balloons(50+min+10);
        pop();
        push();
        bunny(101+min+10);
        pop();
        grass();
    }

}

function carrots(xpos) {

    translate(xpos+5, height-13);
    noStroke();

    //left stem 
    push();
    rotate(-20);
    fill(114, 173, 101);
    ellipse(2, -10, 2, 4);
    pop();

    //right stem
    push();
    rotate(20);
    fill(114, 173, 101);
    ellipse(-2, -10, 2, 4);
    pop();

    //middle stem
    fill(114, 173, 101);
    ellipse(0, -10, 3, 6);

    //carrot body
    fill(249, 181, 118);
    ellipse(0, 0, 6, 18);

}

function grass() {

    translate(2, height);
    stroke(203, 232, 189);
    strokeWeight(2);

    //vertical
    var x = 0; //spacing
    for (i = 0; i < width; i++) {
        line(i + x, 0, i + x, -15);
        x += 5; 
    }

    //diagonal
    var x = 0; //spacing
    for (i = 3; i < width; i++) {
        line(i + x, 0, i + x + 3, -15);
        x += 5; 
    }

}

function balloons(ypos) {

    var vals = [240, 220, 210, 265, 235, 255];
    var balloonD = 30;

    //strings
    push();
    stroke(0);
    strokeWeight(0.25);
    line(vals[0], ypos+17.5, width/2, ypos+100);
    line(vals[1], ypos+17.5, width/2, ypos+100);
    line(vals[2], ypos+17.5, width/2, ypos+100);
    line(vals[3], ypos+17.5, width/2, ypos+100);
    line(vals[4], ypos+17.5, width/2, ypos+100);
    line(vals[5], ypos+17.5, width/2, ypos+100);
    pop();

    //balloons
    push();
    noStroke();

    fill(255, 250, 165);
    ellipse(vals[1], ypos+10, balloonD, balloonD+5);
    fill(255, 250, 200);
    ellipse(vals[2], ypos-10, balloonD, balloonD+5);
    fill(190, 240, 235);
    ellipse(vals[3], ypos+10, balloonD-5, balloonD);
    fill(190, 250, 200);
    ellipse(vals[4], ypos-20, balloonD, balloonD+5);
    fill(190, 225, 200);
    ellipse(vals[5], ypos-15, balloonD, balloonD+5);
    fill(255, 221, 165);
    ellipse(vals[0], ypos, balloonD, balloonD+5);
    pop();

}

function bunny(ypos) {

    fill(255);
    stroke(0);
    strokeWeight(0.75);
    //right ear
    push();
    translate(width/2+4, ypos);
    rotate(10);
    ellipse(0, 0, 5, 15);
    pop();
    //left ear
    push();
    translate(width/2-4, ypos);
    rotate(30);
    ellipse(0, 0, 5, 15);
    pop();
    //tail
    ellipse(width/2-15, ypos+41, 8);
    //right foot
    push();
    translate(width/2-10, ypos+49);
    rotate(-45);
    ellipse(18, 15, 8, 12);
    pop();
    //body
    ellipse(width/2, ypos+27, 40, 50);
    //left foot
    push();
    translate(width/2-10, ypos+49);
    rotate(-45);
    arc(3, 4, 8, 12, -10, 260, OPEN);
    pop();
    //left cheek
    push();
    noStroke();
    fill(255, 228, 225);
    ellipse(width/2-7, ypos+19, 6);
    pop();
    //right cheek
    push();
    noStroke();
    fill(255, 228, 225);
    ellipse(width/2+14, ypos+18, 6);
    pop();
    //left eye
    push();
    strokeWeight(3);
    point(width/2-5, ypos+17);
    pop();
    //right eye
    push();
    strokeWeight(3);
    point(width/2+12, ypos+16);
    pop();
    //nose
    line(243, ypos+18, 244, ypos+19);
    line(244, ypos+19, 245, ypos+18);
    //left hand
    push();
    translate(width/2-10, ypos+31);
    rotate(-45);
    arc(3, 4, 6, 8, -10, 250, OPEN);
    pop();
    //right hand
    push();
    translate(width/2-10, ypos+33);
    rotate(-45);
    arc(18, 15, 6, 8, -10, 250, OPEN);
    pop();

}

For my clock, I illustrated a bunny floating down on balloons as time passes. The carrots at the bottom indicate the seconds passed, the bunny moves down as each minute passes, and the bunny resets (goes back to the top) after 12 hours. I wanted to do a lot more with this project (i.e. make the balloons different colors and disappear after each minute went by (it would begin with 60 balloons) and the bunny moving down every hour instead of ever minute), but I ran out of time and was more difficult than I thought it’d be. However, I had so much fun making this project and loved coming up with ideas to make a non-conventional clock! (also, it looks like an iPhone wallpaper I would use!!)

sketch

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

function draw() {
    
    //fetches increments of time
    var H = hour();
    var M = minute();
    var S = second();
    var totalSec = ((H * 3600) + (M * 60) + S); //calculates total # seconds in day so far

    //maps increments of time to circle size
    var mappedH = map(H, 0, 23, 0, 200); 
    var mappedM = map(M, 0, 59, 0, 150); 
    var mappedS = map(S, 0, 59, 0, 100);

    //maps increments of time to color values
    var colorH = map(H, 0, 23, 255, 0); 
    var colorM = map(M, 0, 59, 255, 0); 
    var colorS = map(S, 0, 59, 255, 0); 
    
    //creates grayscale roughly in accordance with time of day
    var sky1 = map(totalSec, 0, 43200, 0, 255); //midnight-noon goes from black to white
    var sky2 = map(totalSec, 43201, 86400, 255, 0); //noon-midnight goes from white to black
    
    background(255);

    //draw background circle, fill according to time of day
    if (totalSec <= 43200) {
        fill(sky1);
    }   else {
        fill(sky2);
    }   ellipse(width/2,height/2,width,height);

    //draw circles that expand as increments of time grow
    //fill with colors that get more saturated as increments of time increase
    noStroke();
    fill(colorH,255,255);
    ellipse(150, 130, mappedH, mappedH); //hour
    fill(255,colorM,255);
    ellipse(260, 270, mappedM, mappedM); //minute
    fill(255,255,colorS);
    ellipse(135, 280, mappedS, mappedS); //second
}

I wanted to keep circles as an integral part of the design, because my own experience of time feels most attuned to cycles— the calendar, circadian rhythms, etc. The movement and color of the inner circles are tied to “human” time (hours, minutes, seconds), while the color of the background circle is tied (very approximately, using noon as the brightest point and midnight as the darkest) to the position of the sun in the sky. The map function came in very handy for this project.