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 .