Month: October 2022

Explanation for this abstract clock:

1. The sun/moon is the HOUR HAND
2. The duck is the MINUTE HAND
3. The clouds’ circle is the SECOND HAND

/*
 * Andrew J Wang
 * ajw2@andrew.cmu.edu
 * Section A
 * Project-05
 *
 * This program draws clock
 */

//set randam numbers for the wavy lines of reflection of the sun
var rando = 0;
//set sin values for waving reed
var drR=0;

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

function draw() {
//get dates for hours, minutes, seconds,and miliseconds
var dt = new Date();
//get location for ducks (MINUTES)
var dx=480-dt.getMinutes()*8-dt.getSeconds()*8/60;
//get location for the sun (HOURS)
var dy=(18-dt.getHours()-dt.getMinutes()*1/60-dt.getSeconds()*1/3600)*300/12;

//background
background(80,50,180);

//create reflection of the sun
if (dy>-125 & dy<425)
{
    sunReflection (dy);
    push();
    //hiding the additional parts above sea level
    fill (80,50,180);
    rect(100,200,280,100);
    pop();
}

//show moon between 6PM to 6AM
if (dy<62)
{
    moon (300+dy,125);
}

else if (dy>238)
{
    moon ((dy-300),125);
}

//create moutains and their reflections
moutain(-50,300,150,100);
moutainReflection(-50,300,150,75);

moutain(50,300,110,50);
moutainReflection(50,300,110,37.5);

moutain(350,300,250,50);
moutainReflection(350,300,250,37.5);

//gradiant sky and sea
gradiantScreen (0,300);
gradiantScreenReverse (300,600);

//draw horizon
stroke(255);
strokeWeight(1);
line (0,300,width,300);

//set sun between 6AM to 6PM
if (dy>-125 & dy<425)
{
    sun(dy,125);
}

//creating lands
land2(-100,480,500,50);
land(-200,480,400,75);

//creating clouds (SECONDS)
clouds();

//creating ducks
duck(dx,350);
duck(dx+480,350);
duck(dx-480,350);

//creating reeds
reed2();
reed();

}

//gradiant sky
function gradiantScreen (y1,y2)
{       
    //for loop changing alpha values for small rectangles
    for (var k=0; k<(y2-y1); k++)
    {   
        noStroke();
        fill (255,220,220,150/(y2-y1)*k);
        rect (0,y1+k,width,1);
    }
}

//gradiant sea but the same as gradiant sky but in reverse
function gradiantScreenReverse (y1,y2)
{
    for (var k=0; k<(y2-y1); k++)
    {   
        noStroke();
        fill (255,220,220,180/(y2-y1)*k);
        rect (0,y2-k,width,1);
    }
}

//creating sun
function sun (y,r)
{       
    fill(255,255,180);
    //outline of the sun
    strokeWeight(5);
    stroke(255,255,230,50);
    var angle = acos((300-y)/(r/2));
    //make arc if parts of the sun is below horizon
    if (300-y<=r/2)
    {
        arc (width/2,y,r,r,-(Math.PI/2-angle)+Math.PI ,2*Math.PI + (Math.PI/2-angle),OPEN);
    }
    //dont make arc if it is not
    else
    {
        circle(width/2,y,r);
    }
}
//creating moon same as sun but having a different arc/circle for the missing piece
function moon (y,r)
{
    fill(255,255,180);
    strokeWeight(0);
    stroke(255,255,230,50);
    var anglem1 = acos((300-y)/(r/2));
    var anglem2 = acos((300-y+20/Math.sqrt(2))/(r/2-20));
    if (Math.abs(300-y)<r/2)
    {
        arc (width/2,y,r,r,-(Math.PI/2-anglem1)+Math.PI ,2*Math.PI + (Math.PI/2-anglem1),OPEN);
        //the missing piece
        if (300-y+20/Math.sqrt(2)<=(r/2-20))
        {   
            push();
            fill(80,50,180);
            arc (width/2+20/Math.sqrt(2),y-20/Math.sqrt(2),r-40,r-40,-(Math.PI/2-anglem2)+Math.PI ,2*Math.PI + (Math.PI/2-anglem2),OPEN);
            pop();
        }
        else
        {
            push();
            fill(80,50,180);
            circle(width/2+20/Math.sqrt(2),y-20/Math.sqrt(2),r-40);
            pop();
        }
    }
    else
    {
        circle(width/2,y,r);
        push();
        fill(80,50,180);
        //the missing piece
        circle(width/2+20/Math.sqrt(2),y-20/Math.sqrt(2),r-40);
        pop();
    }

}

