JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

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

<audio id="audio" controls>
  <source src="song.m4a" type="audio/mpeg">
</audio>

CSS

body {
  background-color: grey;
}

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var width = window.innerWidth;
var height = window.innerHeight;
var xCirc;
var yCirc;
var rCirc;
var animate = true;
var shapes = ['circle', 'square', 'triangle', 'heart', 'star'];
var shape = 0;
var song = document.getElementById("audio");
song.autoplay = true;
song.load();

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

makeParticles();
//makeShapes();

function click() {
  shape++;
  if (shape > shapes.length - 1) {
    shape = 0;
  }

  var pType = shapes[shape];
  for (var i = 0; i < particles.length; i++) {
    particles[i].particleType = pType;
  }
}

function doKeyDown(evt) {
  alert(event.keyCode);
}

start();


function makeParticles() {
  xCenter = canvas.width / 2;
  yCenter = canvas.height / 2;
  particles = [];
  for (var i = 0; i < 1000; i++) {
    particles.push(new Particle(shapes[shape]));
  }
}

function Circle(r1, r2, gradient2) {
  var r1 = 150;
  var r2 = canvas.width - (canvas.width / 2);
  var gradient1 = context.createRadialGradient(width / 2, height / 2, r1, width / 2, height / 2, r2);

  gradient1.addColorStop(0, "#46C7C7");
  gradient1.addColorStop(1, "#0C090A");
  context.fillStyle = gradient1;
  context.fillRect(0, 0, canvas.width, canvas.height);

  var gradient2 = context.createRadialGradient(width / 2, height / 2, 120, width / 2, height / 2, 150);
  gradient2.addColorStop(0, "black");
  gradient2.addColorStop(.5, "#008080");
  gradient2.addColorStop(1, "#54C571");

  context.beginPath();
  context.arc(width / 2, height / 2, 150, 0, 2 * Math.PI, true);
  context.fillStyle = gradient2;
  context.fill();
}

function start() {

  if (animate) {
    window.requestAnimationFrame(start);
  }

  draw();
  moveParticles();
  canvas.addEventListener("click", click);
  document.addEventListener("keypress", doKeyDown, false);
  console.log(num);
}



function Particle() {
  this.x = Math.floor((Math.random() * canvas.width) + 1);
  this.y =...