JSFiddle - React, Tailwind, and code Playground

connected js particles

by schrodingers

CSS

body,
html {
  margin: 0;
  /* width:100%; */
  overflow: hidden;
  background: #000;
}

JavaScript

var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;


// Design
var circleFill = "rgba(0,160,230,1)";

var Particle = function(sx, sy) {
  this.sx = sx;
  this.sy = sy;
  this.vx = 0.0;
  this.vy = 0.0;
};

// create particles
var n = 200;
var particles = [];
for (var i = 0; i < n; ++i) {
  var sx = Math.random() * width;
  var sy = Math.random() * height;
  particles[i] = new Particle(sx, sy);
}

var drawLine = function(x0, y0, x1, y1, alpha) {
  ctx.lineWidth = "hairline";
  ctx.strokeStyle = "rgba(255,250,250," + alpha + ")";

  ctx.beginPath();
  ctx.moveTo(x0, y0);
  ctx.lineTo(x1, y1);
  ctx.closePath();
  ctx.stroke();
};

var drawCircle = function(x, y, r) {
  ctx.fillStyle = circleFill;
  ctx.beginPath();
  ctx.arc(x, y, r, 0.0, Math.PI * 2.0);
  ctx.closePath();
  ctx.fill();
};

var mouseX = 0.0;
var mouseY = 0.0;

// Physics Properties
var particleInfluenceRadius = 26.0;
var particleAttractionRadius = 18.0;
var partcileAttrationForce = 1.0 / 200.0;
var partcileVelocityDecay = 0.99;
var particleMouseInfluenceRadius = 48.0;
var particleMouseRejectionForce = 1.0 / 96.0;

var solveAndDraw = function() {
  var strength;
  var i = particles.length;
  while (--i > -1) {
    var particle = particles[i];
    var j = i;
    while (--j > -1) {
      var neighbour = particles[j];
      var dx = particle.sx - neighbour.sx;
      var dy = particle.sy - neighbour.sy;
      var dd = Math.sqrt(dx * dx + dy * dy);
      if (dd > particleInfluenceRadius) {
        //-- out of radius
      } else if (dd > particleAttractionRadius) {
        //-- attraction
        particle.vx -= dx * partcileAttrationForce;
        particle.vy -= dy * partcileAttrationForce;
        neighbour.vx += dx * partcileAttrationForce;
        neighbour.vy += dy * partcileAttrationForce;
        strength = 1.0 - (dd -...