JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!--- raf animation -->
<canvas id="c"></canvas>

CSS

html, body {
  background-color: #000;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
  margin: 0 auto;
}

JavaScript

var count = 100; // number of things

// set up drawing area
var w = window.innerWidth;
var h = window.innerHeight;

var c = document.getElementById("c");
c.width = w;
c.height = h;

var ctx = c.getContext("2d");
ctx.globalCompositeOperation = "color-dodge"; // this kills the browser

var points = []; // things

// thing constructor
var Point = function () {
  this.m = 1; // max speed
  this.s = w / 4; // max size of thing
	this.shuffle = function () {
    this.x = range(0, w, false); // x coordinate
    this.y = range(0, h, false); // y coordinate
    this.r = range(0, this.s, false); // radius
    this.mx = (range(0, this.m, false)) - (this.m / 2); // movement speed x
    this.my = (range(0, this.m, false)) - (this.m / 2); // movement speed y
		this.c = {
      r: range(65, 75, true),
      g: range(55, 65, true),
      b: range(25, 35, true)
    }
		// this.fill = "rgba(70, 60, 30, 0.2)";
    this.fill = "rgba(" + this.c.r + ", " + this.c.g + ", " + this.c.b + ", 0.2)";
  }
  this.move = function () {
    this.x += this.mx;
    this.y += this.my;
    if (this.x > w + this.r || this.x < 0 - this.r) {
			this.mx *= -1;
    }
    if (this.y > h + this.r || this.y < 0 - this.r) {
			this.my *= -1;
    }
  }
  this.draw = function () {
    ctx.fillStyle = this.fill;
    ctx.beginPath();
    // ctx.rect(this.x - this.r, this.y - this.r, this.r * 2, this.r * 2);
    ctx.rect(this.x - this.r, 0, this.r * 2, h);
	  ctx.fill();  
  }
}

// fill up array of things
for (var i = 0; i < count; i++) {
	points.push(new Point());
  points[i].shuffle();
}

// draw the things
function drawPoints (timestamp) {
	ctx.clearRect(0, 0, w, h);
  for (var i = 0; i < count; i++) {
		points[i].move(); 
    points[i].draw();
	}
  window.requestAnimationFrame(drawPoints);
}

// go!
window.requestAnimationFrame(drawPoints);

function range(low, high, whole) {
  if (low > high) {
    high = low + (low = high) - high; // swap values
  }
  var x = Math.random() * (high - low) + low;
  if...