sketch

//SunMin Kim 
//Section E
//sunmink@andrew.cmu.edu
//Project 06 

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

function draw() {
    //show the current time 
    var h = hour(); 
    var m = minute(); 
    var s = second(); 
    
    //color of the ocean changes depending on hours 
    var mapH = map(h, 0, 25, 0, 255);
    background(mapH, 220, 250); 

    noStroke();
    //tail 
    fill(230, 150, 70);
    rect(365, 270, 80, 100, 40, 20, 20, 40);
    //body
    fill(230, 150, 70);
    rect(50, 230, 320, 180, 20, 20, 20, 20);
    //eyes 
    fill(255); 
    ellipse(120, 300, 50, 50);
    //pupill
    fill(0);
    ellipse(122, 292, 30, 30);
    //bubble1
    fill(255);
    ellipse(110, 50, 20, 20);
    //bubble2
    fill(255);
    ellipse(105, 160, 20, 20);
    //bubble3
    fill(255);
    ellipse(130, 110, 20, 20);


    //changes form 24 hour to 12 hour clock 
    if (h == 0){ 
        h = 12; 
    } else if (h > 12 & h < 24){ 
        h -=12; 
    } else{ 
        h = hour(); 
    }
   
    //draw hair every second 
    for (var c = 0; c <= s; c++){
        strokeWeight (2.5); 
        stroke(255); 
        line(80 + 6 * c, 190, 63 + 5 * c, 230);
    }

    //size of mouth gets larger depending on the minutes
    var mapM = map(m, 0, 100, 0, width); 
    noStroke(); 
    fill(230, 80, 100);
    rect(50, 350, mapM, 50, 5, 5, 5, 10);
  
    fill(0);
    textSize(8);
    text( h + " hour(s) " + m + " minute(s) " + s + " second(s) ", 20,20);
}

    

After finishing assignments using index variables, I was excited to create an abstract clock that transforms according to hours, minutes, and seconds. Thus for the abstract clock, I wanted to take benefit of making a clock that is interesting to watch more than few seconds.  Throughout this project, I struggled the most when coming up with triangle coordinates. I feel good with the outcome that I successfully used triangles for this wallpaper which was the most challenging part during the project.

Throughout this project, I struggled the most to come up with types of design that allows me to indirectly display the time flow. However, I felt great to successfully use different parts in the fish to represent the time flow.

sketch

var prevSec;
var millisRolloverTime;

var startingPoint = -90; //lets the bar-graph clocks start from the 0 o'clock position
var transparency1 = 255; //determines the transparency of the second bar graph
var transparency2 = 255; //determines the transparency of the minute bar graph
var transparency3 = 255; //determines the transparency of the hour bar graph



function setup() {
    createCanvas(220, 300);
    millisRolloverTime = 0;
}

function draw() {
    angleMode(DEGREES);
    
    var heur = hour();
    var minutee = minute();
    var seconde = second();
    var milliseconde = millis();
    
   
    background(0);
    
    
    if (prevSec != seconde) {
        millisRolloverTime = millis();
    }
    prevSec = seconde;
    var mils = floor(millis() - millisRolloverTime);
    
    
    
    
    var secondsWithFraction   = (mils / 1000.0);
    
    //remaps the millisecond accordingly to the width of the path of the bar graphs
    var secondBarWidthSmooth  = map(secondsWithFraction, 0, 1, 0, width-100);
    
    
    //position of the bar graphs; the +50 is so that the left side of the bar graphs would be touching the left wall at second=0
    var position = secondBarWidthSmooth+ 50;
    
    
    
    //to produce an oscillating motion of the bar graphs: if the second is an odd number than the 
    if (seconde % 2 == 1) {
        position = width-50-secondBarWidthSmooth;
    }
    else {
        position = position;
    }
    
    
    
    
    //outline of the clock
    stroke(255)
    noFill();
    ellipse(position, height/2, 100, 100)
    
    
    //hour
    noStroke();
    fill(255-heur*3, 255-heur*2, 255, transparency3);
    arc(position, height/2, 100, 100, startingPoint, startingPoint+360/12*heur);
    
    
    //minute
    noStroke();
    fill(200,100+minutee*2,80+minutee,transparency2);
    arc(position, height/2, 75, 75, startingPoint, startingPoint+360/60*minutee);
    
    
    //second
    noStroke();
    fill(180,10,10, transparency1);
    arc(position, height/2, 50, 50, startingPoint, startingPoint+360/60*seconde);
    
    
    
    
    
    //corresponding bar graph will disappear if the second/minute/hour hand hits zero and then reappear when it hits 1
    if (seconde == 0 || seconde > 59) {
        transparency1 =0;
    }
    else {
        transparency1 = 255;
    }
    
    
    if (minutee == 0) {
        transparency2 = 0;
    }
    else {
        transparency2 = 255;
    }
    
    
    if (heur == 0) {
        transparency3 = 0;
    }
    else {
        transparency3 = 255;
    }
    
  
    
 
}

 

 