//mountain reflection using bezier
function moutainReflection(mx,y,w,h)
{   
    fill(0,0,255);
    strokeWeight(0);
    bezier(mx,y,mx,y+h,mx+w,y+h*2,mx+w,y);
}

//mountaini using benzier
function moutain(mx,y,w,h)
{   
    fill(0,0,255);
    stroke(255,255,230,50);
    strokeWeight(2);
    bezier(mx,y,mx,y-h,mx+w,y-h*2,mx+w,y);
}

//making clouds
function clouds()
{
    fill(255,255,255,75);
    //getting seconds and milliseconds
    var dt = new Date();
    var x=dt.getSeconds()*8+dt.getMilliseconds()*0.008;;
    var y=480;
    push()
    translate (0,30);
    //original moving clouds
    rect(-50+x,120,200,30,15);
    rect(-70+x,155,150,20,10);
    rect(-100+x,100,150,16,8);
    //clones to make the animation look smooth
    rect(-50+x+y,120,200,30,15);
    rect(-70+x+y,155,150,20,10);
    rect(-100+x+y,100,150,16,8);

    rect(-50+x-y,120,200,30,15);
    rect(-70+x-y,155,150,20,10);
    rect(-100+x-y,100,150,16,8);
    //original moving clouds
    rect(200+x,20,250,30,15);
    rect(350+x,50,150,20,10);
    //clones to make the animation look smooth
    rect(200+x-2*y,20,250,30,15);
    rect(350+x-2*y,50,150,20,10);

    rect(200+x-y,20,250,30,15);
    rect(350+x-y,50,150,20,10);

    //seconds indicator circles
    fill(255);
    circle(0+x,120,20);
    circle(0+x-y,120,20);
    circle(0+x+y,120,20);

    pop();
}

//create reflection of the sun using noice function to make it expand
function sunReflection (y)
{   
    rando+=0.01;
    push()
    fill (255,255,255,180);
    strokeWeight(0);
    stroke (255,255,255,180);
    rectMode(CENTER);
    rect(width/2,300+(300-y)/2,noise(rando)*50+125,4,2);
    rect(width/2,300+(300-y)/2+8,noise(rando*2)*50+75,4,2);
    rect(width/2,300+(300-y)/2-8,noise(rando-1)*50+75,4,2);
    rect(width/2,300+(300-y)/2+16,noise(rando-0.5)*50+40,4,2);
    rect(width/2,300+(300-y)/2-16,noise(rando+0.5)*50+40,4,2);
    pop()
}
//land darker
function land(mx,y,w,h)
{
    fill(30,30,130);
    noStroke();
    bezier(mx,y,mx,y-h*2,mx+w,y-h,mx+w,y);
}
//land lighter
function land2(mx,y,w,h)
{
    fill(75,75,190);
    noStroke();
    bezier(mx,y,mx,y-h*2,mx+w,y-h,mx+w,y);
}
//duck
function duck(x,y)
{   


    fill(30,30,130,180);
    triangle (x-5,y,x-10,y+5,x-5,y+5);
    triangle (x+5,y+5,x+5,y+10,x+35,y+10);
    arc (x,y,10,10,Math.PI,2*Math.PI);
    rect (x-5,y,10,10);
    arc (x+15,y+10,40,25,0,PI,OPEN);
}
//reed
function reed()
{   
    //moving based on sin function
    var dr = Math.sin(Math.PI*drR);
    drR+=0.002;
    push();
    translate(100,500);
    rotate(dr/20);

    fill(180,120,30);
    rect(-0,-200,10,80,5);
    rect(3,-120,4,120);

    fill(190,130,60);
    rect(-40,-190,10,80,5);
    rect(-37,-110,4,120);

    fill(210,110,80);
    rect(-20,-160,10,80,5);
    rect(-17,-80,4,120);
    pop();

}
//second types of reed (blue)
function reed2()
{   
    
    var dr = Math.sin(Math.PI*drR);
    drR+=0.002;
    push();
    translate(50,500);
    rotate(-dr/20);

    fill(50,60,100);
    rect(-0,-200,10,80,5);
    rect(3,-120,4,120);

    fill(30,70,100);
    rect(-40,-190,10,80,5);
    rect(-37,-110,4,120);
    pop();
}

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.

/* 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();
}