JSFiddle - React, Tailwind, and code Playground

by circlecube

HTML

<canvas id="canvas" width="600" height="600"></canvas>

JavaScript

$(function () {
        var canvas, canvas_w, canvas_h, context, width, height, x, y = false, radius = 10;
        var total_dots = 10;
        var fps = 24;
        
        canvas = $("#canvas")[0];
        canvas.width = $(window).width();
        canvas.height = $(window).height();
        canvas_w = $("#canvas").width();
        canvas_h = $("#canvas").height();
        context = canvas.getContext("2d");
        
        var dots = new Array();
        var drag_i = -1;
        var gravity = 0;
        var friction = .98;
        var bounce = -.96;
        var wrap = false;
        var time = 0;
        
        
        var circColor = []; 
        circColor[0] = '#260053';
        circColor[1] = '#40001b';
        circColor[2] = '#000057';
        circColor[3] = '#000000';
        
        var this_dot = {};

        function createDot(x, y, r, vx, vy){
            
            for (var j = 0; j < circColor.length; j++) {
                for (var i = 0; i < total_dots; i++) {
                    var this_dot = {
                        x: typeof(x) != 'undefined' ? x : Math.random() * canvas.width,
                        y: typeof(y) != 'undefined' ? y : Math.random() * canvas.height,
                        radius: typeof(r) != 'undefined' ? r : (i / total_dots) * Math.random() * 10,
                        vx: typeof(vx) != 'undefined' ? vx : Math.random() * 30 - 10,
                        vy: typeof(vy) != 'undefined' ? vy : Math.random() * 30 - 10,
                        color: typeof(color) != 'undefined' ? color : circColor[j],
                        speed: typeof(speed) != 'undefined' ? speed : 5
                    };
                    dots.push(this_dot);
                }
            }
        }
        createDot();
        
        draw();
        
        function update(){
            
            for (var i=0; i < dots.length; i++){
                var this_dot = dots[i];
                
                console.log(time);
              ...