Month: October 2019

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);
}

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. 

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 .