For this project I created a clock made of three pie graphs, each representing the second, minute and the hour, that oscillates between the two walls every second. The graphs also change their colors over the course of minute/hour.

At first I didn’t know what/how the clock has to do/look like for it to be ‘abstract’, so I tried to create a clock that looks like Mondrian’s painting.

But then I realized maybe it’s something that tells the time without explicitly displaying what time it is. So I tried to incorporate color/position of the clock itself to imply a change in time.

Hardest part of this project was probably making the clock oscillate accordingly each second smoothly, instead of moving one pixel and then stopping and then moving and then stopping. At first I was thinking of manipulating the framecount, but I figured it’d be easier to play around with the code that was posted on the Deliverables page that created a bar that creeps up smoothly every second. First I had to change it so that the position of the circle is the one changing instead of the width of the rectangle, and then the clock would reset itself to the origin after each second.  And then I had to remap the value of the millisecond so that one second would take up the entire width of the canvas. Then I had to make sure that the clock would change its direction and creeps back towards the origin instead of transporting back to it.

 

 

sketch

function setup() {
    createCanvas(300, 480);
    background(162, 220, 254);

    angleMode(DEGREES);
}

function draw() {
background(162, 220, 254);

var H = hour();
var M = minute();
var S = second();

    
    var mappedH = map(H, 0,23, 100, 500);
    var mappedM = map(M, 0, 59, 0, 400);
    var mappedS = map(S, 0, 59, 0, 480);

    noStroke();

    //background sky color - seconds
    //the darker blue dropping down on the canvas indicates the seconds
    fill(111, 173, 254);
    rect(0, 0, width, mappedS);


    //stem - minutes
    //growth of the stem indicates the greater minutes
    //the taller the stem, the more minutes
    fill(100, 212, 126);
    rect(width/2-10, height, 20, -1* mappedM);

    //sunflower petals = hours
    //the number of petals indicates the hour of the time

    if(H==0){
        H=12;
    }

    if(H<24 & H>12){
        H-=11;
    }
 
    for (var i=1; i<H; i++){
        push();
        translate(width/2, height-mappedM);
        rotate(30*i);
        strokeWeight(30); 
        stroke(255, 208, 54);
        line(0, 0, 0, -75);
        pop();
    }


    //sunflower head
    noStroke();
    fill(112, 84, 69);
    ellipse(width/2, height-mappedM, 100, 100);



}

I was inspired to use a sunflower as my abstract clock when researching Kircher’s sunflower clock. Although Kircher used the orientation and the position of the sunflower to determine time, I decided to use the physical characteristics of the sunflower to indicate the seconds, minutes, and hours.

sketch

//maddy cha
//section e
//mecha@andrew.cmu.edu
//project-06

function setup() {
    createCanvas(480,480);
    angleMode(DEGREES);
}

