import { cos, ππ, random, /* saw, */ sin } from './util/math';
// import { getWaveFn } from './util/wave';

import gameLoop from './lib/game-loop';
import objectPool from './lib/object-pool';

import { canvas, w, h } from './app/canvas';
import render from './app/render';

let mouseDown = false;
let mouseX = w / 2;
let mouseY = h / 2;

function onMouseDown(event) {
  event.preventDefault();
  event.stopPropagation();
  mouseDown = true;
}

function onMouseUp(event) {
  event.preventDefault();
  event.stopPropagation();
  mouseDown = false;
}

function onMouseMove(event) {
  event.preventDefault();
  event.stopPropagation();
  mouseX = event.offsetX;
  mouseY = event.offsetY;
}

function onMouseEnter(event) {
  event.preventDefault();
  event.stopPropagation();
  canvas.addEventListener('mousemove', onMouseMove);
}

function onMouseLeave(event) {
  event.preventDefault();
  event.stopPropagation();
  canvas.removeEventListener('mousemove', onMouseMove);
  mouseX = w / 2;
  mouseY = h / 2;
}

window.addEventListener('mousedown', onMouseDown);
window.addEventListener('mouseup', onMouseUp);

canvas.addEventListener('mouseenter', onMouseEnter);
canvas.addEventListener('mouseleave', onMouseLeave);

const pool = objectPool(5000);

function reset(p) {
  p.px = mouseX;
  p.py = mouseY;
  p.alpha = 1;

  const theta = random() * ππ;
  const radius = 10 + random() * 20;
  p.vx = radius * cos(theta);
  p.vy = radius * sin(theta);
}

function isInBounds({ px, py }) {
  const vertical = py < h;
  const horizontal = 0 < px && px < w;
  return vertical && horizontal;
}

const drag = 0.9;
const grav = 0.4;
const fade = 0.9;

// initialize
pool.initialize(reset);

function game(currentTime, deltaTime) {
  let count = 0;
  let total = mouseDown ? 50 : 0;

  pool.update(p => {
    // activate
    if (count < total && !p.active) {
      reset(p);
      p.active = true;
      count++;
    }

    // update
    p.px += p.vx;
    p.py += p.vy;

    p.vx *= drag;
    p.vy *= drag;

    p.vy += grav;
    p.alpha *= fade;

    // deactivate
    if (p.active) p.active = isInBounds(p) && p.alpha > 0.01;
  });

  render({
    particles: pool.active,
    deltaTime,
  });
}

const loop = gameLoop(game);
loop.start();
// loop.goto(0);
// for (let i = 0; i < 10; ++i) {
//   loop.goto(i);
// }
// // render
// render({
//   particles: pool.active,
//   deltaTime: 1000 / 60,
// });

@@ -22,19 +22,8 @@
 dom,
- /* saw, */
  sin
@@ -48,52 +48,8 @@
 th';
-%0A// import %7B getWaveFn %7D from './util/wave';
 %0A%0Aim
@@ -143,16 +143,8 @@
 rt %7B
- canvas,
  w, 
@@ -207,708 +207,83 @@
 r';%0A
-%0Alet mouseDown = false;%0Alet mouseX = w / 2;%0Alet mouseY = h / 2;%0A%0Afunction onMouseDown(event) %7B%0A  event.preventDefault();%0A  event.stopPropagation();%0A  mouseDown = true;%0A%7D%0A%0Afunction onMouseUp(event) %7B%0A  event.preventDefault();%0A  event.stopPropagation();%0A  mouseDown = false;%0A%7D%0A%0Afunction onMouseMove(event) %7B%0A  event.preventDefault();%0A  event.stopPropagation();%0A  mouseX = event.offsetX;%0A  mouseY = event.offsetY;%0A%7D%0A%0Afunction onMouseEnter(event) %7B%0A  event.preventDefault();%0A  event.stopPropagation();%0A  canvas.addEventListener('mousemove', onMouseMove);%0A%7D%0A%0Afunction onMouseLeave(event) %7B%0A  event.preventDefault();%0A  event.stopPropagation();%0A  canvas.removeEventListener('mousemove', onMouseMove);%0A  mous
+import %7B setTimeout %7D from 'timers';%0A%0Alet shouldActivate = false;%0Alet activ
 eX =
@@ -294,14 +294,17 @@
  2;%0A
-  mous
+let activ
 eY =
@@ -315,246 +315,64 @@
  2;%0A
-%7D%0A%0Awindow.addEventListener('mousedown', onMouseDown);%0Awindow.addEventListener('mouseup', onMouseUp);%0A%0Acanvas.addEventListener('mouseenter', onMouseEnter);%0Acanvas.addEventListener('mouseleave', onMouseLeave);%0A%0Aconst pool = objectPool(5000)
+%0Aconst drag = 0.95;%0Aconst grav = 0.2;%0Aconst fade = 0.995
 ;%0A%0Af
@@ -399,20 +399,21 @@
  p.px = 
-mous
+activ
 eX;%0A  p.
@@ -417,20 +417,21 @@
  p.py = 
-mous
+activ
 eY;%0A  p.
@@ -510,16 +510,17 @@
 ) * 20;%0A
+%0A
   p.vx =
@@ -720,70 +720,32 @@
 nst 
-drag = 0.9;%0Aconst grav = 0.4;%0Aconst fade = 0.9;%0A%0A// initialize
+pool = objectPool(5000);
 %0Apoo
@@ -816,46 +816,67 @@
 let 
-count = 0;%0A  let total = mouseDown ? 5
+numActivated = 0;%0A  let numToActivate = shouldActivate ? 10
 0 : 
@@ -928,21 +928,36 @@
 if (
-count %3C total
+numActivated %3C numToActivate
  && 
@@ -1018,13 +1018,20 @@
     
-count
+numActivated
 ++;%0A
@@ -1319,210 +1319,304 @@
 %0A%7D%0A%0A
-const loop = gameLoop(game);%0Aloop.start();%0A// loop.goto(0);%0A// for (let i = 0; i %3C 10; ++i) %7B%0A//   loop.goto(i);%0A// %7D%0A// // render%0A// render(%7B%0A//   particles: pool.active,%0A//   deltaTime: 1000 / 60,%0A// %7D
+function boom() %7B%0A  setTimeout(boom, 1000 + random() * 1000);%0A  shouldActivate = !shouldActivate;%0A  setTimeout(() =%3E (shouldActivate = !shouldActivate), 50);%0A  activeX = w * 0.2 + random() * (w * 0.6);%0A  activeY = h * 0.2 + random() * (h * 0.6);%0A%7D%0A%0Aconst loop = gameLoop(game);%0Aloop.start();%0Aboom(
 );%0A

it looks like fireworks now