@@ -91,58 +91,255 @@ return /******/ (function(modules) { // webpackBootstrap
91
91
/******/
92
92
/******/
93
93
/******/ // Load entry module and return exports
94
- /******/ return __webpack_require__ ( __webpack_require__ . s = "./ts/fireworks.ts" ) ;
94
+ /******/ return __webpack_require__ ( __webpack_require__ . s = 1 ) ;
95
95
/******/ } )
96
96
/************************************************************************/
97
- /******/ ( {
98
-
99
- /***/ "./ts/fireworks.ts" :
100
- /*!*************************!*\
101
- !*** ./ts/fireworks.ts ***!
102
- \*************************/
103
- /*! no static exports found */
97
+ /******/ ( [
98
+ /* 0 */
104
99
/***/ ( function ( module , exports , __webpack_require__ ) {
105
100
106
101
"use strict" ;
107
- eval ( "\nObject.defineProperty(exports, \"__esModule\", { value: true });\nconst things_1 = __webpack_require__(/*! ./things */ \"./ts/things.ts\");\nclass Fireworks {\n constructor(container, { rocketSpawnInterval = 150, maxRockets = 3, numParticles = 100, explosionMinHeight = 0.2, explosionMaxHeight = 0.9, explosionChance = 0.08 } = {}) {\n this.rocketSpawnInterval = rocketSpawnInterval;\n this.maxRockets = maxRockets;\n this.cw = container.clientWidth;\n this.ch = container.clientHeight;\n this.max_h = this.ch * (1 - explosionMaxHeight);\n this.min_h = this.ch * (1 - explosionMinHeight);\n this.chance = explosionChance;\n this.canvas = document.createElement('canvas');\n this.canvas.width = this.cw;\n this.canvas.height = this.ch;\n this.ctx = this.canvas.getContext('2d');\n container.appendChild(this.canvas);\n this.things = new things_1.default({\n maxRockets: this.maxRockets,\n numParticles,\n cw: this.cw,\n ch: this.ch\n });\n }\n destroy() {\n this.canvas.parentElement.removeChild(this.canvas);\n window.clearInterval(this.interval);\n window.cancelAnimationFrame(this.rafInterval);\n }\n start() {\n if (this.maxRockets > 0) {\n this.interval = setInterval(() => this.things.spawnRockets(), this.rocketSpawnInterval);\n this.rafInterval = window.requestAnimationFrame(() => this.update());\n }\n return () => this.stop();\n }\n stop() {\n window.clearInterval(this.interval);\n this.interval = null;\n }\n kill() {\n this.things.clear();\n this.stop();\n window.cancelAnimationFrame(this.rafInterval);\n this.rafInterval = null;\n this._clear(true);\n }\n fire() {\n this.things.spawnRocket();\n if (!this.rafInterval) {\n this.rafInterval = window.requestAnimationFrame(() => this.update());\n }\n }\n _clear(force = false) {\n this.ctx.globalCompositeOperation = 'destination-out';\n this.ctx.fillStyle = `rgba(0, 0, 0 ${force ? '' : ', 0.5'})`;\n this.ctx.fillRect(0, 0, this.cw, this.ch);\n this.ctx.globalCompositeOperation = 'lighter';\n }\n update() {\n this._clear();\n for (const particle of this.things) {\n particle.draw(this.ctx);\n particle.update();\n if (particle.shouldRemove(this.cw, this.ch)) {\n this.things.delete(particle);\n }\n else if (particle.shouldExplode(this.max_h, this.min_h, this.chance)) {\n this.things.explode(particle);\n }\n }\n if (this.interval || this.things.size > 0) {\n this.rafInterval = window.requestAnimationFrame(() => this.update());\n }\n else {\n this._clear(true);\n this.rafInterval = null;\n }\n }\n}\nexports.default = Fireworks;\n\n\n//# sourceURL=webpack://Fireworks/./ts/fireworks.ts?" ) ;
108
102
109
- /***/ } ) ,
103
+ Object . defineProperty ( exports , "__esModule" , { value : true } ) ;
104
+ function random ( min , max ) {
105
+ return Math . random ( ) * ( max - min ) + min ;
106
+ }
107
+ exports . random = random ;
108
+ exports . TAU = Math . PI * 2 ;
110
109
111
- /***/ "./ts/particle.ts" :
112
- /*!************************!*\
113
- !*** ./ts/particle.ts ***!
114
- \************************/
115
- /*! no static exports found */
110
+
111
+ /***/ } ) ,
112
+ /* 1 */
116
113
/***/ ( function ( module , exports , __webpack_require__ ) {
117
114
118
115
"use strict" ;
119
- eval ( "\nObject.defineProperty(exports, \"__esModule\", { value: true });\nconst util_1 = __webpack_require__(/*! ./util */ \"./ts/util.ts\");\nclass Particle {\n constructor({ isRocket = false, hue = util_1.random(1, 360), brightness = util_1.random(50, 60), position }) {\n this.isRocket = isRocket;\n this.position = position;\n this.positions = [\n this.position,\n this.position,\n this.position\n ];\n if (this.isRocket) {\n this.velocity = {\n x: util_1.random(-3, 3),\n y: util_1.random(-7, -3)\n };\n this.shrink = 0.999;\n this.resistance = 1;\n }\n else {\n const angle = util_1.random(0, util_1.TAU);\n const speed = Math.cos(util_1.random(0, util_1.TAU)) * 15;\n this.velocity = {\n x: Math.cos(angle) * speed,\n y: Math.sin(angle) * speed\n };\n this.shrink = util_1.random(0, 0.05) + 0.93;\n this.resistance = 0.92;\n }\n this.gravity = 0.01;\n this.size = 3;\n this.alpha = 1;\n this.fade = 0;\n this.hue = hue;\n this.brightness = brightness;\n }\n clone() {\n return new Particle({\n position: {\n x: this.position.x,\n y: this.position.y\n },\n hue: this.hue,\n brightness: this.brightness\n });\n }\n shouldRemove(cw, ch) {\n if (this.alpha <= 0.1 || this.size <= 1) {\n return true;\n }\n if (this.position.x > cw || this.position.x < 0) {\n return true;\n }\n if (this.position.y > ch || this.position.y < 0) {\n return true;\n }\n return false;\n }\n shouldExplode(maxHeight, minHeight, chance) {\n if (!this.isRocket) {\n return false;\n }\n if (this.position.y <= maxHeight) {\n return true;\n }\n if (this.position.y >= minHeight) {\n return false;\n }\n return util_1.random(0, 1) <= chance;\n }\n update() {\n this.positions.pop();\n this.positions.unshift({ x: this.position.x, y: this.position.y });\n this.velocity.x *= this.resistance;\n this.velocity.y *= this.resistance;\n this.velocity.y += this.gravity;\n this.position.x += this.velocity.x;\n this.position.y += this.velocity.y;\n this.size *= this.shrink;\n this.alpha -= this.fade;\n }\n draw(ctx) {\n const lastPosition = this.positions[this.positions.length - 1];\n ctx.beginPath();\n ctx.moveTo(lastPosition.x, lastPosition.y);\n ctx.lineTo(this.position.x, this.position.y);\n ctx.lineWidth = this.size;\n ctx.strokeStyle = `hsla(${this.hue}, 100%, ${this.brightness}%, ${this.alpha})`;\n ctx.stroke();\n }\n}\nexports.default = Particle;\n\n\n//# sourceURL=webpack://Fireworks/./ts/particle.ts?" ) ;
120
116
121
- /***/ } ) ,
117
+ Object . defineProperty ( exports , "__esModule" , { value : true } ) ;
118
+ const things_1 = __webpack_require__ ( 2 ) ;
119
+ class Fireworks {
120
+ constructor ( container , { rocketSpawnInterval = 150 , maxRockets = 3 , numParticles = 100 , explosionMinHeight = 0.2 , explosionMaxHeight = 0.9 , explosionChance = 0.08 } = { } ) {
121
+ this . rocketSpawnInterval = rocketSpawnInterval ;
122
+ this . maxRockets = maxRockets ;
123
+ this . cw = container . clientWidth ;
124
+ this . ch = container . clientHeight ;
125
+ this . max_h = this . ch * ( 1 - explosionMaxHeight ) ;
126
+ this . min_h = this . ch * ( 1 - explosionMinHeight ) ;
127
+ this . chance = explosionChance ;
128
+ this . canvas = document . createElement ( 'canvas' ) ;
129
+ this . canvas . width = this . cw ;
130
+ this . canvas . height = this . ch ;
131
+ this . ctx = this . canvas . getContext ( '2d' ) ;
132
+ container . appendChild ( this . canvas ) ;
133
+ this . things = new things_1 . default ( {
134
+ maxRockets : this . maxRockets ,
135
+ numParticles,
136
+ cw : this . cw ,
137
+ ch : this . ch
138
+ } ) ;
139
+ }
140
+ destroy ( ) {
141
+ this . canvas . parentElement . removeChild ( this . canvas ) ;
142
+ window . clearInterval ( this . interval ) ;
143
+ window . cancelAnimationFrame ( this . rafInterval ) ;
144
+ }
145
+ start ( ) {
146
+ if ( this . maxRockets > 0 ) {
147
+ this . interval = setInterval ( ( ) => this . things . spawnRockets ( ) , this . rocketSpawnInterval ) ;
148
+ this . rafInterval = window . requestAnimationFrame ( ( ) => this . update ( ) ) ;
149
+ }
150
+ return ( ) => this . stop ( ) ;
151
+ }
152
+ stop ( ) {
153
+ window . clearInterval ( this . interval ) ;
154
+ this . interval = null ;
155
+ }
156
+ kill ( ) {
157
+ this . things . clear ( ) ;
158
+ this . stop ( ) ;
159
+ window . cancelAnimationFrame ( this . rafInterval ) ;
160
+ this . rafInterval = null ;
161
+ this . _clear ( true ) ;
162
+ }
163
+ fire ( ) {
164
+ this . things . spawnRocket ( ) ;
165
+ if ( ! this . rafInterval ) {
166
+ this . rafInterval = window . requestAnimationFrame ( ( ) => this . update ( ) ) ;
167
+ }
168
+ }
169
+ _clear ( force = false ) {
170
+ this . ctx . globalCompositeOperation = 'destination-out' ;
171
+ this . ctx . fillStyle = `rgba(0, 0, 0 ${ force ? '' : ', 0.5' } )` ;
172
+ this . ctx . fillRect ( 0 , 0 , this . cw , this . ch ) ;
173
+ this . ctx . globalCompositeOperation = 'lighter' ;
174
+ }
175
+ update ( ) {
176
+ this . _clear ( ) ;
177
+ for ( const particle of this . things ) {
178
+ particle . draw ( this . ctx ) ;
179
+ particle . update ( ) ;
180
+ if ( particle . shouldRemove ( this . cw , this . ch ) ) {
181
+ this . things . delete ( particle ) ;
182
+ }
183
+ else if ( particle . shouldExplode ( this . max_h , this . min_h , this . chance ) ) {
184
+ this . things . explode ( particle ) ;
185
+ }
186
+ }
187
+ if ( this . interval || this . things . size > 0 ) {
188
+ this . rafInterval = window . requestAnimationFrame ( ( ) => this . update ( ) ) ;
189
+ }
190
+ else {
191
+ this . _clear ( true ) ;
192
+ this . rafInterval = null ;
193
+ }
194
+ }
195
+ }
196
+ exports . default = Fireworks ;
197
+
122
198
123
- /***/ "./ts/things.ts" :
124
- /*!**********************!*\
125
- !*** ./ts/things.ts ***!
126
- \**********************/
127
- /*! no static exports found */
199
+ /***/ } ) ,
200
+ /* 2 */
128
201
/***/ ( function ( module , exports , __webpack_require__ ) {
129
202
130
203
"use strict" ;
131
- eval ( "\nObject.defineProperty(exports, \"__esModule\", { value: true });\nconst particle_1 = __webpack_require__(/*! ./particle */ \"./ts/particle.ts\");\nconst util_1 = __webpack_require__(/*! ./util */ \"./ts/util.ts\");\nclass Things extends Set {\n constructor({ maxRockets, numParticles, cw, ch }) {\n super();\n this.rockets = 0;\n this.maxRockets = maxRockets;\n this.numParticles = numParticles;\n this.cw = cw;\n this.ch = ch;\n }\n explode(particle) {\n this.rockets--;\n for (let i = 0; i < this.numParticles; i += 1) {\n this.add(particle.clone());\n }\n this.delete(particle);\n }\n spawnRocket() {\n this.rockets++;\n this.add(new particle_1.default({\n isRocket: true,\n position: {\n x: util_1.random(0, this.cw),\n y: this.ch\n }\n }));\n }\n spawnRockets() {\n if (this.rockets < this.maxRockets) {\n this.spawnRocket();\n }\n }\n}\nexports.default = Things;\n\n\n//# sourceURL=webpack://Fireworks/./ts/things.ts?" ) ;
132
204
133
- /***/ } ) ,
205
+ Object . defineProperty ( exports , "__esModule" , { value : true } ) ;
206
+ const particle_1 = __webpack_require__ ( 3 ) ;
207
+ const util_1 = __webpack_require__ ( 0 ) ;
208
+ class Things extends Set {
209
+ constructor ( { maxRockets, numParticles, cw, ch } ) {
210
+ super ( ) ;
211
+ this . rockets = 0 ;
212
+ this . maxRockets = maxRockets ;
213
+ this . numParticles = numParticles ;
214
+ this . cw = cw ;
215
+ this . ch = ch ;
216
+ }
217
+ explode ( particle ) {
218
+ this . rockets -- ;
219
+ for ( let i = 0 ; i < this . numParticles ; i += 1 ) {
220
+ this . add ( particle . clone ( ) ) ;
221
+ }
222
+ this . delete ( particle ) ;
223
+ }
224
+ spawnRocket ( ) {
225
+ this . rockets ++ ;
226
+ this . add ( new particle_1 . default ( {
227
+ isRocket : true ,
228
+ position : {
229
+ x : util_1 . random ( 0 , this . cw ) ,
230
+ y : this . ch
231
+ }
232
+ } ) ) ;
233
+ }
234
+ spawnRockets ( ) {
235
+ if ( this . rockets < this . maxRockets ) {
236
+ this . spawnRocket ( ) ;
237
+ }
238
+ }
239
+ }
240
+ exports . default = Things ;
241
+
134
242
135
- /***/ "./ts/util.ts" :
136
- /*!********************!*\
137
- !*** ./ts/util.ts ***!
138
- \********************/
139
- /*! no static exports found */
243
+ /***/ } ) ,
244
+ /* 3 */
140
245
/***/ ( function ( module , exports , __webpack_require__ ) {
141
246
142
247
"use strict" ;
143
- eval ( "\nObject.defineProperty(exports, \"__esModule\", { value: true });\nfunction random(min, max) {\n return Math.random() * (max - min) + min;\n}\nexports.random = random;\nexports.TAU = Math.PI * 2;\n\n\n//# sourceURL=webpack://Fireworks/./ts/util.ts?" ) ;
144
248
145
- /***/ } )
249
+ Object . defineProperty ( exports , "__esModule" , { value : true } ) ;
250
+ const util_1 = __webpack_require__ ( 0 ) ;
251
+ class Particle {
252
+ constructor ( { isRocket = false , hue = util_1 . random ( 1 , 360 ) , brightness = util_1 . random ( 50 , 60 ) , position } ) {
253
+ this . isRocket = isRocket ;
254
+ this . position = position ;
255
+ this . positions = [
256
+ this . position ,
257
+ this . position ,
258
+ this . position
259
+ ] ;
260
+ if ( this . isRocket ) {
261
+ this . velocity = {
262
+ x : util_1 . random ( - 3 , 3 ) ,
263
+ y : util_1 . random ( - 7 , - 3 )
264
+ } ;
265
+ this . shrink = 0.999 ;
266
+ this . resistance = 1 ;
267
+ }
268
+ else {
269
+ const angle = util_1 . random ( 0 , util_1 . TAU ) ;
270
+ const speed = Math . cos ( util_1 . random ( 0 , util_1 . TAU ) ) * 15 ;
271
+ this . velocity = {
272
+ x : Math . cos ( angle ) * speed ,
273
+ y : Math . sin ( angle ) * speed
274
+ } ;
275
+ this . shrink = util_1 . random ( 0 , 0.05 ) + 0.93 ;
276
+ this . resistance = 0.92 ;
277
+ }
278
+ this . gravity = 0.01 ;
279
+ this . size = 3 ;
280
+ this . alpha = 1 ;
281
+ this . fade = 0 ;
282
+ this . hue = hue ;
283
+ this . brightness = brightness ;
284
+ }
285
+ clone ( ) {
286
+ return new Particle ( {
287
+ position : {
288
+ x : this . position . x ,
289
+ y : this . position . y
290
+ } ,
291
+ hue : this . hue ,
292
+ brightness : this . brightness
293
+ } ) ;
294
+ }
295
+ shouldRemove ( cw , ch ) {
296
+ if ( this . alpha <= 0.1 || this . size <= 1 ) {
297
+ return true ;
298
+ }
299
+ if ( this . position . x > cw || this . position . x < 0 ) {
300
+ return true ;
301
+ }
302
+ if ( this . position . y > ch || this . position . y < 0 ) {
303
+ return true ;
304
+ }
305
+ return false ;
306
+ }
307
+ shouldExplode ( maxHeight , minHeight , chance ) {
308
+ if ( ! this . isRocket ) {
309
+ return false ;
310
+ }
311
+ if ( this . position . y <= maxHeight ) {
312
+ return true ;
313
+ }
314
+ if ( this . position . y >= minHeight ) {
315
+ return false ;
316
+ }
317
+ return util_1 . random ( 0 , 1 ) <= chance ;
318
+ }
319
+ update ( ) {
320
+ this . positions . pop ( ) ;
321
+ this . positions . unshift ( { x : this . position . x , y : this . position . y } ) ;
322
+ this . velocity . x *= this . resistance ;
323
+ this . velocity . y *= this . resistance ;
324
+ this . velocity . y += this . gravity ;
325
+ this . position . x += this . velocity . x ;
326
+ this . position . y += this . velocity . y ;
327
+ this . size *= this . shrink ;
328
+ this . alpha -= this . fade ;
329
+ }
330
+ draw ( ctx ) {
331
+ const lastPosition = this . positions [ this . positions . length - 1 ] ;
332
+ ctx . beginPath ( ) ;
333
+ ctx . moveTo ( lastPosition . x , lastPosition . y ) ;
334
+ ctx . lineTo ( this . position . x , this . position . y ) ;
335
+ ctx . lineWidth = this . size ;
336
+ ctx . strokeStyle = `hsla(${ this . hue } , 100%, ${ this . brightness } %, ${ this . alpha } )` ;
337
+ ctx . stroke ( ) ;
338
+ }
339
+ }
340
+ exports . default = Particle ;
341
+
146
342
147
- /******/ } ) [ "default" ] ;
343
+ /***/ } )
344
+ /******/ ] ) [ "default" ] ;
148
345
} ) ;
0 commit comments