JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<canvas id="canvas"></canvas>

CSS

body {
  margin: 0;
  overflow: hidden;
}

canvas {
  background: #fad390;
  /*cursor: none;*/
}

JavaScript

class util {
  static rand_int_range(start, end) {
    return Math.floor(
      util.rand_float_range(start, end)
    );
  }

  static rand_float_range(start, end) {
    return Math.random() * (end - start) + start;
  }

  static rand_colour() {
    const array = [
      '#f8c291', '#6a89cc', '#82ccdd', '#b8e994',
      '#f6b93b', '#e55039', '#4a69bd', '#60a3bc',
      '#78e08f', '#fa983a', '#eb2f06', '#1e3799',
      '#3c6382', '#38ada9', '#e58e26', '#b71540',
      '#0a3d62', '#079992'
    ];

    return array[Math.floor(Math.random() * array.length)];
  }

  static distance(obj1, obj2) {
    const distX = obj1.x - obj2.x;
    const distY = obj1.y - obj2.y;

    return Math.sqrt(distX * distX + distY * distY);
  }
  
  static collision(obj1, obj2) {
    return obj1.radius + obj2.radius >= util.distance(obj1.position, obj2.position);
  }
}

class Vector2D {
  constructor(x, y) {
    this.x = x;
    this.y = y;

    return this;
  }

  add(vector) {
    this.x += vector.x;
    this.y += vector.y;

    return this;
  }

  subtract(vector) {
    this.x -= vector.x;
    this.y -= vector.y;

    return this;
  }

  multiply(vector) {
    this.x *= vector.x;
    this.y *= vector.y;

    return this;
  }

  divide(vector) {
    this.x /= vector.x;
    this.y /= vector.y;

    return this;
  }
}

class Viewable {
  constructor() {
    window.requestAnimationFrame(this.update.bind(this));

    return this;
  }

  update() {
    setTimeout(() => window.requestAnimationFrame(this.update.bind(this), 2000));

    return this.draw();
  }

  draw() {
    return this;
  }
}

class Dot extends Viewable {
  constructor(app) {
    super();

    this.app = app;

    this.colour = util.rand_colour();

    this.radius = 15;
    this.maxRadius = util.rand_int_range(45, 55);
    this.growth = util.rand_float_range(0.09, 0.2);

    this.position = new Vector2D(
      util.rand_float_range(0, app.width), util.rand_float_range(0, app.height)
    );

    this.static = false;

    this.life...