JSFiddle - React, Tailwind, and code Playground

by Kelvin Russell

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 = 2;
grid.height = 2;
grid.points = [];
grid.swarm = []

ctx = can.getContext("2d");

function draw(){
	ctx.clearRect(0,0,can.width,can.height);
if (grid.points.length === 0) { 
	ctx.strokeStyle="blue";
  ctx.font = "120px arial";
  ctx.lineWidth = 2;
 	ctx.strokeText("idk",25,180);
  if (grid.points.length === 0) nonAlphaPointsOnGrid();
  ctx.clearRect(0,0,can.width,can.height);
  } else { 
  var i;
  for(i=0;i<grid.points.length;i++) {

    ctx.fillStyle="rgba(0,0,0,0.2)";
    ctx.font = "12px arial";
  
      ctx.fillText(String.fromCodePoint(Math.round(Date.now() % 10000 + i+400)),grid.swarm[i].pos.x,grid.swarm[i].pos.y);  //ctx.fillRect(grid.swarm[i].target.pos.x,grid.swarm[i].target.pos.y,10,10);
		}
  }
  window.requestAnimationFrame(draw);
}
setInterval(function () {
		for(i=0;i<grid.points.length;i++) {
    	grid.swarm[i].attract();
   		//grid.swarm[i].update();
    }
}, 10);
setInterval(function() {
     for(i=0;i<grid.points.length;i++) {grid.swarm[i].update();}
},32);
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] > 10 ) {
        grid.points.push({x: x, y: y});
        grid.swarm.push(new fly(x,y));
      } 
    }
  }
  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();
  this.ree = 1e3;
  this.re = 0;
  fly.prototype.update = function() {
    this.lpos.x = this.pos.x;
    this.lpos.y = this.pos.y;
    this.pos.add(this.vel);
   ...