JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.0/seedrandom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sylvester/0.1.3/sylvester.min.js"></script>
<canvas id="stars"></canvas>
CSS
canvas {
background: black;
}
JavaScript
var c = document.getElementById('stars'),
ctx = c.getContext("2d"),
t = 0; // time
c.width = 300;
c.height = 300;
var w = c.width,
h = c.height,
d = c.height;
var randomMatrix = Matrix.Random(300,3),
starsMatrix = randomMatrix.x(w,h,d),
subtraction = starsMatrix.map(function(x,i,j){
switch (j) {
case 1:
return w/2;
break;
case 2:
return 0;
break;
case 3:
return d/2;
break;
default:
return 0;
break;
}
}).round(),
addition = starsMatrix.map(function(x,i,j){
switch (j) {
case 1:
return w/2;
break;
case 2:
return 0;
break;
case 3:
return 0;
break;
default:
return 0;
break;
}
}).round();
starsMatrix = starsMatrix.subtract(subtraction).round();
(function animate() {
t = t % Math.PI; // from 0 to pi
ctx.globalAlpha = 1;
var rotatedStars = starsMatrix.x(Matrix.RotationY(t)).add(addition).round().elements; // apply rotate transformation
for (var j = 0; j < rotatedStars.length; j++) {
(function draw(x,y,z) {
if (x<=0||y<=0||z<=0) return;
var r = Math.floor( 5 * (z/d) ) + 2, // radius
a = Math.floor( 0.2 * (z/d) ) + 0.8; // alpha
var gradient = ctx.createRadialGradient(x, y, 0, x, y, r);
gradient.addColorStop(0, 'rgba(255, 255, 255, ' + a + ')');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
ctx.beginPath();
ctx.arc(x, y, r, 0, 2*Math.PI);
ctx.fillStyle = gradient;
ctx.fill();
return draw;
...