This project posed a large challenge in how I was going to sync up each lightning strike on the minute, but it turned out to be a really simple solution once I sat down to get it. On each minute, lightning strikes as a line and strokeWeight decreases over the minute, causing it to fade like a real strike. Every hour, another cloud is added until it resets at 00:00.
var cloudx = [] //where to draw each cloud
var cloudy = []
var strikeTime; //the timing of the lightning strike
function setup() {
createCanvas(480, 480);
}
function draw() {
numClouds = hour() //adds a cloud for every hour
strikeTime = ((60 - second()) / 10) //lightning strikes on the minute and fades
background(48, 4, 181)
for (m = 0; m <= numClouds; m ++) { //randomly determines cloud coordinates and sends to array
cloudx.push(random(40, 440))
cloudy.push(random(40, 440))
}
for (i = 0; i < numClouds; i++) { //draws cloud and lightning
cloud(cloudx[i], cloudy[i], 15)
strike(cloudx[i], cloudy[i])
}
}
function cloud(cloudx, cloudy, cloudsize){ //instructions for each cloud
push()
translate(cloudx, cloudy)
fill(40, 40, 40, 188)
ellipse(-10, 0, cloudsize)
ellipse(0, -10, cloudsize)
ellipse(0, 0, cloudsize)
ellipse(10, 0, cloudsize)
pop()
}
function strike(cloudx, cloudy){ //instructions for lightning
push()
translate(cloudx, cloudy)
strokeWeight(strikeTime)
stroke(255, 255, 0)
line(0, 0, 10, 10)
line(10, 10, -20, 20)
line(-20, 20, 15, 30)
pop()
}