feat(ParticleGenerator): Bulk particle addition

alampros · alampros · commit 3c9e1082af8a · 2019-03-08T12:23:35.000-05:00
Add more than one particle per RAF.
TODO: use an easing function instead.
diff --git a/src/Confetti.ts b/src/Confetti.ts
@@ -12,6 +12,7 @@ export interface IConfettiOptions {
   opacity: number
   recycle: boolean
   run: boolean
+  debug: boolean
   confettiSource: IRect
 }
 
@@ -29,6 +30,7 @@ export const confettiDefaults: Pick<IConfettiOptions, Exclude<keyof IConfettiOpt
     '#FF5722', '#795548',
   ],
   opacity: 1.0,
+  debug: false,
   recycle: true,
   run: true,
 }
diff --git a/src/ParticleGenerator.ts b/src/ParticleGenerator.ts
@@ -44,28 +44,47 @@ export default class ParticleGenerator implements IParticleGenerator {
   animate = (): boolean => {
     const {
       canvas,
+      context,
       particlesGenerated,
     } = this
     const {
       run,
       recycle,
       numberOfPieces,
+      debug,
     } = this.getOptions()
     if(!run) {
       return false
     }
+
     const nP = this.particles.length
     const limit = recycle ? nP : particlesGenerated
+
+    // Initial population
     if(limit < numberOfPieces) {
-      this.particles.push(this.getParticle())
-      this.particlesGenerated += 1
+      // Add more than one piece per loop, otherwise the number of pieces would
+      // be limitted by the RAF framerate
+      const numToAdd = Math.ceil((numberOfPieces - limit) / 20)
+      for(let i = 0; i < numToAdd; i++) {
+        this.particles.push(this.getParticle())
+      }
+      this.particlesGenerated += numToAdd
+    }
+    if(debug) {
+      // Draw debug text
+      context.font = '12px serif'
+      context.fillStyle = '#333'
+      context.fillText(`Particles: ${nP}`, 20, 20)
     }
 
+    // Maintain the population
     this.particles.forEach((p, i) => {
+      // Update each particle's position
       p.update()
+      // Prune the off-canvas particles
       if(p.y > canvas.height || p.y < -100 || p.x > canvas.width + 100 || p.x < -100) {
         if(recycle && limit <= numberOfPieces) {
-          // a brand new particle replacing the dead one
+          // Replace the particle with a brand new one
           this.particles[i] = this.getParticle()
         } else {
           this.removeParticleAt(i)
diff --git a/www/src/components/KnobbedConfetti.js b/www/src/components/KnobbedConfetti.js
@@ -23,6 +23,7 @@ export default (props) => {
         wind={wind / 500}
         gravity={gravity / 100}
         style={{ zIndex: -1 }}
+        debug
         {...props}
       />
       <nav className={styles.nav}>

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@ export interface IConfettiOptions {`
`12`	`12`	`opacity: number`
`13`	`13`	`recycle: boolean`
`14`	`14`	`run: boolean`
	`15`	`+ debug: boolean`
`15`	`16`	`confettiSource: IRect`
`16`	`17`	`}`
`17`	`18`
`@@ -29,6 +30,7 @@ export const confettiDefaults: Pick<IConfettiOptions, Exclude<keyof IConfettiOpt`
`29`	`30`	`'#FF5722', '#795548',`
`30`	`31`	`],`
`31`	`32`	`opacity: 1.0,`
	`33`	`+ debug: false,`
`32`	`34`	`recycle: true,`
`33`	`35`	`run: true,`
`34`	`36`	`}`