Merge pull request #85 from crashmax-dev/fps-prop

feat: raf fps property

Author: crashmax-dev

README.md

@@ -173,6 +173,7 @@ npm install @fireworks-js/web
 | `traceSpeed`       | number              | 10                                                                            |
 | `intensity`        | number              | 30                                                                            |
 | `autoresize`       | boolean             | true                                                                          |
+| `fps`              | number              | 60                                                                            |
 
 The `hue`, `delay`, `decay`, `brightness`, `lineWidth.explosion`, `lineWidth.trace`, `sound.volume` and `rocketsPoint` options accept an object:
 
@@ -205,6 +206,7 @@ The `sound` options accept an object:
 
 ```js
 const fireworks = new Fireworks(container, {
+  fps: 60,
   autoresize: true,
   opacity: 0.5,
   acceleration: 1.05,
@@ -222,8 +224,8 @@ const fireworks = new Fireworks(container, {
     max: 360
   },
   delay: {
-    min: 15,
-    max: 30
+    min: 30,
+    max: 60
   },
   rocketsPoint: {
     min: 50,

packages/fireworks-js/src/fireworks.ts

@@ -2,6 +2,7 @@ import { Explosion } from './explosion.js'
 import { randomFloat, randomInt } from './helpers.js'
 import { Mouse } from './mouse.js'
 import { opts } from './options.js'
+import { RequestAnimationFrame } from './raf.js'
 import { Resize } from './resize.js'
 import { Sound } from './sound.js'
 import { Trace } from './trace.js'
@@ -14,17 +15,14 @@ export class Fireworks {
   private ctx: CanvasRenderingContext2D
   private width: number
   private height: number
-
-  private tick = 0
-  private timestamp = performance.now()
-  private running = false
-
   private sound: Sound
   private resize: Resize
   private mouse: Mouse
   private traces: Trace[] = []
   private explosions: Explosion[] = []
   private waitStopRaf: (() => void) | null
+  private raf: RequestAnimationFrame
+  private running = false
 
   constructor(
     container: Element | HTMLCanvasElement,
@@ -39,6 +37,7 @@ export class Fireworks {
     this.sound = new Sound()
     this.resize = new Resize(this)
     this.mouse = new Mouse(this.canvas)
+    this.raf = new RequestAnimationFrame(this.render.bind(this))
   }
 
   get isRunning(): boolean {
@@ -59,8 +58,7 @@ export class Fireworks {
     this.running = true
     this.resize.subscribe()
     this.mouse.subscribe()
-    this.clear()
-    this.render()
+    this.raf.start()
   }
 
   stop(dispose = false): void {
@@ -69,6 +67,7 @@ export class Fireworks {
     this.running = false
     this.resize.unsubscribe()
     this.mouse.unsubscribe()
+    this.raf.stop()
     this.clear()
 
     if (dispose) {
@@ -97,7 +96,9 @@ export class Fireworks {
   pause(): void {
     this.running = !this.running
     if (this.running) {
-      this.render()
+      this.raf.start()
+    } else {
+      this.raf.stop()
     }
   }
 
@@ -150,11 +151,9 @@ export class Fireworks {
     this.updateSize()
   }
 
-  private render(timestamp = this.timestamp): void {
+  private render(): void {
     if (!this.ctx || !this.running) return
 
-    requestAnimationFrame((timestamp) => this.render(timestamp))
-
     this.ctx.globalCompositeOperation = 'destination-out'
     this.ctx.fillStyle = `rgba(0, 0, 0, ${opts.opacity})`
     this.ctx.fillRect(0, 0, this.width, this.height)
@@ -165,10 +164,6 @@ export class Fireworks {
     this.initTrace()
     this.drawTrace()
     this.drawExplosion()
-
-    const timeDiff = timestamp - this.timestamp
-    this.timestamp = timestamp
-    this.tick += (timeDiff * (opts.intensity * Math.PI)) / 1000
   }
 
   private initTrace(): void {
@@ -186,7 +181,7 @@ export class Fireworks {
     } = opts
 
     if (
-      this.tick > randomInt(delay.min, delay.max) ||
+      this.raf.tick > randomInt(delay.min, delay.max) ||
       (this.mouse.active && mouse.max > this.traces.length)
     ) {
       this.traces.push(
@@ -209,7 +204,7 @@ export class Fireworks {
         })
       )
 
-      this.tick = 0
+      this.raf.tick = 0
     }
   }
 

packages/fireworks-js/src/options.ts

@@ -10,6 +10,7 @@ import type {
 } from './types.js'
 
 class Options implements FireworksOptions {
+  public fps: number
   public hue: MinMax
   public rocketsPoint: MinMax
   public opacity: number
@@ -33,6 +34,7 @@ class Options implements FireworksOptions {
   public autoresize: boolean
 
   constructor() {
+    this.fps = 60
     this.autoresize = true
     this.lineStyle = 'round'
     this.flickering = 50
@@ -74,8 +76,8 @@ class Options implements FireworksOptions {
     }
 
     this.delay = {
-      min: 15,
-      max: 30
+      min: 30,
+      max: 60
     }
 
     this.brightness = {

packages/fireworks-js/src/raf.ts

@@ -0,0 +1,34 @@
+import { opts } from './options.js'
+
+export class RequestAnimationFrame {
+  public tick = 0
+
+  private rafId = 0
+  private fps = opts.fps
+  private tolerance = 0.1
+  private now: number
+
+  constructor(private readonly render: () => void) {}
+
+  start(): void {
+    this.now = performance.now()
+    const interval = 1000 / this.fps
+
+    const raf = (timestamp: number) => {
+      this.rafId = requestAnimationFrame(raf)
+      const delta = timestamp - this.now
+
+      if (delta >= interval - this.tolerance) {
+        this.render()
+        this.now = timestamp - (delta % interval)
+        this.tick += (delta * (opts.intensity * Math.PI)) / 1000
+      }
+    }
+
+    this.rafId = requestAnimationFrame(raf)
+  }
+
+  stop() {
+    cancelAnimationFrame(this.rafId)
+  }
+}

packages/fireworks-js/src/types.ts

@@ -1,6 +1,7 @@
 export type LineStyle = 'round' | 'square'
 
 export interface IFireworksOptions {
+  fps: number
   hue: MinMax
   rocketsPoint: MinMax
   opacity: number

website/src/config.ts

@@ -70,7 +70,7 @@ export const fireworksOptions: FireworksOptions = {
   mouse: {
     click: true,
     move: false,
-    max: 3
+    max: 1
   }
 }
 

website/src/index.ts

@@ -9,7 +9,14 @@ import {
   mainContainer
 } from './config.js'
 
+declare global {
+  interface Window {
+    fireworks: Fireworks
+  }
+}
+
 const fireworks = new Fireworks(fireworksContainer, fireworksOptions)
+window.fireworks = fireworks
 fireworks.start()
 
 const fireworksGetters = {