I created a lighthouse clock. The ocean level represents the hour of the day with low tide as hour 0 or midnight and when the water level reaches the top of the canvas, or floods the island, it is 11:00. The lighthouse’s beam rotates each minute and the lighthouse beam flashes each second.
sketch
//amyhu
//amhyhu@adrew.cmu.edu
//section d
var h; //hour
var m; //minute
var s; //second
var theta = 6; //angle to increase by each minute
var r = 500; //radius of light beam
function setup() {
createCanvas(450,450);
background(220);
}
function draw() {
background("lightblue");
let h = hour();
let m = minute();
let s = second();
//water level is hour
fill("blue");
h = map(h,0,24,0,height);
rect(0, height-h, width, height);
//lighthouse object
drawLighthouse();
//island object
drawIsland();
//light beam speed is what minute it is
push();
translate(125,135);
var x = r*cos(radians(theta*m));
var y = r*sin(radians(theta*m));
//light beam flashing every second
if(s % 2 == 0){
stroke("yellow");
strokeWeight(18);
line(0,0,x,y);
}else{
stroke("white");
strokeWeight(18);
line(0,0,x,y);
}
pop();
}
function drawIsland(){
fill("lightyellow");
//noStroke();
ellipse(0,height,500);
}
function drawLighthouse(){
//rectMode(CENTER);
//stroke(1);
fill("white");
rect(110,120,30,50); //top white bit
fill("red");
rect(100,150,50,200); //red
fill("white");
rect(100,170,50,20); //white stripe
fill("yellow");
circle(125,135,20); //light circle
}