sketch
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);
}
}
}
The abstract I created has four different scenes: sunrise, daytime, sunset, and night time; I want to create a reflection of the mountain and the sky; and the sun and moon goes with the current time, rising from left and falls from right.