scealux/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
    <link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

## sketch.js
let lastMilliMark;
let lastSec;
let cState;
let lastCState;
let particles = [];
let blinked = false;

function setup() {
  createCanvas(400, 400);

  fill(255);
  textAlign(CENTER);
  textFont('Inconsolata');
  textSize(32);
}

/*
Physics system would need...:
- Need array of columns with values for heights
- Scanning to check if any column is too high
- Particle motion for falling particles
- Array for falling particles
- Behavior for hitting the side of a column vs top of column.
*/

function addZero(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function addSpace(i) {
  if (i < 10) {
    i = " " + i;
  }
  return i;
}

function draw() {
  background(0);
  noStroke();

  //Convert hours and minutes into seconds, then all / (seconds in a day 86400)
  var percentOfDay = ((hour()*3600) + minute()*60 + second())/86400;
  //print(percentOfDay);

  triangle((width/2)-(400*percentOfDay), 400, (width/2)-2, 400-(percentOfDay*270), (width/2)+(400*percentOfDay), 400);

  var d = new Date();
  var hr = addSpace(hour());
  var min = addZero(minute());
  var blinker = "";

  //Get milliseconds since last second
  var secChange = d.getMilliseconds();

  //Show the colon for half of each second
  if (secChange < 500){
    blinker = " ";
    cState = true;
  } else {
    blinker = ":";
    cState = false;
  };

  if (cState != lastCState){
    if (cState == true) {
      //Trigger particles
      let t = new Particle(43);
      particles.push(t);
      let b = new Particle(53);
      particles.push(b);
    } else {
      print("Not now");
    }
  }
  lastCState = cState;

  for (let i = 0; i < particles.length; i++) {
    if (particles[i].cull()){
      particles.splice(i,1);
    } else {
      particles[i].update();
      particles[i].show();
    }
  }
  text(hr + blinker + min,(width/2),60);
  lastSec = second();
}

class Particle {
  constructor(y) {
    this.x = 200;
    this.y = y;
    this.vx = random(-1,1);
    this.vy = random(-5,1);
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.vy++;
  }

  show() {
    circle(this.x, this.y, 4);
  }

  cull() {
    if (this.x > 400 || this.x < 0 || this.y > 400 || this.y < 0){
        return true;
    }
  }
};

## style.css
html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8" />
	<link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
	</head>
	<body>
	<script src="sketch.js"></script>
	</body>
	</html>
	let lastMilliMark;
	let lastSec;
	let cState;
	let lastCState;
	let particles = [];
	let blinked = false;

	function setup() {
	createCanvas(400, 400);

	fill(255);
	textAlign(CENTER);
	textFont('Inconsolata');
	textSize(32);
	}

	/*
	Physics system would need...:
	- Need array of columns with values for heights
	- Scanning to check if any column is too high
	- Particle motion for falling particles
	- Array for falling particles
	- Behavior for hitting the side of a column vs top of column.
	*/

	function addZero(i) {
	if (i < 10) {
	i = "0" + i;
	}
	return i;
	}

	function addSpace(i) {
	if (i < 10) {
	i = " " + i;
	}
	return i;
	}

	function draw() {
	background(0);
	noStroke();

	//Convert hours and minutes into seconds, then all / (seconds in a day 86400)
	var percentOfDay = ((hour()3600) + minute()60 + second())/86400;
	//print(percentOfDay);

	triangle((width/2)-(400percentOfDay), 400, (width/2)-2, 400-(percentOfDay270), (width/2)+(400*percentOfDay), 400);

	var d = new Date();
	var hr = addSpace(hour());
	var min = addZero(minute());
	var blinker = "";

	//Get milliseconds since last second
	var secChange = d.getMilliseconds();

	//Show the colon for half of each second
	if (secChange < 500){
	blinker = " ";
	cState = true;
	} else {
	blinker = ":";
	cState = false;
	};

	if (cState != lastCState){
	if (cState == true) {
	//Trigger particles
	let t = new Particle(43);
	particles.push(t);
	let b = new Particle(53);
	particles.push(b);
	} else {
	print("Not now");
	}
	}
	lastCState = cState;

	for (let i = 0; i < particles.length; i++) {
	if (particles[i].cull()){
	particles.splice(i,1);
	} else {
	particles[i].update();
	particles[i].show();
	}
	}
	text(hr + blinker + min,(width/2),60);
	lastSec = second();
	}

	class Particle {
	constructor(y) {
	this.x = 200;
	this.y = y;
	this.vx = random(-1,1);
	this.vy = random(-5,1);
	}

	update() {
	this.x += this.vx;
	this.y += this.vy;
	this.vy++;
	}

	show() {
	circle(this.x, this.y, 4);
	}

	cull() {
	if (this.x > 400 \|\| this.x < 0 \|\| this.y > 400 \|\| this.y < 0){
	return true;
	}
	}
	};