JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<canvas id="canvas" width="640" height="480"></canvas>

JavaScript

let canvas = document.getElementById("canvas"),
		ctx = canvas.getContext("2d");

class P {

	constructor()
  {
  	this._id = this.guid();
    this._gen = Math.round(Math.random());
    this._x = this.randomIntFromInterval(1, 640);
    this._y = this.randomIntFromInterval(1, 480);
    this._color = this._gen ? "#52a9f5" : "#f552d6";
    this._partner = null;
    
    ctx.fillRect(this._x, this._y, 2, 2);
    ctx.fillStyle = this._color;
  }
  
  get id() { return this._id; }
  
  guid() {
    function s4() {
      return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
  }
  
  randomIntFromInterval(min,max)
  {
      return Math.floor(Math.random()*(max-min+1)+min);
  }

}

let pop = 10000,
		ppl = [];

for (let i = 0; i < pop; i++)
{
		let test = new P();
		ppl.push(test)
}

function sortByPosition(a, b){
  if (a._x == b._x) return a._y - b._y;
  return a._x - b._x;
}

ppl.sort(sortByPosition);
for (let p = 0; p < ppl.length; p++)
{
	console.log(ppl[p], p)
  let c = 0;
  while (ppl[p]._partner == null)
  {
  	if (typeof ppl[p] != 'undefined')
    {
    	if (typeof ppl[c] === 'undefined')
      {
      	
      }
    	if (ppl[c]._gen != ppl[p]._gen && ppl[c]._partner == null)
      {
        ppl[p]._partner = ppl[c]._id;
        ppl[c]._partner = ppl[p]._id;
      }
    }
    c++;
  }
}

console.log(ppl)

setInterval(function(){
		console.log('test')
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    for (let p = 0; p < ppl.length - 1; p++)
    {
    		let partner = ppl.map(function(e){ return e._id; }).indexOf(ppl[p]._partner);
        let x = ppl[p]._x == ppl[partner]._x ? ppl[p]._x : ppl[p]._x < ppl[partner]._x ? ppl[p]._x++ : ppl[p]._x--;
        let y = ppl[p]._y == ppl[partner]._y ? ppl[p]._y : ppl[p]._y < ppl[partner]._y ? ppl[p]._y++ : ppl[p]._y--;
        ctx.fillRect(x, y, 2, 2);
    		ctx.fillStyle =...