Pooling & Rendering Improvements

source/index.html

@@ -25,11 +25,8 @@
         }
 
         body {
-            margin: 0;
-        }
-
-        canvas {
             background-color: #000;
+            margin: 0;
         }
     </style>
 </head>

source/lib/ball.js

@@ -0,0 +1,32 @@
+const { PI: π } = Math;
+const ππ = 2 * π;
+
+const cvs = document.createElement('canvas');
+const ctx = cvs.getContext('2d');
+const r = 256, hue = 242, x = r / 2, y = r / 2;
+
+cvs.width = cvs.height = r;
+ctx.clearRect(0, 0, r, r);
+
+ctx.fillStyle = `hsla(${hue},100%,50%,0.4)`;
+ctx.beginPath();
+ctx.arc(x, y, r / 2, 0, ππ);
+ctx.closePath();
+ctx.fill();
+
+ctx.fillStyle = `hsla(${hue},100%,75%,0.75)`;
+ctx.beginPath();
+ctx.arc(x, y, r / 4, 0, ππ);
+ctx.closePath();
+ctx.fill();
+
+ctx.fillStyle = `hsla(${hue},0%,100%,1)`;
+ctx.beginPath();
+ctx.arc(x, y, r / 8, 0, ππ);
+ctx.closePath();
+ctx.fill();
+
+const ball = new Image();
+ball.src = cvs.toDataURL('image/png');
+
+export default ball;

source/lib/particle.js

@@ -1,3 +1,5 @@
+import ball from './ball';
+
 const { PI: π, floor, max, random } = Math;
 const ππ = 2 * π;
 
@@ -13,32 +15,21 @@ function getWaveFn(fn, p, min, max, o = 0) {
 
 export default class Particle {
     constructor(x = 0, y = 0, frames) {
-        this.px = x;
-        this.py = y;
+        this.reset(x, y);
 
         this.frames = frames;
         this.frame = -1;
 
         const p = 400 + floor(random() * 400), o = floor(random() * p);
+        const waveFn = getWaveFn(saw, p, 0, 4, o);
         this.frameFn = function(ts) {
-            const waveFn = getWaveFn(saw, p, 0, 4, o);
             return floor(waveFn(ts));
         }
 
-        this.rotation = 0;
         this.spin = (π - random() * ππ) / 500;
-
-        this.vx = 0.75 - random() * 1.5;
-        this.vy = 0.75 - random() * 1.5;
-
         this.drag = 0.98;
         this.grav = 0.025;
-
-        this.radius = 16;
         this.scale = 1.025;
-
-        this.hue = 242;
-        this.alpha = 1;
         this.fade = 0.01;
     }
 
@@ -56,7 +47,9 @@ export default class Particle {
         this.radius *= this.scale;
         this.alpha -= this.fade;
 
-        this.frame = this.frameFn(ts);
+        if (this.frames) {
+            this.frame = this.frameFn(ts);
+        }
     }
 
     render(ctx) {
@@ -69,25 +62,11 @@ export default class Particle {
     }
 
     renderBall(ctx) {
-        const { px, py, radius, hue } = this;
-
-        ctx.fillStyle = `hsla(${hue},100%,50%,0.4)`;
-        ctx.beginPath();
-        ctx.arc(px, py, radius, 0, ππ);
-        ctx.closePath();
-        ctx.fill();
-
-        ctx.fillStyle = `hsla(${hue},100%,75%,0.75)`;
-        ctx.beginPath();
-        ctx.arc(px, py, radius / 2, 0, ππ);
-        ctx.closePath();
-        ctx.fill();
-
-        ctx.fillStyle = `hsla(${hue},0%,100%,1)`;
-        ctx.beginPath();
-        ctx.arc(px, py, radius / 4, 0, ππ);
-        ctx.closePath();
-        ctx.fill();
+        const { px, py, radius } = this;
+        const x = px - radius;
+        const y = py - radius;
+
+        ctx.drawImage(ball, x, y, radius * 2, radius * 2);
     }
 
     renderFrame(ctx) {
@@ -102,4 +81,17 @@ export default class Particle {
         ctx.drawImage(img, x, y, width, height);
         ctx.restore();
     }
+
+    reset(x, y) {
+        this.px = x;
+        this.py = y;
+
+        this.vx = 0.75 - random() * 1.5;
+        this.vy = 0.75 - random() * 1.5;
+
+        this.radius = 16;
+        this.rotation = 0;
+        this.alpha = 1;
+        this.hue = 242;
+    }
 }

source/main.js

@@ -3,39 +3,61 @@ import load from './app/load';
 import Particle from './lib/particle';
 
 const { random, round } = Math;
-const particles = [];
+const particles = {
+    active: [],
+    pooled: [],
+    size: 1000,
+};
 
 load([
     './images/sparkle-1-0.png',
     './images/sparkle-1-1.png',
     './images/sparkle-1-2.png',
     './images/sparkle-1-1.png',
 ], images => {
+    let { active, pooled, size } = particles;
+    while (pooled.length < size) {
+        pooled.push(new Particle(-1, -1, (round(random()) ? images : null)));
+    }
+
     init((ctx, { ts, dts }, { w, h, hw, hh, x, y, down }) => {
-        // update and render each particle
-        particles.forEach(particle => {
+        active = active.reduce((accumulator, particle) => {
+            // update each particle
             particle.update(ts, dts);
 
             if (particle.py > h - 50) {
                 particle.py = h - 50;
                 particle.vy = -particle.vy * 0.8;
             }
 
-            particle.render(ctx);
-        });
+            // pool "dead" particles, and bail early
+            const isTransparent = particle.alpha <= 0;
+            const isOutside = particle.px < 0 || w < particle.px;
+            if (isTransparent || isOutside) {
+                pooled.push(particle);
+                return accumulator;
+            }
 
-        // if we go above a limit, start removing particles
-        while (particles.length > 1000) {
-            particles.shift();
-        }
+            // render each particle
+            particle.render(ctx);
+            accumulator.push(particle);
+            return accumulator;
+        }, []);
 
-        // create a new particle (or 10) per frame
+        // "depool" a particle (or 10) per frame
         for (let i = down ? 10 : 1; i; --i) {
-            particles.push(new Particle(x, y, (round(random()) ? images : null)));
+            if (pooled.length === 0) {
+                return;
+            }
+
+            const particle = pooled.shift();
+            particle.reset(x, y);
+            active.push(particle);
         }
 
         // a simple particle counter
         ctx.fillStyle = '#0ff';
-        ctx.fillText(particles.length.toLocaleString(), 8, 56);
+        ctx.fillText('pooled: ' + pooled.length.toLocaleString(), 8, 56);
+        ctx.fillText('active: ' + active.length.toLocaleString(), 8, 84);
     });
 });