Project-06: Abstract Clock

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.

cloud

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()
}