Charmaine Qiu – Project-06- Abstract Clock

sketch

/* Charmaine Qiu
  charmaiq@andrew.cmu.edu
  section E
  project 06, Abstract Clock */

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

function draw() {
    background(255,200,200); 

    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    //variables that fits the time into certain coundaries
    var poolW = map(M, 0, 59, 70, width);
    var eyesH = map(H, 0, 23, 30, 1);

    noStroke();
    //creating the elements of the girl that does not change over time
    //body
    fill(252, 73, 3);
    ellipse(width / 2, height, 130, 200);
    //face
    fill(255, 238, 227);
    ellipse(width / 2 - 40, height / 2 + 20, 30, 30);
    ellipse(width / 2 + 40, height / 2 + 20, 30, 30);
    ellipse(width / 2, height / 2, 100, 120);
    angleMode(DEGREES);
    //hair
    fill(245, 108, 66);
    arc(width / 2, height / 2, 110, 140, -180, 360);
    ellipse(100, 90, 50, 50);
    ellipse(200, 90, 50, 50);
    //mouth
    arc(width / 2, height / 2 + 50, 40, 50, -180, 360);
    //table
    fill(201, 150, 113);
    rect(0, 250, width, 70);
    //HANGRY
    fill(255, 238, 227);
    //("HANGRY", width / 2 - 23, 140);
    text("When is my FOOD coming?", width / 2 - 70, 40);

    //when it is midnight, "HANGRY" appears on the head
    if (H == 59){
      text("HANGRY", width / 2 - 23, 140);
    }
    //drooling drops that falls down every second
    push();
    translate(160, 200);
    m = floor(millis()) % 1000;
    m = map(m, 0, 1000, 0, 200);
    fill(147, 206, 237);
    ellipse(0, m, 7, 7 + m * 7 / 200);
    pop();
    //the pool gets gets larger as a minute goes by
    fill(147, 206, 237);
    ellipse(width / 2, height, poolW, 50);
    //the eyes becomes smaller as hours in a day pass by
    fill(80);
    ellipse(width / 2 - 20, height / 2 + 15, 10, eyesH);
    ellipse(width / 2 + 20, height / 2 + 15, 10, eyesH);

}

This project is very interesting since I was able to design and compute a graphic that evolves around time. I took the idea of creating a literal clock further by creating a narrative to my work.

Leave a Reply