Romi Jin – Project-05-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!!)