JSFiddle - React, Tailwind, and code Playground

Particles "knots" if they are close to each other

by schrodingers

HTML

<canvas id="canvas"></canvas>

CSS

body {
    overflow: hidden;
}

JavaScript

//document.addEventListener('mousedown', documentMouseDownHandler, false);
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame
})();

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = window.innerWidth,
    H = window.innerHeight;
canvas.width = W;
canvas.height = H;

// Some variables for later use
var particleCount = 150,
    particles = [],
    minDist = 70,
    dist;

// Function to paint the canvas black
function paintCanvas() {
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.fillRect(0, 0, W, H);
}

// Now the idea is to create some particles that will attract
// each other when they come close. We will set a minimum
// distance for it and also draw a line when they come
// close to each other.

// The attraction can be done by increasing their velocity as 
// they reach closer to each other

// Let's make a function that will act as a class for
// our particles.

function Particle() {
    // Position them randomly on the canvas
    // Math.random() generates a random value between 0
    // and 1 so we will need to multiply that with the
    // canvas width and height.
    this.x = Math.random() * W;
    this.y = Math.random() * H;


    // We would also need some velocity for the particles
    // so that they can move freely across the space
    this.vx = -1 + Math.random() * 2;
    this.vy = -1 + Math.random() * 2;

    // Now the radius of the particles. I want all of 
    // them to be equal in size so no Math.random() here..
    this.radius = 4;

    // This is the method that will draw the Particle on the
    // canvas. It is using the basic fillStyle, then we start
    // the path and after we use the `arc` function to 
    // draw our circle. The `arc` function accepts four
    // parameters in which first two depicts the position
    // of the center point of our arc as x and y coordinates.
    // The third value is for radius, then start angle, 
    // end angle and finally a...