JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id=can width=2000 height=2000></canvas>

CSS

canvas {
  border: 2px solid white;
  background-color: black;
  width: 400px;
  height: 400px;
}

JavaScript

//swarm
function constrain(v, min, max) {
  return (Math.min(max, Math.max(min, v)));
}

function Vector(x = 0, y = 0) {
  this.x = x;
  this.y = y;
  this.sub = function(b) {
    this.x -= b.x;
    this.y -= b.y;
  }
  this.add = function(b) {
    this.x += b.x;
    this.y += b.y;
  }
  this.mag = function() {
    return Math.sqrt(Math.abs(this.x) ^ 2 + Math.abs(this.y) ^ 2);
  }
  this.magsq = function() {
    return Math.abs(this.x) ^ 2 + Math.abs(this.y) ^ 2;
  }
  this.div = function(value) {
    this.x /= value;
    this.y /= value;
  }
  this.mul = function(value) {
    this.x *= value;
    this.y *= value;
  }
  this.setMag = function(value) {
    /*  Normalize 
    //github.com/processing/processing/blob/master/core/src/processing/core/PVector.java
    float m = mag();
    if (m != 0 && m != 1) {
      div(m);
    }
    */
    m = this.mag();
    if (m != 0 && m != 1) {
      this.div(m);
    }
    // multiply by value
    this.mul(value);
  }
}
var V = new Vector();

var debug = "idle";
var swarmSize = 4;
var attractorSize = 1;
var ROTATION = 0;
var RADIUS = 30;

function fly() {
  this.pos = new Vector(gri(500, 1500), gri(500, 1500));
  this.lpos = new Vector();
  this.acc = new Vector();
  this.vel = new Vector();
  this.update = function() {
    this.lpos.x = this.pos.x;
    this.lpos.y = this.pos.y;
    this.pos.add(this.vel);
    //this.vel.mul(0);
    this.vel.add(this.acc);
    this.acc.mul(0);
  }
  this.attract = function(target) {
    var force = new Vector(target.x, target.y);
    force.sub(this.pos);
    distance = force.mag();
    var G = 2;
    var strength = G / ((distance ^ 2));
    //strength = constrain(strength, 0, 1);
    force.setMag(strength/100);
    this.acc.add(force);
  }
}

function att(x = 1000, y = 1000) {
  this.pos = new Vector(x, y);
}

var swarm = [];
for (i = 0; i < swarmSize; i++) {
  swarm.push(new fly());
}
var attractors = [];
attractors = getPolyVectors(1000, 1000, attractorSize, RADIUS, ROTATION);

function...