JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/pixi.js/1.5.1/pixi.js"></script>
<canvas id="view"></canvas>
JavaScript
init();
function randInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randFloat(min, max, length)
{
var number = Math.random() * (max - min) + min;
return parseFloat(number.toFixed(length));
}
function init()
{
var stage = new PIXI.Stage(0x000000);
var renderer = PIXI.autoDetectRenderer(400, 300);
document.body.appendChild(renderer.view);
var count = 300;
var dots = {};
for (var i = 0; i < count; i++)
{
dots[i] = new PIXI.Graphics();
dots[i]._x = randInt(0, 10);
dots[i].__x = dots[i]._x;
dots[i]._y = randInt(10, 16);
dots[i]._v = randFloat(0.5, 1, 2);
dots[i]._a = 0.1;
dots[i]._color = 255;
stage.addChild(dots[i]);
}
requestAnimFrame( animate );
function animate()
{
for (var i = 0; i < count; i++)
{
var maxX = {
10: randInt(10, 20),
11: randInt(20, 30),
12: randInt(30, 40),
13: randInt(40, 50),
14: randInt(30, 40),
15: randInt(20, 30),
16: randInt(10, 20),
}
var dC = 255 / (maxX[dots[i]._y] - dots[i].__x);
dots[i]._color -= parseInt(dC);
if (dots[i]._color <= 16)
{
var color = '10';
}
else
{
var color = dots[i]._color.toString(16);
}
color = '0xFF'+color+'00';
dots[i].clear();
dots[i]._v += dots[i]._a;
dots[i]._x += dots[i]._v;
dots[i].beginFill(color);
dots[i].drawRect(dots[i]._x, dots[i]._y, 1, 1);
dots[i].endFill();
if (dots[i]._x > maxX[dots[i]._y])
{
dots[i].clear();
dots[i]._x = randInt(0, 10);
dots[i].__x = dots[i]._x;
dots[i]._y = randInt(10, 16);
dots[i]._v = randFloat(0.5, 1, 2);
dots[i]._a = 0.1;
dots[i]._color = 255;
}
}
renderer.render(stage);
requestAnimFrame( animate );
}
}