fix demo

Author: crashmax-dev

README.md

@@ -167,7 +167,7 @@ npm install @fireworks-js/web
 | `friction`         | number              | 0.95                                                                          |
 | `gravity`          | number              | 1.5                                                                           |
 | `particles`        | number              | 50                                                                            |
-| `trace`            | number              | 3                                                                             |
+| `traceLength`      | number              | 3                                                                             |
 | `flickering`       | number              | 50                                                                            |
 | `intensity`        | number              | 30                                                                            |
 | `traceSpeed`       | number              | 10                                                                            |
@@ -213,7 +213,7 @@ const fireworks = new Fireworks(container, {
   friction: 0.97,
   gravity: 1.5,
   particles: 50,
-  trace: 3,
+  traceLength: 3,
   traceSpeed: 10,
   explosion: 5,
   intensity: 30,

packages/fireworks-js/src/fireworks.ts

@@ -1,5 +1,5 @@
 import { Explosion } from './explosion.js'
-import { randomFloat, randomInt } from './helpers.js'
+import { floor, randomFloat, randomInt } from './helpers.js'
 import { Mouse } from './mouse.js'
 import { opts } from './options.js'
 import { RequestAnimationFrame } from './raf.js'
@@ -174,7 +174,7 @@ export class Fireworks {
       delay,
       rocketsPoint,
       boundaries,
-      trace,
+      traceLength,
       traceSpeed,
       acceleration,
       mouse
@@ -200,7 +200,7 @@ export class Fireworks {
           hue: randomInt(hue.min, hue.max),
           speed: traceSpeed,
           acceleration,
-          traceLength: trace
+          traceLength: floor(traceLength)
         })
       )
 
@@ -237,7 +237,7 @@ export class Fireworks {
       decay
     } = opts
 
-    let particlesLength = particles
+    let particlesLength = floor(particles)
     while (particlesLength--) {
       this.explosions.push(
         new Explosion({
@@ -252,7 +252,7 @@ export class Fireworks {
             lineWidth.explosion.min,
             lineWidth.explosion.max
           ),
-          explosionLength: Math.round(explosion),
+          explosionLength: floor(explosion),
           brightness,
           decay
         })

packages/fireworks-js/src/helpers.ts

@@ -1,3 +1,7 @@
+export function floor(num: number): number {
+  return Math.abs(Math.floor(num))
+}
+
 export function randomFloat(min: number, max: number): number {
   return Math.random() * (max - min) + min
 }

packages/fireworks-js/src/options.ts

@@ -18,7 +18,6 @@ class Options implements FireworksOptions {
   public friction: number
   public gravity: number
   public particles: number
-  public trace: number
   public explosion: number
   public mouse: IMouse
   public boundaries: IBoundaries
@@ -28,6 +27,7 @@ class Options implements FireworksOptions {
   public decay: MinMax
   public flickering: number
   public intensity: number
+  public traceLength: number
   public traceSpeed: number
   public lineWidth: LineWidth
   public lineStyle: LineStyle
@@ -38,7 +38,7 @@ class Options implements FireworksOptions {
     this.autoresize = true
     this.lineStyle = 'round'
     this.flickering = 50
-    this.trace = 3
+    this.traceLength = 3
     this.traceSpeed = 10
     this.intensity = 30
     this.explosion = 5

packages/fireworks-js/src/types.ts

@@ -9,7 +9,6 @@ export interface IFireworksOptions {
   friction: number
   gravity: number
   particles: number
-  trace: number
   explosion: number
   mouse: IMouse
   boundaries: IBoundaries
@@ -19,6 +18,7 @@ export interface IFireworksOptions {
   decay: MinMax
   flickering: number
   intensity: number
+  traceLength: number
   traceSpeed: number
   lineWidth: LineWidth
   lineStyle: LineStyle

website/src/config.ts

@@ -24,10 +24,10 @@ export const fireworksOptions: FireworksOptions = {
   acceleration: 1.02,
   friction: 0.97,
   gravity: 1.5,
-  particles: 90,
-  trace: 3,
+  particles: 60,
+  traceLength: 3,
   traceSpeed: 10,
-  explosion: 6,
+  explosion: 5,
   intensity: 30,
   flickering: 50,
   lineStyle: 'round',

website/src/index.ts

@@ -21,11 +21,11 @@ fireworks.start()
 
 const fireworksGetters = {
   get traces(): number {
-    // @ts-expect-error
+    // @ts-ignore
     return fireworks.traces.length
   },
   get particles(): number {
-    // @ts-expect-error
+    // @ts-ignore
     return fireworks.explosions.length
   }
 }
@@ -104,6 +104,17 @@ tweakpane.addInput(fireworksOptions, 'opacity', {
   step: 0.1
 })
 
+tweakpane.addInput(fireworksOptions, 'particles', {
+  step: 1,
+  min: 1,
+  max: 200
+})
+
+tweakpane.addInput(fireworksOptions, 'traceLength', {
+  min: 1,
+  max: 10
+})
+
 tweakpane.addInput(fireworksOptions, 'traceSpeed', {
   min: 1,
   max: 100,
@@ -117,11 +128,13 @@ tweakpane.addInput(fireworksOptions, 'rocketsPoint', {
 })
 
 tweakpane.addInput(fireworksOptions.lineWidth!, 'explosion', {
-  min: 1,
+  label: 'lineWidth (explosion)',
+  min: 0,
   max: 10
 })
 
 tweakpane.addInput(fireworksOptions.lineWidth!, 'trace', {
+  label: 'lineWidth (trace)',
   min: 0,
   max: 10
 })