For my abstract clock, the day/night period is from 7 am to 7 pm & vice versa. This means that the sun rises & sets at 7 am & 7 pm, respectively. The number of stars displayed on screen references what minute it is, and one complete rotation of a star = 1 minute. The half-circle path that the sun/moon takes can be used to tell the hour.
sketch
//Lily van Veen, section B, lvanveen@andrew.cmu.edu, project 6
var r; //red value
var g; //green value
var b; //blue value
var h; //hour
var m; //min
var s; //sec
var x = []; //x value of top point of stars
var y = []; //y value of top point of stars
var t = 0; // rotation/turn of stars
function setup() {
frameRate(30);
createCanvas(480, 480);
background(235, 205, 124);
for(var i = 0; i < 60; i++){
x[i] = random(30, width-30);
y[i] = random(30, height-240);
}
}
function draw() {
let h = hour();
let m = minute();
let s = second();
if(h > 7 & h < 19){ //"sunrise" and "sunset" will happen @ 7 am & 7 pm respectively
r = 235; //yellow
g = 205;
b = 124;
background(r, g, b);
}else if(h < 7 || h > 19){
r = 48; //blue
g = 68;
b = 133;
background(r, g, b);
}else if(h == 7){
r += .01; // w/ .01 change in color @ 30 fps, will take abt 2 min to fully shift from day to night (also about the same time a sunset/sunrise takes :) )
g += .01;
b -= .01;
background(min(r, 235), min(r, 205), max(b, 124));
}else if(h == 19){
r -= .01;
g -= .01;
b += .01;
background(max(r, 48), max(g, 68), min(b, 133));
}
for(var i = 0; i < m; i++){ // i is used to count the # of minutes; this is the section to draw the star - initally was going to put this under a function called drawStar(); but didn't function properly
push();
translate(x[i], y[i]);
rotate(radians(s*6));
fill(255, 249, 201); //light yellow
strokeWeight(0);
triangle(0, -5, -5, 5, 5, 5);
triangle(-5, 5, -7.5, 10, 0, 7.5);
triangle(5, 5, 7.5, 10, 0, 7.5);
triangle(0, 7.5, -5, 5, 5, 5);
triangle(-5, 5, -10, 0, 0, 0);
triangle(5, 5, 10, 0, 0, 0);
pop();
}
push(); //creates path of sun to better indicate hour of the day, "sun" visible from 7 am -> 7 pm
translate(240, 480);
rotate(radians((((h-7)*60)+m)*(360/1440)));
strokeWeight(0);
fill(255, 248, 189);
ellipse(-215, 0, 50, 50);
pop();
push(); //creates path of sun to better indicate hour of the day, "sun" visible from 7 pm -> 7 am
translate(240, 480);
rotate(radians((((h-7)*60)+m)*(360/1440)+180));
strokeWeight(0);
fill(255, 248, 189);
ellipse(-215, 0, 50, 50); //so the ellipse to carve out moon shape is the same as bg :)
if(h > 7 & h < 19){ //"sunrise" and "sunset" will happen @ 7 am & 7 pm respectively
r = 235;
is this visible for anyone?