JSFiddle - React, Tailwind, and code Playground

by balefrost

HTML

<canvas id="canvas" width="900" height="450"></canvas>
<button id="toggle">Toggle</button>

JavaScript

var numPoints = 10000;

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var points = [];
for  (var i = 0; i < numPoints; ++i) {
    points.push([Math.random() * 900, Math.random() * 450]);
}

var running = true;
var toggle = document.getElementById("toggle");
toggle.addEventListener("click", function() {
    running = !running;
    if (running) {
        requestAnimationFrame(draw);
    }
});

function draw(millis) {
    if (running) {
        requestAnimationFrame(draw);
    }
    var offsetX = Math.cos(millis / 2000) * 20;
    var offsetY = Math.sin(millis / 2000) * 20;
    ctx.clearRect(0, 0, 900, 450);
    for (var i = 0; i < numPoints; ++i) {
        ctx.beginPath();
        ctx.arc(points[i][0] + offsetX, points[i][1] + offsetY, 3, 0, 2 * Math.PI);
        ctx.fill();
    }
}
requestAnimationFrame(draw);