JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<canvas></canvas>

JavaScript

$(document).ready( function() {

    //This code will run after your page loads
    var canvas = document.querySelector('canvas');
    var context = canvas.getContext('2d');
    var particles = [];
    var counter = 0;
    
    canvas.width = $(window).width();
    canvas.height = $(window).height();
    

    function draw(){
        window.requestAnimationFrame(draw);
        context.clearRect(0,0,canvas.width,canvas.height);
        particles[(counter++ % 1000)] = [0,0,Math.random()-0.5,Math.random()-0.5];
        console.log(particles);
        for(var k=0; k < particles.length; k++){
            context.fillRect(
                canvas.width/2 + particles[k][0],
                canvas.height/2 +  particles[k][1],
                5, 5
            );
            particles[k][1] = particles[k][1] + particles[k][2];
            particles[k][0] = particles[k][0] + particles[k][3];
        }
    }

    draw();
});