Project-06-Abstract-Clock

For this project, I used driving as the way of demonstrating time, which the driver will drive endlessly during day and night.

-The position of the car represents every second within a minute, moving from left to right (0-59).

-The position of the Tree represents every minute within an hour, moving from left to right (0-59).

-The Sun and light clouds demonstrate it’s the first 12 hours, while the Moon and the dark clouds demonstrate the 13th-24th hours.

-The amount of day bars (light blue) demonstrates how many hours it’s into the first 12 hours, while the amount of night bars (dark gray) demonstrates how many hours it’s into the 13th to 24th hours. All bars appear from left to right.

-The day bars are background of the sky in the nights, while the night bars are background of the sky in the day.

-The clouds are just dynamic decorations.

sketchDownload
/* Jiayi Chen
   jiayiche    Section A */
var h  //hours
var s  //seconds
var m  //minutes
var dayColor
var nightColor
var boxColor=[]
var cloudAndStarX=[]
var cloudAndStarY=[]
var cloudAndStarL=[]
var cloudAndStarH=[]
function setup() {
    createCanvas(480, 480);
    h = hour();
    s = second();
    m = minute();
    dayColor= color(135,206,250);
    nightColor= color(112,128,144);
    for(var i=0; i<12;i++){
        if(h < 12){
            boxColor[i]=nightColor;   //color of the day
        }else if(h>11){
        boxColor[i]=dayColor; //color of the night
        }
    }

    for(var i=0; i<17;i++){
        cloudAndStarX[i]=random(0,width-240);
        cloudAndStarY[i]=random(0,140);
        cloudAndStarL[i]=random(30,120)
        cloudAndStarH[i]=random(30,100)
    }
}

function draw() {
    //The Sky that represent hours
    //change the number of box to represent hours in night tmie
    h = hour();
    s = second();
    m = minute();
    background('gray');
    push();
    if (h < 12){ 
        for (var i=0; i<h;i++){
            boxColor[i]=dayColor
        }  
    //change the number of box to represent hours in night tmie
    }else if(h >= 12){
        for (var i=0; i<(h-12);i++){
            boxColor[i]=nightColor;
        }

    }

    for (var i=0; i<12;i++){  //Background sky colors changing base on day or night
        fill(boxColor[i])
        rect(i*width/12,0,width/12,height/2);
    }
    pop();

    //grass
    push();
    fill(0,255,127);
    rect(0,240,width,70)
    rect(0,height-65,width,65)
    pop();
    //road
    for (var i=0; i<5;i++){ 
        rect(i*100,350,50,25);
    }

    //The Car represent seconds
    car(s/60*width,360);


    //The Tree Represent minutes
    tree(m/60*width,200);


    //clouds and sun
    push();
    if(h<12){
        fill(255,69,0)   // the colors and shape for sun
        circle(60,60,50)
        for (var i=0; i<5;i++){
            fill(255,255,255,100) //clouds in day
            rect(cloudAndStarX[i]+s/60*width/4,cloudAndStarY[i],cloudAndStarL[i],cloudAndStarH[i]);   
        }
    //Clouds and a full moon 
    }else if(h>11){
        fill(246, 241, 213)   // the colors and shape for moon
        circle(width-50,60,50)
        for (var i=0; i<5;i++){
            fill(0,0,0,150) // clouds in night
            rect(cloudAndStarX[i]+s/60*width/4,cloudAndStarY[i],cloudAndStarL[i],cloudAndStarH[i]);   
        }
    }
    pop();

}


function car(cx,cy){
    //car body
    push();
    fill('red')
    rect(cx,cy,100,40);//main body
    rect(cx+25,cy-30,40,30);//middle
    triangle(cx+65,cy,cx+65,cy-30,cx+95,cy);//right
    triangle(cx+5,cy,cx+25,cy-30,cx+25,cy);//left

    //Weels
    fill('gray') //outer weels
    circle(cx+25,cy+40,25);
    circle(cx+75,cy+40,25);
    fill('ivory')//inner weels
    circle(cx+25,cy+40,17);
    circle(cx+75,cy+40,17);

    //windows
    fill('azure');
    rect(cx+28,cy-27,34,24);
    triangle(cx+68,cy-3,cx+68,cy-27,cx+92,cy-3);
    triangle(cx+10,cy-3,cx+22,cy-25,cx+22,cy-3);

    //lights
    fill('gold');//back lights and sub lights
    rect(cx+80,cy+20,20,5);
    rect(cx,cy+3,10,15);
    fill('yellow');//front light
    rect(cx+90,cy+5,10,12);
    pop();
}


function tree(tx,ty){
    push();
    push();
    fill('green');//leaves
    rect(tx-30,ty,90,50);
    rect(tx-15,ty-30,60,30);
    pop();
    fill(139,69,19);//tree log
    rect(tx,ty+20,30,80);
    pop();
}

Leave a Reply