JSFiddle - React, Tailwind, and code Playground

by techunter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/4.3.0/math.min.js"></script>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

JavaScript

var flock;
let running = true;
const W = 800,
  H = 600;

function setup() {
  createCanvas(W, H);
  frameRate(20);
  createP('<input type="button" onclick="toggleLoop()" value="pause/run"/>');
  createP('<input type="button" onclick="clearCanvas()" value="clear"/>');

  flock = new Flock();
  // Add an initial set of boids into the system
  /* for (var i = 0; i < 100; i++) {
    var b = new Boid(width/2,height/2);
    flock.addBoid(b);
  }*/
  //noLoop();
}

function toggleLoop() {
  if (running) noLoop();
  else loop();
  running = !running;
}

function clearCanvas() {
  flock.clear();
  clear();
}

function draw() {
  background(0);
  flock.run();
}

function mouseClicked() {
  flock.addBoidSet(mouseX, mouseY);
}
const BOID_R = 6;
const BOID_LIFETIME = 20 * 10; //10s

function addShape(x, y) {

}
// Add a new boid into the System
//function mouseDragged() {
//  flock.addBoid(new Boid(mouseX, mouseY));
//}

// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com

// Flock object
// Does very little, simply manages the array of all the boids

function Flock() {
  // An array for all the boids
  this.boidSets = []; // Initialize the array
}
Flock.prototype.clear = function() {
  this.boidSets = [];
}
Flock.prototype.run = function() {
  let l = this.boidSets.length;
  let newArr = [];
  for (let i = 0; i < l; i++) {
    if (this.boidSets[i].run()) {
      newArr.push(this.boidSets[i]); // Passing the entire list of boids to each boid individually
    } else {
      console.log(this.boidSets[i].boids.length + ' boids died')
    }
  }

  this.boidSets = newArr;
  newArr = null;

}

Flock.prototype.addBoidSet = function(x, y) {
  this.boidSets.push(new BoidSet(x, y, this));
}

function BoidSet(x, y, flock) {
  this.boids = [];
  this.life = -1;
  this.flock = flock;

  if (x > W || y > H) return;
  this.life = BOID_LIFETIME;
  this.alpha = 100;
  let depthRatio = (y / H).toFixed(3);
  let shapeHeight = depthRatio * 2 / 3 * H;
  let shapeWidth =...