JSFiddle - React, Tailwind, and code Playground

by Alex

JavaScript

var canvas = document.body.appendChild(document.createElement("CANVAS")),ctx = canvas.getContext("2d"), starList = [], approx = 0.05, x_center = canvas.width >> 1, y_center = canvas.height >> 1, STAR_COUNT = 256, SCATTER = 50, SCALE = 2.5, DEPTH = 15, INIT_STAR_RANGE = 25, UPDATE_TIME = 16.666;//1

for(var i = STAR_COUNT; i--; starList.push({x: -INIT_STAR_RANGE + ((Math.random() * 2*INIT_STAR_RANGE) | 0), y: -INIT_STAR_RANGE + ((Math.random() * 2*INIT_STAR_RANGE) | 0), z: 1 + Math.random() * DEPTH}));//2

setInterval(function(){ctx.fillStyle = "#000"; //3
                       
ctx.fillRect(0, 0, canvas.width, canvas.height); //4
                       
for (i = 0; i < STAR_COUNT; ++i){((starList[i].z -= approx) < approx) && (starList[i] = {x: -INIT_STAR_RANGE + ((Math.random() * 2*INIT_STAR_RANGE) | 0),y: -INIT_STAR_RANGE + ((Math.random() * 2*INIT_STAR_RANGE) | 0),z: DEPTH}); //5
                                 
var shade = Math.floor((1 - starList[i].z / DEPTH) * 255); //6
 
ctx.beginPath(); //7
                                 
ctx.fillStyle = "rgb(" + shade + "," + shade + "," + shade + ")"; //8
                                 
ctx.arc(x_center + starList[i].x * (SCATTER / starList[i].z), y_center + starList[i].y * (SCATTER / starList[i].z), (1 - starList[i].z / DEPTH) * SCALE, 0, 2 * Math.PI, true); //9
                                 
ctx.fill(); //10
                                 
} //11
                       
}, UPDATE_TIME); //12