JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id='canvas'></canvas>

CSS

body, html{
  margin: 0;
  overflow: hidden;
}

canvas{
  background: #431f12;
  margin: 0;
}

JavaScript

var pi = Math.PI;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var width = window.innerWidth;
var height = window.innerHeight;

canvas.width = width;
canvas.height = height;

canvasObjects = [];

colors = ['#F428D9', '#479bf0', '#842dea'];

function getRandomLineLength() {
  return Math.floor(Math.random()*50+30);
}

minCircleR = 7;
function getRandomCircleR() {
	return Math.floor(Math.random()*12+minCircleR);
}

function getColorThatIsnt(n) {
	if(colors.length == 1) return 0;
  var r = Math.floor(Math.random()*(colors.length-1));
  if(r>=n) r++;
  return r;
}

function areaForItemClear(item, ignoreArray){
	var clearance = 8;
  
  var b = item.getBoundingBox(clearance);
  
  if(b.xmin < clearance) return false;
  if(b.xmax > width-clearance) return false;
  if(b.ymin < clearance) return false;
  if(b.ymax > height-clearance) return false;
  
  for(var i=0; i<canvasObjects.length; i++) {
  	if(ignoreArray.indexOf(canvasObjects[i]) != -1) continue;
  	var b2 = canvasObjects[i].getBoundingBox(clearance);
    if(boxesIntersect(b, b2)) return false;
  }
  
  return true;
}

function boxesIntersect(a, b) {
	var c1 = a.xmax < b.xmin;
  var c2 = a.xmin > b.xmax;
  var c3 = a.ymax < b.ymin;
  var c4 = a.ymin > b.ymax;
  return !(c1 || c2 || c3 || c4);
}

function ExpandingCircleObject(x, y, r, color, objectsToIgnore, blacklistedDirections){
  this.type='circle';
  this.x = x;
  this.y = y;
  this.r = r;
  this.color = color;
  this.objectsToIgnore = objectsToIgnore || [];
  this.objectsToIgnore.push(this);
  this.blacklistedDirections = blacklistedDirections || {};
  
  this.step = 0;
  this.maxSteps = Math.floor(r/1.3);
  
  this.drawOnce = function() {
  	ctx.beginPath();
    ctx.arc(this.x, this.y, this.r*this.step/this.maxSteps, 0, 2*pi);
    ctx.lineWidth = 4;
    ctx.strokeStyle = colors[this.color];
    ctx.stroke();
  }
  
  this.increaseStep = function() {
  	if(this.step == this.maxSteps) return;
  	if(this.step ==...