JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id="main" width=500 height=500></canvas>

JavaScript

function rand(min, max) {
	return Math.random()*(max - min) + min;
}

let t = 0;
const ctx = document.getElementById('main').getContext('2d');

let points = [];
for(let i = 0; i<10000; i++) {
	points.push([250*Math.sqrt(Math.random()), rand(0, Math.PI*2)]);
}

let prev = 0;
function render(now) {
	let dt = (now - prev)/1000;
    prev = now;
	t += dt;
    
    ctx.clearRect(0, 0, 500, 500);
    
    ctx.beginPath();
    points.forEach(([r, theta]) => {
    	let v = 1;
        theta += 50*t * v / r;
    	let x = 250 + Math.cos(theta)*r;
    	let y = 250 + Math.sin(theta)*r;
    	ctx.moveTo(x+1, y);
        ctx.arc(x, y, 1, 0, Math.PI);
    });
    ctx.fill();
    
    requestAnimationFrame(render);
}

render(0);