JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id='world' width="160" height="160"></canvas>
JavaScript
var canvas = document.getElementById("world");
var ctx = canvas.getContext("2d");
var light_array = [];
var CW = canvas.width;
var CH = canvas.height;
var MAX_LIGHT = 3000;
var date = new Date();
var h_bar = {'radius':50,'color':[255,100,0]}; // R
var m_bar = {'radius':70,'color':[100,255,100]}; // G
var s_bar = {'radius':80,'color':[0,100,255]}; // B
function Light() {
this.x = Math.floor(Math.random()*CW);
this.y = Math.random()*(-20);
this.width = 2;
this.height = 2;
this.radius = 80 + Math.random()*120;
this.angle = Math.random()*360;
this.vangle = this.radius/80 * -1;
}
Light.prototype = {
centerX : CW/2,
centerY : CH/2,
x : 0,
y : 0,
width : 0,
height : 0,
shade : 0,
angle : 0,
vangle : 0,
max_fudge : 0.5,
min_fudge : -0.5,
vx : 0,
vy : 0,
shadeR : Math.floor(Math.random()*255),
shadeG : Math.floor(Math.random()*255),
shadeB : Math.floor(Math.random()*255),
color : function(){ return "rgb(" + this.shadeR + "," + this.shadeG + "," + this.shadeB + ")"; },
draw : function(ctx){
ctx.fillStyle = this.color();
ctx.fillRect(this.x + this.centerX, this.y + this.centerY, this.width, this.height);
},
cycle : function(ctx,date){
this.shadeR = 0;
this.shadeG = 0;
this.shadeB = 0;
this.x = this.radius * Math.cos(Math.PI/180 * this.angle);
this.y = this.radius * Math.sin(Math.PI/180 * this.angle);
this.angle = this.angle + this.vangle;
if(!(date.h_angle-this.angle < this.max_fudge && date.h_angle-this.angle > this.min_fudge && this.radius < h_bar.radius)
&& !(date.m_angle-this.angle < this.max_fudge && date.m_angle-this.angle > this.min_fudge && this.radius < m_bar.radius)
&& !(date.s_angle-this.angle < this.max_fudge && date.s_angle-this.angle > this.min_fudge && this.radius < s_bar.radius)){
...