Merge branch 'master' into render-speed

crashmax-dev · Feb 25, 2022 · 021c7fb · 021c7fb
2 parents 9ea68c0 + 2c70dc4
commit 021c7fb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 22 deletions.
diff --git a/public/main.js b/public/main.js
@@ -26,8 +26,7 @@ const fireworksConfig = {
   explosion: 6,
   intensity: 30,
   flickering: 50,
-  lineCap: 'round',
-  lineJoin: 'round',
+  lineStyle: 'round',
   lineWidth: {
     explosion: {
       min: 1,
@@ -256,11 +255,8 @@ folders.fireworks.add(fireworksConfig, 'intensity', 1, 60).onChange(() => {
   fireworks.setOptions(fireworksConfig)
 })
 
-folders.fireworks.add(fireworksConfig, 'lineCap', ['butt', 'round', 'square']).onChange(() => {
-  fireworks.setOptions(fireworksConfig)
-})
-
-folders.fireworks.add(fireworksConfig, 'lineJoin', ['round', 'bevel', 'miter']).onChange(() => {
+folders.fireworks.add(fireworks, 'lineStyle', ['round', 'square']).onChange((lineStyle) => {
+  fireworksConfig.lineStyle = lineStyle
   fireworks.setOptions(fireworksConfig)
 })
 

diff --git a/src/fireworks.ts b/src/fireworks.ts
@@ -5,6 +5,8 @@ import { randomFloat, randomInt } from './helpers'
 
 type HTMLContainer = Element | HTMLElement
 
+type LineStyle = 'round' | 'square'
+
 export interface FireworksOptions {
   hue?: MinMaxOptions
   rocketsPoint?: MinMaxOptions
@@ -22,11 +24,9 @@ export interface FireworksOptions {
   delay?: MinMaxOptions
   brightness?: BrightnessOptions
   flickering?: number
-  lineWidth?: LineWidthOptions
-  lineCap?: CanvasLineCap
-  lineJoin?: CanvasLineJoin
-  traceSpeed?: number
   intensity?: number
+  lineWidth?: LineWidthOptions
+  lineStyle?: LineStyle
 }
 
 export interface BrightnessOptions extends MinMaxOptions {
@@ -88,17 +88,15 @@ export class Fireworks {
   private particles: number
   private trace: number
   private flickering: number
-  private lineCap: CanvasLineCap
-  private lineJoin: CanvasLineJoin
+  private intensity: number
   private explosion: number
   private autoresize: boolean
   private boundaries: Required<BoundariesOptions>
   private mouse: Required<MouseOptions>
   private delay: MinMaxOptions
   private brightness: Required<BrightnessOptions>
   private lineWidth: LineWidthOptions
-  private traceSpeed: number
-  private intensity: number
+  private lineStyle: LineStyle
 
   private _tick = 0
   private _timestamp = performance.now()
@@ -123,8 +121,7 @@ export class Fireworks {
     sound,
     rocketsPoint,
     lineWidth,
-    lineCap = 'round',
-    lineJoin = 'round',
+    lineStyle = 'round',
     flickering = 50,
     trace = 3,
     traceSpeed = 10,
@@ -164,10 +161,8 @@ export class Fireworks {
     this.friction = friction
     this.acceleration = acceleration
     this.flickering = flickering
-    this.lineCap = lineCap
-    this.lineJoin = lineJoin
-    this.traceSpeed = traceSpeed
     this.intensity = intensity
+    this.lineStyle = lineStyle
 
     this.hue = {
       min: 0,
@@ -348,8 +343,13 @@ export class Fireworks {
     this._ctx.fillStyle = `rgba(0, 0, 0, ${this.opacity})`
     this._ctx.fillRect(0, 0, this._width, this._height)
     this._ctx.globalCompositeOperation = 'lighter'
-    this._ctx.lineCap = this.lineCap
-    this._ctx.lineJoin = this.lineJoin
+
+    this._ctx.lineJoin = 'round'
+    if (this.lineStyle === 'square') {
+      this._ctx.lineCap = 'square'
+    } else if (this.lineStyle === 'round') {
+      this._ctx.lineCap = 'round'
+    }
 
     this.drawBoundaries()
     this.initTrace()