Particle system fixes, reduced jank

src/GridRenderer.js

@@ -16,6 +16,7 @@ class GridRenderer { // eslint-disable-line no-unused-vars
  this.gridHeight = gridHeight;
  this.canvas = canvas;
  this.ctx = canvas.getContext('2d');
+ this.lastPlayheadX = -1;
  }
 
  /**
@@ -63,8 +64,7 @@ class GridRenderer { // eslint-disable-line no-unused-vars
  for (let i = 0; i < grid.data.length; i += 1) {
  const dx = this.canvas.height / this.gridHeight;
  const dy = this.canvas.width / this.gridWidth;
- const gridx = i % this.gridWidth;
- const gridy = Math.floor(i / this.gridWidth);
+ const { x: gridx, y: gridy } = Util.indexToCoord(i, this.gridWidth);
  const x = dx * gridx;
  const y = dy * gridy;
 
@@ -74,13 +74,15 @@ class GridRenderer { // eslint-disable-line no-unused-vars
  if (gridx === playheadX) {
  this.ctx.globalAlpha = 1;
  this.spriteSheet.drawSprite(2, this.ctx, x, y);
- // Create particles
- this.particleSystem.createParticleBurst(
- dx * (gridx + 0.5),
- dy * (gridy + 0.5),
- 10 * dpr,
- 20,
- );
+ if (playheadX !== this.lastPlayheadX) {
+ // Create particles
+ this.particleSystem.createParticleBurst(
+ dx * (gridx + 0.5),
+ dy * (gridy + 0.5),
+ 8 * dpr,
+ 20,
+ );
+ }
  } else {
  this.ctx.globalAlpha = 0.85;
  this.spriteSheet.drawSprite(1, this.ctx, x, y);
@@ -109,6 +111,8 @@ class GridRenderer { // eslint-disable-line no-unused-vars
  this.ctx.fillRect(p.x, p.y, 2, 2);
  }
  }
+
+ this.lastPlayheadX = playheadX;
  }
 
  /**
@@ -121,9 +125,11 @@ class GridRenderer { // eslint-disable-line no-unused-vars
  const ps = this.particleSystem;
  for (let i = 0; i < ps.PARTICLE_POOL_SIZE; i += 1) {
  const p = ps.particles[i];
- const tile = Util.pixelCoordsToTileCoords(p.x, p.y, this.gridWidth, this.gridHeight,
- this.canvas.width, this.canvas.height);
- if (tile) heatmap[this.gridWidth * tile.y + tile.x] = p.life;
+ if (p.life > 0) {
+ const tile = Util.pixelCoordsToTileCoords(p.x, p.y, this.gridWidth, this.gridHeight,
+ this.canvas.width, this.canvas.height);
+ if (tile) heatmap[Util.coordToIndex(tile.x, tile.y, this.gridWidth)] += p.life;
+ }
  }
  return heatmap;
  }

src/ParticleSystem.js

@@ -48,7 +48,7 @@ class ParticleSystem { // eslint-disable-line no-unused-vars
  p.vy = -p.vy;
  p.y += pvy;
  }
- p.life -= 1;
+ p.life -= deltaTime;
  }
  }
  this.lastUpdate = now;
@@ -77,7 +77,7 @@ class ParticleSystem { // eslint-disable-line no-unused-vars
  }
 
  /**
- * Create a burst of particles exploding out in a circle from a single point
+ * Creates 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

src/Util.js

@@ -35,12 +35,25 @@ class Util { // eslint-disable-line no-unused-vars
  * @param {number} x - The x coordinate
  * @param {number} y - The y coordinate
  * @param {number} gridWidth - The width of the 2-D representation (the grid width)
+ * @returns {number} - The corresponding index
  */
  static coordToIndex(x, y, gridWidth) {
  Util.assert(arguments.length === 3);
  return x * gridWidth + y;
  }
 
+ /**
+ * Converts a 1-D array index into an (x, y) coordinate in its corresponding 2-D representation
+ * @param {number} x - The x coordinate
+ * @param {number} y - The y coordinate
+ * @param {number} gridWidth - The width of the 2-D representation (the grid width)
+ * @returns {point} - The corresponding x and y coordinates
+ */
+ static indexToCoord(index, gridWidth) {
+ Util.assert(arguments.length === 2);
+ return {x: Math.floor(index / gridWidth), y: index % gridWidth};
+ }
+
  /**
  * Draws a rounded rectangle
  * Adapted from https://stackoverflow.com/a/3368118/2234742