JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

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

CSS

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

canvas {
  border: 2px solid white;
  background-color:#ffffff;
}

JavaScript

var grid = {};
grid.width = 1;
grid.height = 1;
grid.points = [];
grid.swarm = []
var SINE_MAG = 0;
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 'Poiret One'";
  ctx.lineWidth = 1;
 	ctx.fillText("electronoob",25,180);
  if (grid.points.length === 0) nonAlphaPointsOnGrid();
  ctx.clearRect(0,0,can.width,can.height);
  } else { 
  var i;
      ctx.fillStyle="rgba(0,0,0,1)";
          ctx.font = "20px arial";
  for(i=0;i<grid.points.length;i++) {

     // ctx.fillText(String.fromCodePoint(Math.round(Date.now() % 20000 + i+400)),grid.swarm[i].pos.x,grid.swarm[i].pos.y);  	
     distx = Math.sin(i)*Math.cos(SINE_MAG/20)*30;
     disty = Math.sin(i)*Math.cos(SINE_MAG/30)*6;
	   absx = Math.abs(distx);
     absy = Math.abs(disty);
     ctx.fillStyle="rgba("+Math.round(255/absx)+","+Math.round(255/absy)+","+Math.round(255/absy)+",0.5)";
     ctx.fillRect(
       grid.swarm[i].target.pos.x+distx,
       grid.swarm[i].target.pos.y+disty,
     4,2);
		}
  }
  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();}
     SINE_MAG += 1.0;
},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] > 80 ) {
        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) {
 ...