Particle system refactoring

src/GridRenderer.js

@@ -75,15 +75,12 @@ class GridRenderer { // eslint-disable-line no-unused-vars
  this.ctx.globalAlpha = 1;
  this.spriteSheet.drawSprite(2, this.ctx, x, y);
  // Create particles
- const px = dx * (gridx + 0.5);
- const py = dy * (gridy + 0.5);
- const velocityscalar = 10 * dpr;
- const numparticles = 20;
- for (let j = 0; j < 2 * Math.PI; j += (2 * Math.PI) / numparticles) {
- const pvx = Math.cos(j) * velocityscalar;
- const pvy = Math.sin(j) * velocityscalar;
- this.particleSystem.createParticle(px, py, pvx, pvy);
- }
+ this.particleSystem.createParticleBurst(
+ dx * (gridx + 0.5),
+ dy * (gridy + 0.5),
+ 10 * dpr,
+ 20,
+ );
  } else {
  this.ctx.globalAlpha = 0.85;
  this.spriteSheet.drawSprite(1, this.ctx, x, y);
@@ -103,7 +100,7 @@ class GridRenderer { // eslint-disable-line no-unused-vars
 
  // Draw particles
 
- if (this.DEBUG) {
+ if (Util.DEBUG) {
  const ps = this.particleSystem;
  for (let i = 0; i < ps.PARTICLE_POOL_SIZE; i += 1) {
  const p = ps.particles[i];

src/NotePlayer.js

@@ -80,29 +80,27 @@ class NotePlayer { // eslint-disable-line no-unused-vars
  scheduleNote(gridX, gridY) {
  Util.assert(arguments.length === 2);
  // Cycle through the voices
- try {
- const noteDuration = Tone.Time('1m') / this.gridWidth;
- const playEvent = Tone.Transport.schedule((time) => {
- const highVolume = -10; // When one note is playing
- const lowVolume = -20; // When all notes are playing (lower volume to prevent peaking)
-
- const volume = ((this.gridHeight - this.polyphony[gridX]) / this.gridHeight)
- * (highVolume - lowVolume) + lowVolume;
-
+ const noteDuration = Tone.Time('1m') / this.gridWidth;
+ const playEvent = Tone.Transport.schedule((time) => {
+ const highVolume = -10; // When one note is playing
+ const lowVolume = -20; // When all notes are playing (lower volume to prevent peaking)
+
+ const volume = ((this.gridHeight - this.polyphony[gridX]) / this.gridHeight)
+ * (highVolume - lowVolume) + lowVolume;
+ try {
  this.players[this.currentPlayer].volume.value = volume;
  this.players[this.currentPlayer].start(
  time, gridY * this.noteOffset, this.noteOffset,
  );
  this.currentPlayer = (this.currentPlayer + 1) % this.players.length;
- }, gridX * noteDuration);
- this.notes[playEvent] = { x: gridX, y: gridY };
- this.polyphony[gridX] += 1;
- return playEvent;
- } catch (e) {
- // eslint-disable-next-line no-console
- console.warn('Note play failure:', e);
- }
- return false;
+ } catch (e) {
+ // eslint-disable-next-line no-console
+ if (Util.DEBUG) console.warn('Note play failure:', e);
+ }
+ }, gridX * noteDuration);
+ this.notes[playEvent] = { x: gridX, y: gridY };
+ this.polyphony[gridX] += 1;
+ return playEvent;
  }
 
  /**

src/ParticleSystem.js

@@ -7,7 +7,7 @@ class ParticleSystem { // eslint-disable-line no-unused-vars
  */
  constructor(width, height) {
  Util.assert(arguments.length === 2);
- this.PARTICLE_POOL_SIZE = 500;
+ this.PARTICLE_POOL_SIZE = 2000;
  this.PARTICLE_LIFETIME = 40;
 
  this.width = width;
@@ -75,4 +75,20 @@ class ParticleSystem { // eslint-disable-line no-unused-vars
  this.oldestParticle += 1;
  if (this.oldestParticle >= this.PARTICLE_POOL_SIZE) this.oldestParticle = 0;
  }
+
+ /**
+ * Create a burst of particles exploding out in a circle from a single point
+ * @param {number} x - The x coordinate of the emanation point
+ * @param {number} y - The y coordinate of the emanation point
+ * @param {number} v - The velocity of the particles, in pixels per 1/60th of a second
+ * @param {number} n - The number of particles to create
+ */
+ createParticleBurst(x, y, v, n) {
+ const randomOffset = Math.random() * 2 * Math.PI;
+ for (let j = 0; j < 2 * Math.PI; j += (2 * Math.PI) / n) {
+ const pvx = Math.cos(j + randomOffset) * v;
+ const pvy = Math.sin(j + randomOffset) * v;
+ this.createParticle(x, y, pvx, pvy);
+ }
+ }
 }

src/ToneMatrix.js

@@ -15,7 +15,6 @@ class ToneMatrix { // eslint-disable-line no-unused-vars
  */
  constructor(canvasWrapperEl, clearNotesButtonEl, clipboardInputEl, clipboardButtonEl) {
  Util.assert(arguments.length === 4);
- this.DEBUG = false;
 
  /**
  * The main canvas element that ToneMatrix draws to

src/Util.js

@@ -103,3 +103,5 @@ Util.devicePixelRatio = 1;
  updatePixelRatio();
  matchMedia(mqString).addEventListener('change', updatePixelRatio);
 }());
+
+Util.DEBUG = false;