Project 06: Abstract Clock

var x=[]
var y=[]
var w=[] //height of rects at background
var a=[-50,0,150,250,300]
var b=[]
var l=[100,200,100,250,100]
var dx=[]
var dy=[]
var r
var spd
var theta
var sunposX
var sunposY

function setup(){
    createCanvas(480,300);
    background(220);
    for(var i=0;i<20;i++){          //setting up array for background gradiant
        y[i]=7.5*i;
        w[i]=height-15*i;
    }
    for(var n=0;n<5;n++){           //setting up the changes in x,y for reflection
        dx[n]=l[n]/20;          //the change in x
        dy[n]=l[n]/3*20;            //the change in y
        b[n]=200; 
    }
    r=height/2-20;
    //spd=1;
    //theta=90;



}

function draw(){
    BackColor();                                //draw backgrounds

    let Sec = map(second(), 0, 60, 0, radians(360)) - radians(90);
    let Min = map(minute() + norm(second(), 0, 60), 0, 60, 0, radians(360)) - radians(90);
    let Hour= map(hour(),0,24,0,radians(360))-radians(90);       // inspired by code here: https://p5js.org/examples/input-clock.html

    push();
    translate(width/2,height/2);
    drawingContext.shadowBlur=40;        
    drawingContext.shadowColor=color(251,114,39);       //glowing effect
    sunposX=r*cos(Hour);
    sunposY=r*sin(Hour);                           //polar coordinates
    fill(244,116,95);
    Sun(sunposX,sunposY); 
                          //draw sun
    drawingContext.shadowBlur=40;        
    drawingContext.shadowColor=color(255); 
    fill(238,243,196);
    Moon(sunposX,sunposY);                      //draw moon
    pop();



    Mountain();                                 //draw mountains
    WaterColor();

    ReflectionMount();
    

}

function Mountain(){            //draw mountain
    noStroke();
    fill(40);                   //color dark grey 
    for (var n=0;n<5;n++){
        triangle(a[n],b[n],a[n]+l[n]/2,b[n]-l[n]/3,a[n]+l[n],b[n]);
    }                   
}

function ReflectionMount(){
    noStroke();
    fill(140);                   //color dark grey
    for (var n=0;n<5;n++){
        triangle(a[n],b[n],a[n]+l[n]/2,b[n]+l[n]/6,a[n]+l[n],b[n]);
    }
    
}



function Sun(x,y){
    ellipse(-x,-y,40,40);
}

function Moon(x,y){
    ellipse(x,y,40,40);
}


function BackColor(){
    noStroke();
    let h=hour()
    if (h>=6 & h<8){                           //6am-8am sunrise
        for(var i=0;i<20;i++){
            fill(178+i*3,206-i*5/2,245-i*6);
            rect(0,y[i],width,w[i]);
        }
    }else if(h>=8 & h<18){                     //8am-6pm day time
        for(var i=0;i<20;i++){
            fill(120+i*5,200+i*3/2,239-i*0.5);
            rect(0,y[i],width,w[i]);
        }
    }else if(h>=18 & h<20){                    //6pm-8pm sunset
        for(var i=0;i<20;i++){
            fill(178+i*3,206-i*5/2,245-i*6);
            rect(0,y[i],width,w[i]);
        }
    }else if(h>=20 || h<6){                     //8pm-6am night time
        for(var i=0;i<20;i++){
            fill(44-i*3/2,46-i*3/2,88-i*5/2);
            rect(0,y[i],width,w[i]);
        }
    }

}

function WaterColor(){
    noStroke();
    let h=hour()
    if (h>=6 & h<8){                           //6am-8am sunrise
        for(var i=0;i<20;i++){
            fill(178+i*3,206-i*5/2,245-i*6);
            rect(0,200,width,w[i]/2);
        }
    }else if(h>=8 & h<18){                     //8am-6pm day time
        for(var i=0;i<20;i++){
            fill(120+i*5,200+i*3/2,239-i*0.5);
            rect(0,200,width,w[i]/2);
        }
    }else if(h>=18 & h<20){                    //6pm-8pm sunset
        for(var i=0;i<20;i++){
            fill(178+i*3,206-i*5/2,245-i*6);
            rect(0,200,width,w[i]/2);
        }
    }else if(h>=20 || h<6){                     //8pm-6am night time
        for(var i=0;i<20;i++){
            fill(44-i*3/2,46-i*3/2,88-i*5/2);
            rect(0,200,width,w[i]/2);
        }
    }

}