JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<canvas id=can width=800 height=300></canvas>

CSS

@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');

canvas {
  border: 2px solid white;
}

JavaScript

var grid = {};
grid.width = 4;
grid.height = 4;
grid.points = [];
grid.swarm = []

var tmp = document.createElement("canvas");
tmp.width = 800;
tmp.height = 300;
ctx = tmp.getContext("2d");

function draw(){
	ctx.clearRect(0,0,can.width,can.height);
	ctx.strokeStyle="blue";
  ctx.font = "130px 'Gloria Hallelujah'";
  ctx.lineWidth = 4;
 	ctx.strokeText("electronoob",25,180);
  if (grid.points.length === 0) nonAlphaPointsOnGrid();
}
draw();
tmp.remove();
/*
  var i;
  ctx.clearRect(0,0,can.width,can.height);
  for(i=0;i<grid.points.length;i++) {
  	ctx.fillRect(grid.points[i].x,grid.points[i].y,1,1);
  }
  window.requestAnimationFrame(draw);
*/
//window.requestAnimationFrame(draw);


function nonAlphaPointsOnGrid() {
	var x,y;
  d = ctx.getImageData(0,0,can.width,can.height);
  for (x=0;x<can.width;x+=grid.width) {
    for (y=0;y<can.height;y+=grid.height) {
      var o = 4 * (x + (y * can.width));
      if ( d.data[o+3] > 80 ) {
        grid.points.push({x: x, y: y});
        grid.swarm.push(new fly());
      } 
    }
  }
  console.log(grid.points.length,grid.swarm.length);
}

function gri(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function fly(tx,ty) {
  this.pos = new Vector(gri(0, can.width), gri(0, can.height));
  this.target = {};
  this.target.pos = new Vector(tx,ty);
  this.lpos = new Vector();
  this.acc = new Vector();
  this.vel = new Vector();
  fly.prototype.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);
  }
  fly.prototype.attract = function() {
    var force = new Vector(this.target.pos.x, this.target.pos.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...