JSFiddle - React, Tailwind, and code Playground

by hardiksondagar

HTML

<canvas></canvas>
<div>
  <input id="debug-mode" type="checkbox" value="debug" />
  <p>Move your mouse over it...</p>
</div>

CSS

body {
  background: #18181C;
  color: white;
}

p,input
{
    opacity:0;
}

JavaScript

var canvas          = document.querySelector('canvas'),
    ctx             = canvas.getContext('2d'),
    particles       = [],
    noParticles     = 200,
    boxWidth        = 600,
    boxHeight       = 400,
    particleRadius  = 2,
    maxVelocity     = 6,
    minDistance     = 20,
    maxDistance     = 60,
    minDistanceDie  = 100,
    maxDistanceDie  = 150,
    sourceX         = boxWidth / 2,
    sourceY         = boxHeight / 2,
    debug           = false,
    mousePos        = {x : sourceX, y : sourceY},
    colors          = ['#C5F54A', '#FFB84D', '#496CC3', '#FF564D'],
    connections     = new Array (noParticles, noParticles);

canvas.width = boxWidth;
canvas.height = boxHeight;

function initConnections () {
    for (var i = 0; i < noParticles; i++)
        for (var j = 0; j < noParticles; j++)
            connections[i,j] = 0;
}

function randomNum (coeff) {
    "use strict";
    if (coeff === 'undefined') {
        coeff = 1;
    }
    return Math.random() * coeff;
}

function roundRandomNum (coeff) {
    "use strict";
    if (coeff === 'undefined') {
        coeff = 1;
    }
    return Math.round(Math.random() * coeff);
}

function getMousePos(canvas, event) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    };
}

// Particle "class"
function Particle () {
    "use strict";
    this.x = boxWidth / 2;
    this.y = boxHeight / 2;
    this.angle = 0;
    this.rgba = '#FFFFFF';
    this.totalDistance = 0;
    this.init = function () {
        this.angle = randomNum(89) + 1;
        this.velocity = roundRandomNum(maxVelocity - 1) + 1;
        this.distanceDie = roundRandomNum(maxDistanceDie - minDistanceDie) + minDistanceDie;
        this.colorIndex = roundRandomNum(3) + 1;
        this.rgba = colors[roundRandomNum(3) + 1];
        this.vy = Math.sin(this.angle) * this.velocity * (roundRandomNum() ? 1 : -1);
        this.vx = Math.cos(this.angle) * this.velocity *...