function draw() {
    var h = hour();
    var m = minute();
    var s = second();

    var w = width/10;
    var h2 = height/3
    background(142,185,196);   

    //body
    noStroke();
    fill(256,256,256,120);
    rect(100,80,330,340,40,40,40,40);


    //changes from 24 hour to 12 hour clock
    if(h == 0){
        h = 12;
    } else if(h > 12 & h < 24){
        h-=12;
    } else{
        h = hour();
    }

    //calls function that uses minutes to determine how many eyelashes to draw
    minuteLashes();

    for(var i = 0; i < 12 ; i++){
        //allows for two rows of eyes
        if(i < 6){
            fill(256);
            noStroke();
            arc(w*(i+3),h2,30,15,0,180);
            arc(w*(i+3),h2,30,15,180,360);
            //eye will turn red corresponding to hour
            if(i == h-1){
                fill(255,map(m,0,60,0,120),map(m,0,60,0,120));
            } else 
                fill(142,185,196);

            //blue iris (top row)
            ellipse(w*(i+3),h2,15,15);

            //pupil (top row)
            fill(20);
            ellipse(w*(i+3),h2,10,10);     

        } else{
            fill(256);
            noStroke();
            arc(w*(i-3),h2+30,30,15,0,180);
            arc(w*(i-3),h2+30,30,15,180,360);

            //eye will turn red corresponding to hour
            if(i == h-1){
                fill(255,100,100);
            } else 
            //blue iris (bottom row)
            fill(142,185,196);
            ellipse(w*(i-3),h2+30,15,15);

            //pupil (bottom row)
            fill(20);
            ellipse(w*(i-3),h2+30,10,10);        

        }
    
        //drooping eyelinds
        if(s >= 55 || s <= 5){
            if(i<6){
            fill(100,150,160);
            arc(w*(i+3),h2,30,15,180,360);
        } else{
            fill(100,150,160);
            arc(w*(i-3),h2+30,30,15,180,360);
        }
    }

        //blinks every minute
        if(s == 0){
            fill(100,150,160);
            if(i < 6){
                arc(w*(i+3),h2,30,15,0,180);
                arc(w*(i+3),h2,30,15,180,360);  
            } else{
                arc(w*(i-3),h2+30,30,15,0,180);
                arc(w*(i-3),h2+30,30,15,180,360);            
            }
        }
            
    }
}

function minuteLashes(){
    var s = second();
    //minute tally marks
    for(var j = 0; j <= s; j++){

        //draws five lashes per eye based on seconds
        if(j!=0 & j<=5){
            stroke(100,150,160);
            strokeWeight(2);
            line(128+5*j,145, 128+5*j,160);
        }
        if(j >5 & j<=10){
            line(152+5*j,145, 152+5*j,160);
        }
        if(j >10 & j<=15){
            line(174+5*j,145, 174+5*j,160);
        }
        if(j >15 & j<=20){
            line(198+5*j,145, 198+5*j,160);
        }
        if(j >20 & j<=25){
            line(221+5*j,145, 221+5*j,160);
        }
        if(j >25 & j<=30){
            line(244+5*j,145, 244+5*j,160);
        }
        if(j >30 & j<=35){
            line(128+5*(j-30),175, 128+5*(j-30),190);
        }
        if(j >35 & j<=40){
            line(152+5*(j-30),175, 152+5*(j-30),190);
        }
        if(j >40 & j<=45){
            line(174+5*(j-30),175, 174+5*(j-30),190);
        }
        if(j >45 & j<=50){
            line(198+5*(j-30),175, 198+5*(j-30),190);
        }
        if(j >50 & j<=55){
            line(221+5*(j-30),175, 221+5*(j-30),190);
        }
        if(j >55 & j<=60){
            line(244+5*(j-30),175, 244+5*(j-30),190);
        }
    }
    mouth();
}

function mouth(){
    var m = minute();

    noStroke();
    fill(255,map(m,0,60,0,120),map(m,0,60,0,120));    
    rect(150,220,230,map(m,0,60,20,180),90,90,40,40);
    noStroke();
    fill(255);
}

For this project, I decided to use hours, minutes, and seconds of the current time in order to create a graphic picture. I started by sketching out a monster that I could use to show the passage of time.

While I messed around with a couple different coded designs, I went with using eyes to indicate the hour, mouth size to indicate minutes, and eyelashes to indicate seconds. One of the eyes turns red corresponding to the current hour, and the monster blinks every minute (his eyelids appear 5 seconds before and after he blinks). He gains a new eyelash every second, and the size of his mouth is dependent on the current minute.