JSFiddle - React, Tailwind, and code Playground

Vector 2d Es 6 experiments

by schrodingers

CSS

body {
  overflow: hidden;
}

Babel + JSX

let canvas, ctx;
let mouseX, mouseY;
var w, h;
var isMouseDown = false;
var isMouseMove = false;
let particles = [];

function init(width = window.innerWidth, height = window.innerHeight) {
  canvas = document.createElement("canvas");
  ctx = canvas.getContext("2d");
  document.body.appendChild(canvas);
  w = canvas.width = width;
  h = canvas.height = height;
  window.addEventListener('mousedown', onMouseDown, false);
  window.addEventListener('mouseup', onMouseUp, false);
  window.addEventListener('mousemove', onMouseMove, false);
  window.addEventListener('resize', redraw, false);
  clrs = ['#e91e63', '#03a9f4', '#8bc34a', '#ffeb3b', '#ff5722'];
 	for (let i = 0; i < 5; i++) {    
 particles.push(new Particle(Vector(random(0,w), random(0,h)),15)); 
}
}

function draw() {
 ctx.fillStyle = 'rgba(10,10,10, 0.61)';
 ctx.fillRect(0, 0, w, h);
   //particles.push(new Particle(Vector(random(0,w), random(0,h)),15));     	

  if (isMouseDown === true || isMouseMove === true) {     
     for (var particle of particles) {
   	particle.move();
    particle.draw();
   }
   /*
   
    particles.forEach(function(particle) {
    particle.move();
    particle.draw();
    if (particle.isDead){particles.splice(particle,1);}
    });
*/
  }
}
  



function animate() {
  window.requestAnimationFrame(animate);
  draw();
}

init();
animate();


function redraw() {
  w = window.innerWidth, h = window.innerHeight;
}

function onMouseDown(e) {
  isMouseDown = true;
}

function onMouseUp(e) {
  isMouseDown = false;
}

function onMouseMove(e) {
  if (!e) var e = window.event;
  mouseX = e.clientX;
  mouseY = e.clientY;
  isMouseMove = true;
}

function random(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}


function Particle(loc, size) {
  this.loc =  new Vector(x, y);
  this.vel =  new Vector(random(-3,3), random(-3,3));
  this.size = size;
  this.life = 700;
  this.color = clrs[random(0, clrs.length)];
}


Particle.prototype.draw = function() {
  ctx.fillStyle =...