• 用HTML和CSS打造跨年烟花秀视觉盛宴

    目录

    一、程序代码

    二、代码原理

    三、运行效果

    一、程序代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5. 	<meta charset="UTF-8">
    6. 	<title>跨年烟花秀title>
    7. 	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    8. 	<meta name="mobile-web-app-capable" content="yes">
    9. 	<meta name="apple-mobile-web-app-capable" content="yes">
    10. 	<meta name="theme-color" content="#000000">
    11. 	<link rel="shortcut icon" type="image/png"
    12. 		href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon.png">
    13. 	<link rel="icon" type="image/png"
    14. 		href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon.png">
    15. 	<link rel="apple-touch-icon-precomposed"
    16. 		href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon.png">
    17. 	<meta name="msapplication-TileColor" content="#000000">
    18. 	<meta name="msapplication-TileImage"
    19. 		content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon.png">
    20. 	<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
    21. 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    22. 	<link rel="stylesheet" href="./style.css">
    23. 	<style>
    24. 		* {
    25. 			position: relative;
    26. 			box-sizing: border-box;
    27. 		}
    28.  
    29. 		html,
    30. 		body {
    31. 			height: 100%;
    32. 		}
    33.  
    34. 		html {
    35. 			background-color: #000;
    36. 		}
    37.  
    38. 		body {
    39. 			overflow: hidden;
    40. 			color: rgba(255, 255, 255, 0.5);
    41. 			font-family: "Russo One", arial, sans-serif;
    42. 			line-height: 1.25;
    43. 			letter-spacing: 0.06em;
    44. 		}
    45.  
    46. 		.hide {
    47. 			opacity: 0;
    48. 			visibility: hidden;
    49. 		}
    50.  
    51. 		.remove {
    52. 			display: none;
    53. 		}
    54.  
    55. 		.blur {
    56. 			filter: blur(12px);
    57. 		}
    58.  
    59. 		.container {
    60. 			height: 100%;
    61. 			display: flex;
    62. 			justify-content: center;
    63. 			align-items: center;
    64. 		}
    65.  
    66. 		#loading-init {
    67. 			width: 100%;
    68. 			align-self: center;
    69. 			text-align: center;
    70. 			font-size: 2em;
    71. 		}
    72.  
    73. 		#stage-container {
    74. 			overflow: hidden;
    75. 			box-sizing: initial;
    76. 			border: 1px solid #222;
    77. 			margin: -1px;
    78. 		}
    79.  
    80. 		#canvas-container {
    81. 			width: 100%;
    82. 			height: 100%;
    83. 			transition: filter 0.3s;
    84. 		}
    85.  
    86. 		#canvas-container canvas {
    87. 			position: absolute;
    88. 			mix-blend-mode: lighten;
    89. 		}
    90.  
    91. 		#controls {
    92. 			position: absolute;
    93. 			top: 0;
    94. 			width: 100%;
    95. 			padding-bottom: 50px;
    96. 			display: flex;
    97. 			justify-content: space-between;
    98. 			transition: opacity 0.3s, visibility 0.3s;
    99. 		}
    100.  
    101. 		@media (min-width: 800px) {
    102. 			#controls {
    103. 				visibility: visible;
    104. 			}
    105.  
    106. 			#controls.hide:hover {
    107. 				opacity: 1;
    108. 			}
    109. 		}
    110.  
    111. 		#menu {
    112. 			display: flex;
    113. 			flex-direction: column;
    114. 			justify-content: center;
    115. 			align-items: center;
    116. 			position: absolute;
    117. 			top: 0;
    118. 			bottom: 0;
    119. 			width: 100%;
    120. 			background-color: rgba(0, 0, 0, 0.42);
    121. 			transition: opacity 0.3s, visibility 0.3s;
    122. 		}
    123.  
    124. 		#menu__header {
    125. 			padding: 20px 0 44px;
    126. 			font-size: 2em;
    127. 			text-transform: uppercase;
    128. 		}
    129.  
    130. 		#menu form {
    131. 			width: 240px;
    132. 			padding: 0 20px;
    133. 			overflow: auto;
    134. 		}
    135.  
    136. 		#menu .form-option {
    137. 			margin: 20px 0;
    138. 		}
    139.  
    140. 		#menu .form-option label {
    141. 			text-transform: uppercase;
    142. 		}
    143.  
    144. 		#menu .form-option--select label {
    145. 			display: block;
    146. 			margin-bottom: 6px;
    147. 		}
    148.  
    149. 		#menu .form-option--select select {
    150. 			display: block;
    151. 			width: 100%;
    152. 			height: 30px;
    153. 			font-size: 1rem;
    154. 			font-family: "Russo One", arial, sans-serif;
    155. 			color: rgba(255, 255, 255, 0.5);
    156. 			letter-spacing: 0.06em;
    157. 			background-color: transparent;
    158. 			border: 1px solid rgba(255, 255, 255, 0.5);
    159. 		}
    160.  
    161. 		#menu .form-option--select select option {
    162. 			background-color: black;
    163. 		}
    164.  
    165. 		#menu .form-option--checkbox label {
    166. 			display: flex;
    167. 			align-items: center;
    168. 			transition: opacity 0.3s;
    169. 			-webkit-user-select: none;
    170. 			-moz-user-select: none;
    171. 			-ms-user-select: none;
    172. 			user-select: none;
    173. 		}
    174.  
    175. 		#menu .form-option--checkbox input {
    176. 			display: block;
    177. 			width: 20px;
    178. 			height: 20px;
    179. 			margin-right: 8px;
    180. 			opacity: 0.5;
    181. 		}
    182.  
    183. 		@media (max-width: 800px) {
    184.  
    185. 			#menu .form-option select,
    186. 			#menu .form-option input {
    187. 				outline: none;
    188. 			}
    189. 		}
    190.  
    191. 		#close-menu-btn {
    192. 			position: absolute;
    193. 			top: 0;
    194. 			right: 0;
    195. 		}
    196.  
    197. 		.btn {
    198. 			opacity: 0.16;
    199. 			width: 44px;
    200. 			height: 44px;
    201. 			display: flex;
    202. 			-webkit-user-select: none;
    203. 			-moz-user-select: none;
    204. 			-ms-user-select: none;
    205. 			user-select: none;
    206. 			cursor: default;
    207. 			transition: opacity 0.3s;
    208. 		}
    209.  
    210. 		.btn--bright {
    211. 			opacity: 0.5;
    212. 		}
    213.  
    214. 		@media (min-width: 800px) {
    215. 			.btn:hover {
    216. 				opacity: 0.32;
    217. 			}
    218.  
    219. 			.btn--bright:hover {
    220. 				opacity: 0.75;
    221. 			}
    222. 		}
    223.  
    224. 		.btn svg {
    225. 			display: block;
    226. 			margin: auto;
    227. 		}
    228. 	style>
    229. head>
    230.  
    231. <body>
    232. 	
    233. 	
    234. 	<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
    235. 		<svg xmlns="http://www.w3.org/2000/svg">
    236. 			<symbol id="icon-play" viewBox="0 0 24 24">
    237. 				<path d="M8 5v14l11-7z" />
    238. 			symbol>
    239. 			<symbol id="icon-pause" viewBox="0 0 24 24">
    240. 				<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
    241. 			symbol>
    242. 			<symbol id="icon-close" viewBox="0 0 24 24">
    243. 				<path
    244. 					d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
    245. 			symbol>
    246. 			<symbol id="icon-settings" viewBox="0 0 24 24">
    247. 				<path
    248. 					d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" />
    249. 			symbol>
    250. 			<symbol id="icon-shutter-fast" viewBox="0 0 24 24">
    251. 				<path
    252. 					d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" />
    253. 			symbol>
    254. 			<symbol id="icon-shutter-slow" viewBox="0 0 24 24">
    255. 				<path
    256. 					d="M1 5h2v14H1zm4 0h2v14H5zm17 0H10c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM11 17l2.5-3.15L15.29 16l2.5-3.22L21 17H11z" />
    257. 			symbol>
    258. 		svg>
    259. 	div>
    260.  
    261. 	
    262. 	<div class="container">
    263. 		<div id="loading-init">惊喜即将来临！div>
    264. 		<div id="stage-container" class="remove">
    265. 			<div id="canvas-container">
    266. 				<canvas id="trails-canvas">canvas>
    267. 				<canvas id="main-canvas">canvas>
    268. 			div>
    269. 			<div id="controls">
    270. 				<div id="pause-btn" class="btn">
    271. 					<svg fill="white" width="24" height="24">
    272. 						<use href="#icon-pause">use>
    273. 					svg>
    274. 				div>
    275. 				<div id="shutter-btn" class="btn">
    276. 					<svg fill="white" width="24" height="24">
    277. 						<use href="#icon-shutter-slow">use>
    278. 					svg>
    279. 				div>
    280. 				<div id="settings-btn" class="btn">
    281. 					<svg fill="white" width="24" height="24">
    282. 						<use href="#icon-settings">use>
    283. 					svg>
    284. 				div>
    285. 			div>
    286. 			<div id="menu" class="hide">
    287. 				<div id="close-menu-btn" class="btn btn--bright">
    288. 					<svg fill="white" width="24" height="24">
    289. 						<use href="#icon-close">use>
    290. 					svg>
    291. 				div>
    292. 				<div id="menu__header">Settingsdiv>
    293. 				<form>
    294. 					<div class="form-option form-option--select">
    295. 						<label>Shell Typelabel>
    296. 						<select id="shell-type">select>
    297. 					div>
    298. 					<div class="form-option form-option--select">
    299. 						<label>Shell Sizelabel>
    300. 						<select id="shell-size">select>
    301. 					div>
    302. 					<div class="form-option form-option--checkbox">
    303. 						<label id="auto-launch-label"><input id="auto-launch" type="checkbox" /><span>Auto
    304. 								Firespan>label>
    305. 					div>
    306. 					<div class="form-option form-option--checkbox">
    307. 						<label id="finale-mode-label"><input id="finale-mode" type="checkbox" /><span>Finale
    308. 								Modespan>label>
    309. 					div>
    310. 					<div class="form-option form-option--checkbox">
    311. 						<label id="hide-controls-label"><input id="hide-controls" type="checkbox" /><span>Hide
    312. 								Controlsspan>label>
    313. 					div>
    314. 				form>
    315. 			div>
    316. 		div>
    317. 	div>
    318. 	
    319. 	<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/fscreen%401.0.1.js'>script>
    320. 	<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/Stage%400.1.4.js'>script>
    321. 	<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/MyMath.js'>script>
    322. 	<script>
    323. 		'use strict';
    324. 		console.clear();
    325.  
    326.  
    327. 		const IS_MOBILE = window.innerWidth <= 640;
    328. 		const IS_DESKTOP = window.innerWidth > 800;
    329. 		const IS_HEADER = IS_DESKTOP && window.innerHeight < 300;
    330. 		// 8K - can restrict this if needed
    331. 		const MAX_WIDTH = 7680;
    332. 		const MAX_HEIGHT = 4320;
    333. 		const GRAVITY = 0.9; // Acceleration in px/s
    334. 		let simSpeed = 1;
    335.  
    336. 		const COLOR = {
    337. 			Red: '#ff0043',
    338. 			Green: '#14fc56',
    339. 			Blue: '#1e7fff',
    340. 			Purple: '#e60aff',
    341. 			Gold: '#ffae00',
    342. 			White: '#ffffff'
    343. 		};
    344.  
    345. 		// Special invisible color (not rendered, and therefore not in COLOR map)
    346. 		const INVISIBLE = '_INVISIBLE_';
    347.  
    348.  
    349. 		// Interactive state management
    350. 		const store = {
    351. 			_listeners: new Set(),
    352. 			_dispatch() {
    353. 				this._listeners.forEach(listener => listener(this.state))
    354. 			},
    355.  
    356. 			state: {
    357. 				paused: false,
    358. 				longExposure: false,
    359. 				menuOpen: false,
    360. 				config: {
    361. 					shell: 'Random',
    362. 					size: IS_DESKTOP && !IS_HEADER ? '3' : '1',
    363. 					autoLaunch: true,
    364. 					finale: false,
    365. 					hideControls: IS_HEADER
    366. 				}
    367. 			},
    368.  
    369. 			setState(nextState) {
    370. 				this.state = Object.assign({}, this.state, nextState);
    371. 				this._dispatch();
    372. 				this.persist();
    373. 			},
    374.  
    375. 			subscribe(listener) {
    376. 				this._listeners.add(listener);
    377. 				return () => this._listeners.remove(listener);
    378. 			},
    379.  
    380. 			// Load / persist select state to localStorage
    381. 			load() {
    382. 				if (localStorage.getItem('schemaVersion') === '1') {
    383. 					this.state.config.size = JSON.parse(localStorage.getItem('configSize'));
    384. 					this.state.config.hideControls = JSON.parse(localStorage.getItem('hideControls'));
    385. 				}
    386. 			},
    387.  
    388. 			persist() {
    389. 				localStorage.setItem('schemaVersion', '1');
    390. 				localStorage.setItem('configSize', JSON.stringify(this.state.config.size));
    391. 				localStorage.setItem('hideControls', JSON.stringify(this.state.config.hideControls));
    392. 			}
    393. 		};
    394.  
    395. 		if (!IS_HEADER) {
    396. 			store.load();
    397. 		}
    398.  
    399. 		// Actions
    400. 		// ---------
    401.  
    402. 		function togglePause(toggle) {
    403. 			if (typeof toggle === 'boolean') {
    404. 				store.setState({ paused: toggle });
    405. 			} else {
    406. 				store.setState({ paused: !store.state.paused });
    407. 			}
    408. 		}
    409.  
    410. 		function toggleLongExposure(toggle) {
    411. 			if (typeof toggle === 'boolean') {
    412. 				store.setState({ longExposure: toggle });
    413. 			} else {
    414. 				store.setState({ longExposure: !store.state.longExposure });
    415. 			}
    416. 		}
    417.  
    418. 		function toggleMenu(toggle) {
    419. 			if (typeof toggle === 'boolean') {
    420. 				store.setState({ menuOpen: toggle });
    421. 			} else {
    422. 				store.setState({ menuOpen: !store.state.menuOpen });
    423. 			}
    424. 		}
    425.  
    426. 		function updateConfig(nextConfig) {
    427. 			nextConfig = nextConfig || getConfigFromDOM();
    428. 			store.setState({
    429. 				config: Object.assign({}, store.state.config, nextConfig)
    430. 			});
    431. 		}
    432.  
    433. 		// Selectors
    434. 		// -----------
    435.  
    436. 		const canInteract = () => !store.state.paused && !store.state.menuOpen;
    437. 		const shellNameSelector = () => store.state.config.shell;
    438. 		// Converts shell size to number.
    439. 		const shellSizeSelector = () => +store.state.config.size;
    440. 		const finaleSelector = () => store.state.config.finale;
    441.  
    442.  
    443. 		// Render app UI / keep in sync with state
    444. 		const appNodes = {
    445. 			stageContainer: '#stage-container',
    446. 			canvasContainer: '#canvas-container',
    447. 			controls: '#controls',
    448. 			menu: '#menu',
    449. 			pauseBtn: '#pause-btn',
    450. 			pauseBtnSVG: '#pause-btn use',
    451. 			shutterBtn: '#shutter-btn',
    452. 			shutterBtnSVG: '#shutter-btn use',
    453. 			shellType: '#shell-type',
    454. 			shellSize: '#shell-size',
    455. 			autoLaunch: '#auto-launch',
    456. 			autoLaunchLabel: '#auto-launch-label',
    457. 			finaleMode: '#finale-mode',
    458. 			finaleModeLabel: '#finale-mode-label',
    459. 			hideControls: '#hide-controls',
    460. 			hideControlsLabel: '#hide-controls-label'
    461. 		};
    462.  
    463. 		// Convert appNodes selectors to dom nodes
    464. 		Object.keys(appNodes).forEach(key => {
    465. 			appNodes[key] = document.querySelector(appNodes[key]);
    466. 		});
    467.  
    468. 		// Remove loading state
    469. 		document.getElementById('loading-init').remove();
    470. 		appNodes.stageContainer.classList.remove('remove');
    471.  
    472. 		// First render is called in init()
    473. 		function renderApp(state) {
    474. 			appNodes.pauseBtnSVG.setAttribute('href', `#icon-${state.paused ? 'play' : 'pause'}`);
    475. 			appNodes.shutterBtnSVG.setAttribute('href', `#icon-shutter-${state.longExposure ? 'fast' : 'slow'}`);
    476. 			appNodes.controls.classList.toggle('hide', state.menuOpen || state.config.hideControls);
    477. 			appNodes.canvasContainer.classList.toggle('blur', state.menuOpen);
    478. 			appNodes.menu.classList.toggle('hide', !state.menuOpen);
    479. 			appNodes.finaleModeLabel.style.opacity = state.config.autoLaunch ? 1 : 0.32;
    480.  
    481. 			appNodes.shellType.value = state.config.shell;
    482. 			appNodes.shellSize.value = state.config.size;
    483. 			appNodes.autoLaunch.checked = state.config.autoLaunch;
    484. 			appNodes.finaleMode.checked = state.config.finale;
    485. 			appNodes.hideControls.checked = state.config.hideControls;
    486. 		}
    487.  
    488. 		store.subscribe(renderApp);
    489.  
    490.  
    491. 		function getConfigFromDOM() {
    492. 			return {
    493. 				shell: appNodes.shellType.value,
    494. 				size: appNodes.shellSize.value,
    495. 				autoLaunch: appNodes.autoLaunch.checked,
    496. 				finale: appNodes.finaleMode.checked,
    497. 				hideControls: appNodes.hideControls.checked
    498. 			};
    499. 		};
    500.  
    501. 		const updateConfigNoEvent = () => updateConfig();
    502. 		appNodes.shellType.addEventListener('input', updateConfigNoEvent);
    503. 		appNodes.shellSize.addEventListener('input', updateConfigNoEvent);
    504. 		appNodes.autoLaunchLabel.addEventListener('click', () => setTimeout(updateConfig, 0));
    505. 		appNodes.finaleModeLabel.addEventListener('click', () => setTimeout(updateConfig, 0));
    506. 		appNodes.hideControlsLabel.addEventListener('click', () => setTimeout(updateConfig, 0));
    507.  
    508.  
    509. 		// Constant derivations
    510. 		const COLOR_NAMES = Object.keys(COLOR);
    511. 		const COLOR_CODES = COLOR_NAMES.map(colorName => COLOR[colorName]);
    512. 		// Invisible stars need an indentifier, even through they won't be rendered - physics still apply.
    513. 		const COLOR_CODES_W_INVIS = [...COLOR_CODES, INVISIBLE];
    514. 		// Tuples is a map keys by color codes (hex) with values of { r, g, b } tuples (still just objects).
    515. 		const COLOR_TUPLES = {};
    516. 		COLOR_CODES.forEach(hex => {
    517. 			COLOR_TUPLES[hex] = {
    518. 				r: parseInt(hex.substr(1, 2), 16),
    519. 				g: parseInt(hex.substr(3, 2), 16),
    520. 				b: parseInt(hex.substr(5, 2), 16),
    521. 			};
    522. 		});
    523.  
    524. 		// Get a random color.
    525. 		function randomColorSimple() {
    526. 			return COLOR_CODES[Math.random() * COLOR_CODES.length | 0];
    527. 		}
    528.  
    529. 		// Get a random color, with some customization options available.
    530. 		let lastColor;
    531. 		function randomColor(options) {
    532. 			const notSame = options && options.notSame;
    533. 			const notColor = options && options.notColor;
    534. 			const limitWhite = options && options.limitWhite;
    535. 			let color = randomColorSimple();
    536.  
    537. 			// limit the amount of white chosen randomly
    538. 			if (limitWhite && color === COLOR.White && Math.random() < 0.6) {
    539. 				color = randomColorSimple();
    540. 			}
    541.  
    542. 			if (notSame) {
    543. 				while (color === lastColor) {
    544. 					color = randomColorSimple();
    545. 				}
    546. 			}
    547. 			else if (notColor) {
    548. 				while (color === notColor) {
    549. 					color = randomColorSimple();
    550. 				}
    551. 			}
    552.  
    553. 			lastColor = color;
    554. 			return color;
    555. 		}
    556.  
    557. 		function whiteOrGold() {
    558. 			return Math.random() < 0.5 ? COLOR.Gold : COLOR.White;
    559. 		}
    560.  
    561. 		const PI_2 = Math.PI * 2;
    562. 		const PI_HALF = Math.PI * 0.5;
    563.  
    564. 		const trailsStage = new Stage('trails-canvas');
    565. 		const mainStage = new Stage('main-canvas');
    566. 		const stages = [
    567. 			trailsStage,
    568. 			mainStage
    569. 		];
    570.  
    571. 		// Fill trails canvas with black to start.
    572. 		trailsStage.ctx.fillStyle = '#000';
    573. 		trailsStage.ctx.fillRect(0, 0, trailsStage.width, trailsStage.height);
    574.  
    575.  
    576. 		// Fullscreen helpers, using Fscreen for prefixes
    577. 		function requestFullscreen() {
    578. 			if (fullscreenEnabled() && !isFullscreen()) {
    579. 				fscreen.requestFullscreen(document.documentElement);
    580. 			}
    581. 		}
    582.  
    583. 		function fullscreenEnabled() {
    584. 			return fscreen.fullscreenEnabled;
    585. 		}
    586.  
    587. 		function isFullscreen() {
    588. 			return !!fscreen.fullscreenElement;
    589. 		}
    590.  
    591.  
    592. 		// Shell helpers
    593. 		function makePistilColor(shellColor) {
    594. 			return (shellColor === COLOR.White || shellColor === COLOR.Gold) ? randomColor({ notColor: shellColor }) : whiteOrGold();
    595. 		}
    596.  
    597. 		// Unique shell types
    598. 		const crysanthemumShell = (size = 1) => {
    599. 			const glitter = Math.random() < 0.25;
    600. 			const singleColor = Math.random() < 0.68;
    601. 			const color = singleColor ? randomColor({ limitWhite: true }) : [randomColor(), randomColor({ notSame: true })];
    602. 			const pistil = singleColor && Math.random() < 0.42;
    603. 			const pistilColor = makePistilColor(color);
    604. 			const streamers = !pistil && color !== COLOR.White && Math.random() < 0.42;
    605. 			return {
    606. 				size: 300 + size * 100,
    607. 				starLife: 900 + size * 200,
    608. 				starDensity: glitter ? 1.1 : 1.5,
    609. 				color,
    610. 				glitter: glitter ? 'light' : '',
    611. 				glitterColor: whiteOrGold(),
    612. 				pistil,
    613. 				pistilColor,
    614. 				streamers
    615. 			};
    616. 		};
    617.  
    618.  
    619. 		const palmShell = (size = 1) => ({
    620. 			size: 250 + size * 75,
    621. 			starDensity: 0.6,
    622. 			starLife: 1800 + size * 200,
    623. 			glitter: 'heavy'
    624. 		});
    625.  
    626. 		const ringShell = (size = 1) => {
    627. 			const color = randomColor();
    628. 			const pistil = Math.random() < 0.75;
    629. 			return {
    630. 				ring: true,
    631. 				color,
    632. 				size: 300 + size * 100,
    633. 				starLife: 900 + size * 200,
    634. 				starCount: 2.2 * PI_2 * (size + 1),
    635. 				pistil,
    636. 				pistilColor: makePistilColor(color),
    637. 				glitter: !pistil ? 'light' : '',
    638. 				glitterColor: color === COLOR.Gold ? COLOR.Gold : COLOR.White
    639. 			};
    640. 		};
    641.  
    642. 		const crossetteShell = (size = 1) => {
    643. 			const color = randomColor({ limitWhite: true });
    644. 			return {
    645. 				size: 300 + size * 100,
    646. 				starLife: 900 + size * 200,
    647. 				starLifeVariation: 0.22,
    648. 				color,
    649. 				crossette: true,
    650. 				pistil: Math.random() < 0.5,
    651. 				pistilColor: makePistilColor(color)
    652. 			};
    653. 		};
    654.  
    655. 		const floralShell = (size = 1) => ({
    656. 			size: 300 + size * 120,
    657. 			starDensity: 0.38,
    658. 			starLife: 500 + size * 50,
    659. 			starLifeVariation: 0.5,
    660. 			color: Math.random() < 0.65 ? 'random' : (Math.random() < 0.15 ? randomColor() : [randomColor(), randomColor({ notSame: true })]),
    661. 			floral: true
    662. 		});
    663.  
    664. 		const fallingLeavesShell = (size = 1) => ({
    665. 			color: INVISIBLE,
    666. 			size: 300 + size * 120,
    667. 			starDensity: 0.38,
    668. 			starLife: 500 + size * 50,
    669. 			starLifeVariation: 0.5,
    670. 			glitter: 'medium',
    671. 			glitterColor: COLOR.Gold,
    672. 			fallingLeaves: true
    673. 		});
    674.  
    675. 		const willowShell = (size = 1) => ({
    676. 			size: 300 + size * 100,
    677. 			starDensity: 0.7,
    678. 			starLife: 3000 + size * 300,
    679. 			glitter: 'willow',
    680. 			glitterColor: COLOR.Gold,
    681. 			color: INVISIBLE
    682. 		});
    683.  
    684. 		const crackleShell = (size = 1) => {
    685. 			// favor gold
    686. 			const color = Math.random() < 0.75 ? COLOR.Gold : randomColor();
    687. 			return {
    688. 				size: 380 + size * 75,
    689. 				starDensity: 1,
    690. 				starLife: 600 + size * 100,
    691. 				starLifeVariation: 0.32,
    692. 				glitter: 'light',
    693. 				glitterColor: COLOR.Gold,
    694. 				color,
    695. 				crackle: true,
    696. 				pistil: Math.random() < 0.65,
    697. 				pistilColor: makePistilColor(color)
    698. 			};
    699. 		};
    700.  
    701. 		const horsetailShell = (size = 1) => {
    702. 			const color = randomColor();
    703. 			return {
    704. 				horsetail: true,
    705. 				color,
    706. 				size: 250 + size * 38,
    707. 				starDensity: 0.85 + size * 0.1,
    708. 				starLife: 2500 + size * 300,
    709. 				glitter: 'medium',
    710. 				glitterColor: Math.random() < 0.5 ? whiteOrGold() : color
    711. 			};
    712. 		};
    713.  
    714. 		function randomShellName() {
    715. 			return Math.random() < 0.6 ? 'Crysanthemum' : shellNames[(Math.random() * (shellNames.length - 1) + 1) | 0];
    716. 		}
    717.  
    718. 		function randomShell(size) {
    719. 			return shellTypes[randomShellName()](size);
    720. 		}
    721.  
    722. 		function shellFromConfig(size) {
    723. 			return shellTypes[shellNameSelector()](size);
    724. 		}
    725.  
    726. 		// Get a random shell, not including processing intensive varients
    727. 		// Note this is only random when "Random" shell is selected in config.
    728. 		// Also, this does not create the shell, only returns the factory function.
    729. 		const fastShellBlacklist = ['Falling Leaves', 'Floral', 'Willow'];
    730. 		function randomFastShell() {
    731. 			const isRandom = shellNameSelector() === 'Random';
    732. 			let shellName = isRandom ? randomShellName() : shellNameSelector();
    733. 			if (isRandom) {
    734. 				while (fastShellBlacklist.includes(shellName)) {
    735. 					shellName = randomShellName();
    736. 				}
    737. 			}
    738. 			return shellTypes[shellName];
    739. 		}
    740.  
    741.  
    742. 		const shellTypes = {
    743. 			'Random': randomShell,
    744. 			'Crackle': crackleShell,
    745. 			'Crossette': crossetteShell,
    746. 			'Crysanthemum': crysanthemumShell,
    747. 			'Falling Leaves': fallingLeavesShell,
    748. 			'Floral': floralShell,
    749. 			'Horse Tail': horsetailShell,
    750. 			'Palm': palmShell,
    751. 			'Ring': ringShell,
    752. 			'Willow': willowShell
    753. 		};
    754.  
    755. 		const shellNames = Object.keys(shellTypes);
    756.  
    757. 		function init() {
    758. 			// Populate dropdowns
    759. 			// shell type
    760. 			let options = '';
    761. 			shellNames.forEach(opt => options += `">${opt}`);
    762. 			appNodes.shellType.innerHTML = options;
    763. 			// shell size
    764. 			options = '';
    765. 			['3"', '5"', '6"', '8"', '12"'].forEach((opt, i) => options += `">${opt}`);
    766. 			appNodes.shellSize.innerHTML = options;
    767.  
    768. 			// initial render
    769. 			renderApp(store.state);
    770. 		}
    771.  
    772.  
    773. 		function fitShellPositionInBoundsH(position) {
    774. 			const edge = 0.18;
    775. 			return (1 - edge * 2) * position + edge;
    776. 		}
    777.  
    778. 		function fitShellPositionInBoundsV(position) {
    779. 			return position * 0.75;
    780. 		}
    781.  
    782. 		function getRandomShellPositionH() {
    783. 			return fitShellPositionInBoundsH(Math.random());
    784. 		}
    785.  
    786. 		function getRandomShellPositionV() {
    787. 			return fitShellPositionInBoundsV(Math.random());
    788. 		}
    789.  
    790. 		function getRandomShellSize() {
    791. 			const baseSize = shellSizeSelector();
    792. 			const maxVariance = Math.min(2.5, baseSize);
    793. 			const variance = Math.random() * maxVariance;
    794. 			const size = baseSize - variance;
    795. 			const height = maxVariance === 0 ? Math.random() : 1 - (variance / maxVariance);
    796. 			const centerOffset = Math.random() * (1 - height * 0.65) * 0.5;
    797. 			const x = Math.random() < 0.5 ? 0.5 - centerOffset : 0.5 + centerOffset;
    798. 			return {
    799. 				size,
    800. 				x: fitShellPositionInBoundsH(x),
    801. 				height: fitShellPositionInBoundsV(height)
    802. 			};
    803. 		}
    804.  
    805.  
    806. 		// Launches a shell from a user pointer event, based on state.config
    807. 		function launchShellFromConfig(event) {
    808. 			const shell = new Shell(shellFromConfig(shellSizeSelector()));
    809.  
    810. 			const w = mainStage.width;
    811. 			const h = mainStage.height;
    812. 			shell.launch(
    813. 				event ? event.x / w : getRandomShellPositionH(),
    814. 				event ? 1 - event.y / h : getRandomShellPositionV()
    815. 			);
    816. 		}
    817.  
    818.  
    819. 		// Sequences
    820. 		// -----------
    821.  
    822. 		function seqRandomShell() {
    823. 			const size = getRandomShellSize();
    824. 			const shell = new Shell(shellFromConfig(size.size));
    825. 			shell.launch(size.x, size.height);
    826.  
    827. 			let extraDelay = shell.starLife;
    828. 			if (shell.fallingLeaves) {
    829. 				extraDelay = 4000;
    830. 			}
    831.  
    832. 			return 900 + Math.random() * 600 + extraDelay;
    833. 		}
    834.  
    835. 		function seqTwoRandom() {
    836. 			const size1 = getRandomShellSize();
    837. 			const size2 = getRandomShellSize();
    838. 			const shell1 = new Shell(shellFromConfig(size1.size));
    839. 			const shell2 = new Shell(shellFromConfig(size2.size));
    840. 			const leftOffset = Math.random() * 0.2 - 0.1;
    841. 			const rightOffset = Math.random() * 0.2 - 0.1;
    842. 			shell1.launch(0.3 + leftOffset, size1.height);
    843. 			shell2.launch(0.7 + rightOffset, size2.height);
    844.  
    845. 			let extraDelay = Math.max(shell1.starLife, shell2.starLife);
    846. 			if (shell1.fallingLeaves || shell2.fallingLeaves) {
    847. 				extraDelay = 4000;
    848. 			}
    849.  
    850. 			return 900 + Math.random() * 600 + extraDelay;
    851. 		}
    852.  
    853. 		function seqTriple() {
    854. 			const shellType = randomFastShell();
    855. 			const baseSize = shellSizeSelector();
    856. 			const smallSize = Math.max(0, baseSize - 1.25);
    857.  
    858. 			const offset = Math.random() * 0.08 - 0.04;
    859. 			const shell1 = new Shell(shellType(baseSize));
    860. 			shell1.launch(0.5 + offset, 0.7);
    861.  
    862. 			const leftDelay = 1000 + Math.random() * 400;
    863. 			const rightDelay = 1000 + Math.random() * 400;
    864.  
    865. 			setTimeout(() => {
    866. 				const offset = Math.random() * 0.08 - 0.04;
    867. 				const shell2 = new Shell(shellType(smallSize));
    868. 				shell2.launch(0.2 + offset, 0.1);
    869. 			}, leftDelay);
    870.  
    871. 			setTimeout(() => {
    872. 				const offset = Math.random() * 0.08 - 0.04;
    873. 				const shell3 = new Shell(shellType(smallSize));
    874. 				shell3.launch(0.8 + offset, 0.1);
    875. 			}, rightDelay);
    876.  
    877. 			return 4000;
    878. 		}
    879.  
    880. 		function seqSmallBarrage() {
    881. 			seqSmallBarrage.lastCalled = Date.now();
    882. 			const barrageCount = IS_DESKTOP ? 11 : 5;
    883. 			const shellSize = Math.max(0, shellSizeSelector() - 2);
    884. 			const useCrysanthemum = Math.random() < 0.7;
    885.  
    886. 			// (cos(x*5π+0.5π)+1)/2 is a custom wave bounded by 0 and 1 used to set varying launch heights
    887. 			function launchShell(x) {
    888. 				const isRandom = shellNameSelector() === 'Random';
    889. 				let shellType = isRandom ? (useCrysanthemum ? crysanthemumShell : randomFastShell()) : shellTypes[shellNameSelector()];
    890. 				const shell = new Shell(shellType(shellSize));
    891. 				const height = (Math.cos(x * 5 * Math.PI + PI_HALF) + 1) / 2;
    892. 				shell.launch(x, height * 0.75);
    893. 			}
    894.  
    895. 			let count = 0;
    896. 			let delay = 0;
    897. 			while (count < barrageCount) {
    898. 				if (count === 0) {
    899. 					launchShell(0.5)
    900. 					count += 1;
    901. 				}
    902. 				else {
    903. 					const offset = (count + 1) / barrageCount / 2;
    904. 					setTimeout(() => {
    905. 						launchShell(0.5 + offset);
    906. 						launchShell(0.5 - offset);
    907. 					}, delay);
    908. 					count += 2;
    909. 				}
    910. 				delay += 200;
    911. 			}
    912.  
    913. 			return 3400 + barrageCount * 120;
    914. 		}
    915. 		seqSmallBarrage.cooldown = 15000;
    916. 		seqSmallBarrage.lastCalled = Date.now();
    917.  
    918.  
    919. 		const sequences = [
    920. 			seqRandomShell,
    921. 			seqTwoRandom,
    922. 			seqTriple,
    923. 			seqSmallBarrage
    924. 		];
    925.  
    926.  
    927. 		let isFirstSeq = true;
    928. 		const finaleCount = 32;
    929. 		let currentFinaleCount = 0;
    930. 		function startSequence() {
    931. 			if (isFirstSeq) {
    932. 				isFirstSeq = false;
    933. 				const shell = new Shell(crysanthemumShell(shellSizeSelector()));
    934. 				shell.launch(0.5, 0.5);
    935. 				return 2400;
    936. 			}
    937.  
    938. 			if (finaleSelector()) {
    939. 				seqRandomShell();
    940. 				if (currentFinaleCount < finaleCount) {
    941. 					currentFinaleCount++;
    942. 					return 170;
    943. 				}
    944. 				else {
    945. 					currentFinaleCount = 0;
    946. 					return 6000;
    947. 				}
    948. 			}
    949.  
    950. 			const rand = Math.random();
    951.  
    952. 			if (rand < 0.2 && Date.now() - seqSmallBarrage.lastCalled > seqSmallBarrage.cooldown) {
    953. 				return seqSmallBarrage();
    954. 			}
    955.  
    956. 			if (rand < 0.6) {
    957. 				return seqRandomShell();
    958. 			}
    959. 			else if (rand < 0.8) {
    960. 				return seqTwoRandom();
    961. 			}
    962. 			else if (rand < 1) {
    963. 				return seqTriple();
    964. 			}
    965. 		}
    966.  
    967.  
    968. 		let activePointerCount = 0;
    969. 		let isUpdatingSpeed = false;
    970.  
    971. 		function handlePointerStart(event) {
    972. 			activePointerCount++;
    973. 			const btnSize = 44;
    974.  
    975. 			if (event.y < btnSize) {
    976. 				if (event.x < btnSize) {
    977. 					togglePause();
    978. 					return;
    979. 				}
    980. 				if (event.x > mainStage.width / 2 - btnSize / 2 && event.x < mainStage.width / 2 + btnSize / 2) {
    981. 					toggleLongExposure();
    982. 					return;
    983. 				}
    984. 				if (event.x > mainStage.width - btnSize) {
    985. 					toggleMenu();
    986. 					return;
    987. 				}
    988. 			}
    989.  
    990. 			if (!canInteract()) return;
    991.  
    992. 			if (updateSpeedFromEvent(event)) {
    993. 				isUpdatingSpeed = true;
    994. 			}
    995. 			else if (event.onCanvas) {
    996. 				launchShellFromConfig(event);
    997. 			}
    998. 		}
    999.  
    1000. 		function handlePointerEnd(event) {
    1001. 			activePointerCount--;
    1002. 			isUpdatingSpeed = false;
    1003. 		}
    1004.  
    1005. 		function handlePointerMove(event) {
    1006. 			if (!canInteract()) return;
    1007.  
    1008. 			if (isUpdatingSpeed) {
    1009. 				updateSpeedFromEvent(event);
    1010. 			}
    1011. 		}
    1012.  
    1013. 		function handleKeydown(event) {
    1014. 			// P
    1015. 			if (event.keyCode === 80) {
    1016. 				togglePause();
    1017. 			}
    1018. 			// O
    1019. 			else if (event.keyCode === 79) {
    1020. 				toggleMenu();
    1021. 			}
    1022. 			// Esc
    1023. 			else if (event.keyCode === 27) {
    1024. 				toggleMenu(false);
    1025. 			}
    1026. 		}
    1027.  
    1028. 		mainStage.addEventListener('pointerstart', handlePointerStart);
    1029. 		mainStage.addEventListener('pointerend', handlePointerEnd);
    1030. 		mainStage.addEventListener('pointermove', handlePointerMove);
    1031. 		window.addEventListener('keydown', handleKeydown);
    1032. 		// Try to go fullscreen upon a touch
    1033. 		window.addEventListener('touchend', (event) => !IS_DESKTOP && requestFullscreen());
    1034.  
    1035.  
    1036. 		function handleResize() {
    1037. 			const w = window.innerWidth;
    1038. 			const h = window.innerHeight;
    1039. 			// Try to adopt screen size, heeding maximum sizes specified
    1040. 			const containerW = Math.min(w, MAX_WIDTH);
    1041. 			// On small screens, use full device height
    1042. 			const containerH = w <= 420 ? h : Math.min(h, MAX_HEIGHT);
    1043. 			appNodes.stageContainer.style.width = containerW + 'px';
    1044. 			appNodes.stageContainer.style.height = containerH + 'px';
    1045. 			stages.forEach(stage => stage.resize(containerW, containerH));
    1046. 		}
    1047.  
    1048. 		// Compute initial dimensions
    1049. 		handleResize();
    1050.  
    1051. 		window.addEventListener('resize', handleResize);
    1052.  
    1053.  
    1054. 		// Dynamic globals
    1055. 		let speedBarOpacity = 0;
    1056. 		let autoLaunchTime = 0;
    1057.  
    1058. 		function updateSpeedFromEvent(event) {
    1059. 			if (isUpdatingSpeed || event.y >= mainStage.height - 44) {
    1060. 				// On phones it's hard to hit the edge pixels in order to set speed at 0 or 1, so some padding is provided to make that easier.
    1061. 				const edge = 16;
    1062. 				const newSpeed = (event.x - edge) / (mainStage.width - edge * 2);
    1063. 				simSpeed = Math.min(Math.max(newSpeed, 0), 1);
    1064. 				// show speed bar after an update
    1065. 				speedBarOpacity = 1;
    1066. 				// If we updated the speed, return true
    1067. 				return true;
    1068. 			}
    1069. 			// Return false if the speed wasn't updated
    1070. 			return false;
    1071. 		}
    1072.  
    1073.  
    1074. 		// Extracted function to keep `update()` optimized
    1075. 		function updateGlobals(timeStep, lag) {
    1076. 			// Always try to fade out speed bar
    1077. 			if (!isUpdatingSpeed) {
    1078. 				speedBarOpacity -= lag / 30; // half a second
    1079. 				if (speedBarOpacity < 0) {
    1080. 					speedBarOpacity = 0;
    1081. 				}
    1082. 			}
    1083.  
    1084. 			// auto launch shells
    1085. 			if (store.state.config.autoLaunch) {
    1086. 				autoLaunchTime -= timeStep;
    1087. 				if (autoLaunchTime <= 0) {
    1088. 					autoLaunchTime = startSequence();
    1089. 				}
    1090. 			}
    1091. 		}
    1092.  
    1093.  
    1094. 		function update(frameTime, lag) {
    1095. 			if (!canInteract()) return;
    1096.  
    1097. 			const { width, height } = mainStage;
    1098. 			const timeStep = frameTime * simSpeed;
    1099. 			const speed = simSpeed * lag;
    1100.  
    1101. 			updateGlobals(timeStep, lag);
    1102.  
    1103. 			const starDrag = 1 - (1 - Star.airDrag) * speed;
    1104. 			const starDragHeavy = 1 - (1 - Star.airDragHeavy) * speed;
    1105. 			const sparkDrag = 1 - (1 - Spark.airDrag) * speed;
    1106. 			const gAcc = timeStep / 1000 * GRAVITY;
    1107. 			COLOR_CODES_W_INVIS.forEach(color => {
    1108. 				// Stars
    1109. 				Star.active[color].forEach((star, i, stars) => {
    1110. 					star.life -= timeStep;
    1111. 					if (star.life <= 0) {
    1112. 						stars.splice(i, 1);
    1113. 						Star.returnInstance(star);
    1114. 					} else {
    1115. 						star.prevX = star.x;
    1116. 						star.prevY = star.y;
    1117. 						star.x += star.speedX * speed;
    1118. 						star.y += star.speedY * speed;
    1119. 						// Apply air drag if star isn't "heavy". The heavy property is used for the shell comets.
    1120. 						if (!star.heavy) {
    1121. 							star.speedX *= starDrag;
    1122. 							star.speedY *= starDrag;
    1123. 						}
    1124. 						else {
    1125. 							star.speedX *= starDragHeavy;
    1126. 							star.speedY *= starDragHeavy;
    1127. 						}
    1128. 						star.speedY += gAcc;
    1129.  
    1130. 						if (star.spinRadius) {
    1131. 							star.spinAngle += star.spinSpeed * speed;
    1132. 							star.x += Math.sin(star.spinAngle) * star.spinRadius * speed;
    1133. 							star.y += Math.cos(star.spinAngle) * star.spinRadius * speed;
    1134. 						}
    1135.  
    1136. 						if (star.sparkFreq) {
    1137. 							star.sparkTimer -= timeStep;
    1138. 							while (star.sparkTimer < 0) {
    1139. 								star.sparkTimer += star.sparkFreq;
    1140. 								Spark.add(
    1141. 									star.x,
    1142. 									star.y,
    1143. 									star.sparkColor,
    1144. 									Math.random() * PI_2,
    1145. 									Math.random() * star.sparkSpeed,
    1146. 									star.sparkLife * 0.8 + Math.random() * star.sparkLifeVariation * star.sparkLife
    1147. 								);
    1148. 							}
    1149. 						}
    1150. 					}
    1151. 				});
    1152.  
    1153. 				// Sparks
    1154. 				Spark.active[color].forEach((spark, i, sparks) => {
    1155. 					spark.life -= timeStep;
    1156. 					if (spark.life <= 0) {
    1157. 						sparks.splice(i, 1);
    1158. 						Spark.returnInstance(spark);
    1159. 					} else {
    1160. 						spark.prevX = spark.x;
    1161. 						spark.prevY = spark.y;
    1162. 						spark.x += spark.speedX * speed;
    1163. 						spark.y += spark.speedY * speed;
    1164. 						spark.speedX *= sparkDrag;
    1165. 						spark.speedY *= sparkDrag;
    1166. 						spark.speedY += gAcc;
    1167. 					}
    1168. 				});
    1169. 			});
    1170.  
    1171. 			render(speed);
    1172. 		}
    1173.  
    1174. 		function render(speed) {
    1175. 			const { dpr, width, height } = mainStage;
    1176. 			const trailsCtx = trailsStage.ctx;
    1177. 			const mainCtx = mainStage.ctx;
    1178.  
    1179. 			colorSky(speed);
    1180.  
    1181. 			trailsCtx.scale(dpr, dpr);
    1182. 			mainCtx.scale(dpr, dpr);
    1183.  
    1184. 			trailsCtx.globalCompositeOperation = 'source-over';
    1185. 			trailsCtx.fillStyle = `rgba(0, 0, 0, ${store.state.longExposure ? 0.0025 : 0.1 * speed})`;
    1186. 			trailsCtx.fillRect(0, 0, width, height);
    1187. 			// Remaining drawing on trails canvas will use 'lighten' blend mode
    1188. 			trailsCtx.globalCompositeOperation = 'lighten';
    1189.  
    1190. 			mainCtx.clearRect(0, 0, width, height);
    1191.  
    1192. 			// Draw queued burst flashes
    1193. 			while (BurstFlash.active.length) {
    1194. 				const bf = BurstFlash.active.pop();
    1195.  
    1196. 				const burstGradient = trailsCtx.createRadialGradient(bf.x, bf.y, 0, bf.x, bf.y, bf.radius);
    1197. 				burstGradient.addColorStop(0.05, 'white');
    1198. 				burstGradient.addColorStop(0.25, 'rgba(255, 160, 20, 0.2)');
    1199. 				burstGradient.addColorStop(1, 'rgba(255, 160, 20, 0)');
    1200. 				trailsCtx.fillStyle = burstGradient;
    1201. 				trailsCtx.fillRect(bf.x - bf.radius, bf.y - bf.radius, bf.radius * 2, bf.radius * 2);
    1202.  
    1203. 				BurstFlash.returnInstance(bf);
    1204. 			}
    1205.  
    1206. 			// Draw stars
    1207. 			trailsCtx.lineWidth = Star.drawWidth;
    1208. 			trailsCtx.lineCap = 'round';
    1209. 			mainCtx.strokeStyle = '#fff';
    1210. 			mainCtx.lineWidth = 1;
    1211. 			mainCtx.beginPath();
    1212. 			COLOR_CODES.forEach(color => {
    1213. 				const stars = Star.active[color];
    1214. 				trailsCtx.strokeStyle = color;
    1215. 				trailsCtx.beginPath();
    1216. 				stars.forEach(star => {
    1217. 					trailsCtx.moveTo(star.x, star.y);
    1218. 					trailsCtx.lineTo(star.prevX, star.prevY);
    1219. 					mainCtx.moveTo(star.x, star.y);
    1220. 					mainCtx.lineTo(star.x - star.speedX * 1.6, star.y - star.speedY * 1.6);
    1221. 				});
    1222. 				trailsCtx.stroke();
    1223. 			});
    1224. 			mainCtx.stroke();
    1225.  
    1226. 			// Draw sparks
    1227. 			trailsCtx.lineWidth = Spark.drawWidth;
    1228. 			trailsCtx.lineCap = 'butt';
    1229. 			COLOR_CODES.forEach(color => {
    1230. 				const sparks = Spark.active[color];
    1231. 				trailsCtx.strokeStyle = color;
    1232. 				trailsCtx.beginPath();
    1233. 				sparks.forEach(spark => {
    1234. 					trailsCtx.moveTo(spark.x, spark.y);
    1235. 					trailsCtx.lineTo(spark.prevX, spark.prevY);
    1236. 				});
    1237. 				trailsCtx.stroke();
    1238. 			});
    1239.  
    1240.  
    1241. 			// Render speed bar if visible
    1242. 			if (speedBarOpacity) {
    1243. 				const speedBarHeight = 6;
    1244. 				mainCtx.globalAlpha = speedBarOpacity;
    1245. 				mainCtx.fillStyle = COLOR.Blue;
    1246. 				mainCtx.fillRect(0, height - speedBarHeight, width * simSpeed, speedBarHeight);
    1247. 				mainCtx.globalAlpha = 1;
    1248. 			}
    1249.  
    1250.  
    1251. 			trailsCtx.resetTransform();
    1252. 			mainCtx.resetTransform();
    1253. 		}
    1254.  
    1255.  
    1256. 		// Draw colored overlay based on combined brightness of stars (light up the sky!)
    1257. 		// Note: this is applied to the canvas container's background-color, so it's behind the particles
    1258. 		const currentSkyColor = { r: 0, g: 0, b: 0 };
    1259. 		const targetSkyColor = { r: 0, g: 0, b: 0 };
    1260. 		function colorSky(speed) {
    1261. 			// The maximum r, g, or b value that will be used (255 would represent no maximum)
    1262. 			const maxSkySaturation = 30;
    1263. 			// How many stars are required in total to reach maximum sky brightness
    1264. 			const maxStarCount = 500;
    1265. 			let totalStarCount = 0;
    1266. 			// Initialize sky as black
    1267. 			targetSkyColor.r = 0;
    1268. 			targetSkyColor.g = 0;
    1269. 			targetSkyColor.b = 0;
    1270. 			// Add each known color to sky, multiplied by particle count of that color. This will put RGB values wildly out of bounds, but we'll scale them back later.
    1271. 			// Also add up total star count.
    1272. 			COLOR_CODES.forEach(color => {
    1273. 				const tuple = COLOR_TUPLES[color];
    1274. 				const count = Star.active[color].length;
    1275. 				totalStarCount += count;
    1276. 				targetSkyColor.r += tuple.r * count;
    1277. 				targetSkyColor.g += tuple.g * count;
    1278. 				targetSkyColor.b += tuple.b * count;
    1279. 			});
    1280.  
    1281. 			// Clamp intensity at 1.0, and map to a custom non-linear curve. This allows few stars to perceivably light up the sky, while more stars continue to increase the brightness but at a lesser rate. This is more inline with humans' non-linear brightness perception.
    1282. 			const intensity = Math.pow(Math.min(1, totalStarCount / maxStarCount), 0.3);
    1283. 			// Figure out which color component has the highest value, so we can scale them without affecting the ratios.
    1284. 			// Prevent 0 from being used, so we don't divide by zero in the next step.
    1285. 			const maxColorComponent = Math.max(1, targetSkyColor.r, targetSkyColor.g, targetSkyColor.b);
    1286. 			// Scale all color components to a max of `maxSkySaturation`, and apply intensity.
    1287. 			targetSkyColor.r = targetSkyColor.r / maxColorComponent * maxSkySaturation * intensity;
    1288. 			targetSkyColor.g = targetSkyColor.g / maxColorComponent * maxSkySaturation * intensity;
    1289. 			targetSkyColor.b = targetSkyColor.b / maxColorComponent * maxSkySaturation * intensity;
    1290.  
    1291. 			// Animate changes to color to smooth out transitions.
    1292. 			const colorChange = 10;
    1293. 			currentSkyColor.r += (targetSkyColor.r - currentSkyColor.r) / colorChange * speed;
    1294. 			currentSkyColor.g += (targetSkyColor.g - currentSkyColor.g) / colorChange * speed;
    1295. 			currentSkyColor.b += (targetSkyColor.b - currentSkyColor.b) / colorChange * speed;
    1296.  
    1297. 			appNodes.canvasContainer.style.backgroundColor = `rgb(${currentSkyColor.r | 0}, ${currentSkyColor.g | 0}, ${currentSkyColor.b | 0})`;
    1298. 		}
    1299.  
    1300. 		mainStage.addEventListener('ticker', update);
    1301.  
    1302.  
    1303. 		// Helper used to semi-randomly spread particles over an arc
    1304. 		// Values are flexible - `start` and `arcLength` can be negative, and `randomness` is simply a multiplier for random addition.
    1305. 		function createParticleArc(start, arcLength, count, randomness, particleFactory) {
    1306. 			const angleDelta = arcLength / count;
    1307. 			// Sometimes there is an extra particle at the end, too close to the start. Subtracting half the angleDelta ensures that is skipped.
    1308. 			// Would be nice to fix this a better way.
    1309. 			const end = start + arcLength - (angleDelta * 0.5);
    1310.  
    1311. 			if (end > start) {
    1312. 				// Optimization: `angle=angle+angleDelta` vs. angle+=angleDelta
    1313. 				// V8 deoptimises with let compound assignment
    1314. 				for (let angle = start; angle < end; angle = angle + angleDelta) {
    1315. 					particleFactory(angle + Math.random() * angleDelta * randomness);
    1316. 				}
    1317. 			}
    1318. 			else {
    1319. 				for (let angle = start; angle > end; angle = angle + angleDelta) {
    1320. 					particleFactory(angle + Math.random() * angleDelta * randomness);
    1321. 				}
    1322. 			}
    1323. 		}
    1324.  
    1325.  
    1326. 		// Various star effects.
    1327. 		// These are designed to be attached to a star's `onDeath` event.
    1328.  
    1329. 		// Crossette breaks star into four same-color pieces which branch in a cross-like shape.
    1330. 		function crossetteEffect(star) {
    1331. 			const startAngle = Math.random() * PI_HALF;
    1332. 			createParticleArc(startAngle, PI_2, 4, 0.5, (angle) => {
    1333. 				Star.add(
    1334. 					star.x,
    1335. 					star.y,
    1336. 					star.color,
    1337. 					angle,
    1338. 					Math.random() * 0.6 + 0.75,
    1339. 					600
    1340. 				);
    1341. 			});
    1342. 		}
    1343.  
    1344. 		// Flower is like a mini shell
    1345. 		function floralEffect(star) {
    1346. 			const startAngle = Math.random() * PI_HALF;
    1347. 			createParticleArc(startAngle, PI_2, 24, 1, (angle) => {
    1348. 				Star.add(
    1349. 					star.x,
    1350. 					star.y,
    1351. 					star.color,
    1352. 					angle,
    1353. 					// apply near cubic falloff to speed (places more particles towards outside)
    1354. 					Math.pow(Math.random(), 0.45) * 2.4,
    1355. 					1000 + Math.random() * 300,
    1356. 					star.speedX,
    1357. 					star.speedY
    1358. 				);
    1359. 			});
    1360. 			// Queue burst flash render
    1361. 			BurstFlash.add(star.x, star.y, 24);
    1362. 		}
    1363.  
    1364. 		// Floral burst with willow stars
    1365. 		function fallingLeavesEffect(star) {
    1366. 			const startAngle = Math.random() * PI_HALF;
    1367. 			createParticleArc(startAngle, PI_2, 12, 1, (angle) => {
    1368. 				const newStar = Star.add(
    1369. 					star.x,
    1370. 					star.y,
    1371. 					INVISIBLE,
    1372. 					angle,
    1373. 					// apply near cubic falloff to speed (places more particles towards outside)
    1374. 					Math.pow(Math.random(), 0.45) * 2.4,
    1375. 					2400 + Math.random() * 600,
    1376. 					star.speedX,
    1377. 					star.speedY
    1378. 				);
    1379.  
    1380. 				newStar.sparkColor = COLOR.Gold;
    1381. 				newStar.sparkFreq = 72;
    1382. 				newStar.sparkSpeed = 0.28;
    1383. 				newStar.sparkLife = 750;
    1384. 				newStar.sparkLifeVariation = 3.2;
    1385. 			});
    1386. 			// Queue burst flash render
    1387. 			BurstFlash.add(star.x, star.y, 24);
    1388. 		}
    1389.  
    1390. 		// Crackle pops into a small cloud of golden sparks.
    1391. 		function crackleEffect(star) {
    1392. 			createParticleArc(0, PI_2, 10, 1.8, (angle) => {
    1393. 				Spark.add(
    1394. 					star.x,
    1395. 					star.y,
    1396. 					COLOR.Gold,
    1397. 					angle,
    1398. 					// apply near cubic falloff to speed (places more particles towards outside)
    1399. 					Math.pow(Math.random(), 0.45) * 2.4,
    1400. 					300 + Math.random() * 200
    1401. 				);
    1402. 			});
    1403. 		}
    1404.  
    1405.  
    1406.  
    1407. 		/**
    1408. 		 * Shell can be constructed with options:
    1409. 		 *
    1410. 		 * size:      Size of the burst.
    1411. 		 * starCount: Number of stars to create. This is optional, and will be set to a reasonable quantity for size if omitted.
    1412. 		 * starLife:
    1413. 		 * starLifeVariation:
    1414. 		 * color:
    1415. 		 * glitterColor:
    1416. 		 * glitter: One of: 'light', 'medium', 'heavy', 'streamer', 'willow'
    1417. 		 * pistil:
    1418. 		 * pistilColor:
    1419. 		 * streamers:
    1420. 		 * crossette:
    1421. 		 * floral:
    1422. 		 * crackle:
    1423. 		 */
    1424.  
    1425. 		class Shell {
    1426. 			constructor(options) {
    1427. 				Object.assign(this, options);
    1428. 				this.starLifeVariation = options.starLifeVariation || 0.125;
    1429. 				this.color = options.color || randomColor();
    1430. 				this.glitterColor = options.glitterColor || this.color;
    1431.  
    1432. 				// Set default starCount if needed, will be based on shell size and scale exponentially, like a sphere's surface area.
    1433. 				if (!this.starCount) {
    1434. 					const density = options.starDensity || 1;
    1435. 					const scaledSize = this.size / 50 * density;
    1436. 					this.starCount = scaledSize * scaledSize;
    1437. 				}
    1438. 			}
    1439.  
    1440. 			launch(position, launchHeight) {
    1441. 				const { width, height } = mainStage;
    1442. 				// Distance from sides of screen to keep shells.
    1443. 				const hpad = 60;
    1444. 				// Distance from top of screen to keep shell bursts.
    1445. 				const vpad = 50;
    1446. 				// Minimum burst height, as a percentage of stage height
    1447. 				const minHeightPercent = 0.45;
    1448. 				// Minimum burst height in px
    1449. 				const minHeight = height - height * minHeightPercent;
    1450.  
    1451. 				const launchX = position * (width - hpad * 2) + hpad;
    1452. 				const launchY = height;
    1453. 				const burstY = minHeight - (launchHeight * (minHeight - vpad));
    1454.  
    1455. 				const launchDistance = launchY - burstY;
    1456. 				// Using a custom power curve to approximate Vi needed to reach launchDistance under gravity and air drag.
    1457. 				// Magic numbers came from testing.
    1458. 				const launchVelocity = Math.pow(launchDistance * 0.04, 0.64);
    1459.  
    1460. 				const comet = this.comet = Star.add(
    1461. 					launchX,
    1462. 					launchY,
    1463. 					typeof this.color === 'string' && this.color !== 'random' ? this.color : COLOR.White,
    1464. 					Math.PI,
    1465. 					launchVelocity * (this.horsetail ? 1.2 : 1),
    1466. 					// Hang time is derived linearly from Vi; exact number came from testing
    1467. 					launchVelocity * (this.horsetail ? 100 : 400)
    1468. 				);
    1469.  
    1470. 				// making comet "heavy" limits air drag
    1471. 				comet.heavy = true;
    1472. 				// comet spark trail
    1473. 				comet.spinRadius = 0.78;
    1474. 				comet.sparkFreq = 16;
    1475. 				if (this.glitter === 'willow' || this.fallingLeaves) {
    1476. 					comet.sparkFreq = 10;
    1477. 					comet.sparkSpeed = 0.5;
    1478. 					comet.sparkLife = 500;
    1479. 					comet.sparkLifeVariation = 3;
    1480. 				}
    1481. 				if (this.color === INVISIBLE) {
    1482. 					comet.sparkColor = COLOR.Gold;
    1483. 				}
    1484.  
    1485. 				comet.onDeath = comet => this.burst(comet.x, comet.y);
    1486. 				// comet.onDeath = () => this.burst(launchX, burstY);
    1487. 			}
    1488.  
    1489. 			burst(x, y) {
    1490. 				// Set burst speed so overall burst grows to set size. This specific formula was derived from testing, and is affected by simulated air drag.
    1491. 				const speed = this.size / 96;
    1492.  
    1493. 				let color, onDeath, sparkFreq, sparkSpeed, sparkLife;
    1494. 				let sparkLifeVariation = 0.25;
    1495.  
    1496. 				if (this.crossette) onDeath = crossetteEffect;
    1497. 				if (this.floral) onDeath = floralEffect;
    1498. 				if (this.crackle) onDeath = crackleEffect;
    1499. 				if (this.fallingLeaves) onDeath = fallingLeavesEffect;
    1500.  
    1501. 				if (this.glitter === 'light') {
    1502. 					sparkFreq = 200;
    1503. 					sparkSpeed = 0.25;
    1504. 					sparkLife = 600;
    1505. 				}
    1506. 				else if (this.glitter === 'medium') {
    1507. 					sparkFreq = 100;
    1508. 					sparkSpeed = 0.36;
    1509. 					sparkLife = 1400;
    1510. 				}
    1511. 				else if (this.glitter === 'heavy') {
    1512. 					sparkFreq = 42;
    1513. 					sparkSpeed = 0.62;
    1514. 					sparkLife = 2800;
    1515. 				}
    1516. 				else if (this.glitter === 'streamer') {
    1517. 					sparkFreq = 20;
    1518. 					sparkSpeed = 0.75;
    1519. 					sparkLife = 800;
    1520. 				}
    1521. 				else if (this.glitter === 'willow') {
    1522. 					sparkFreq = 72;
    1523. 					sparkSpeed = 0.28;
    1524. 					sparkLife = 1000;
    1525. 					sparkLifeVariation = 3.4;
    1526. 				}
    1527.  
    1528. 				const starFactory = angle => {
    1529. 					const star = Star.add(
    1530. 						x,
    1531. 						y,
    1532. 						color || randomColor(),
    1533. 						angle,
    1534. 						// apply near cubic falloff to speed (places more particles towards outside)
    1535. 						Math.pow(Math.random(), 0.45) * speed,
    1536. 						// add minor variation to star life
    1537. 						this.starLife + Math.random() * this.starLife * this.starLifeVariation,
    1538. 						this.horsetail && this.comet && this.comet.speedX,
    1539. 						this.horsetail && this.comet && this.comet.speedY
    1540. 					);
    1541.  
    1542. 					star.onDeath = onDeath;
    1543.  
    1544. 					if (this.glitter) {
    1545. 						star.sparkFreq = sparkFreq;
    1546. 						star.sparkSpeed = sparkSpeed;
    1547. 						star.sparkLife = sparkLife;
    1548. 						star.sparkLifeVariation = sparkLifeVariation;
    1549. 						star.sparkColor = this.glitterColor;
    1550. 						star.sparkTimer = Math.random() * star.sparkFreq;
    1551. 					}
    1552. 				};
    1553.  
    1554.  
    1555. 				if (typeof this.color === 'string') {
    1556. 					if (this.color === 'random') {
    1557. 						color = null; // falsey value creates random color in starFactory
    1558. 					} else {
    1559. 						color = this.color;
    1560. 					}
    1561.  
    1562. 					// Rings have positional randomness, but are rotated randomly
    1563. 					if (this.ring) {
    1564. 						const ringStartAngle = Math.random() * Math.PI;
    1565. 						const ringSquash = Math.pow(Math.random(), 0.45) * 0.992 + 0.008;
    1566.  
    1567. 						createParticleArc(0, PI_2, this.starCount, 0, angle => {
    1568. 							// Create a ring, squashed horizontally
    1569. 							const initSpeedX = Math.sin(angle) * speed * ringSquash;
    1570. 							const initSpeedY = Math.cos(angle) * speed;
    1571. 							// Rotate ring
    1572. 							const newSpeed = MyMath.pointDist(0, 0, initSpeedX, initSpeedY);
    1573. 							const newAngle = MyMath.pointAngle(0, 0, initSpeedX, initSpeedY) + ringStartAngle;
    1574. 							const star = Star.add(
    1575. 								x,
    1576. 								y,
    1577. 								color,
    1578. 								newAngle,
    1579. 								// apply near cubic falloff to speed (places more particles towards outside)
    1580. 								newSpeed,//speed,
    1581. 								// add minor variation to star life
    1582. 								this.starLife + Math.random() * this.starLife * this.starLifeVariation
    1583. 							);
    1584.  
    1585. 							if (this.glitter) {
    1586. 								star.sparkFreq = sparkFreq;
    1587. 								star.sparkSpeed = sparkSpeed;
    1588. 								star.sparkLife = sparkLife;
    1589. 								star.sparkLifeVariation = sparkLifeVariation;
    1590. 								star.sparkColor = this.glitterColor;
    1591. 								star.sparkTimer = Math.random() * star.sparkFreq;
    1592. 							}
    1593. 						});
    1594. 					}
    1595. 					// "Normal burst
    1596. 					else {
    1597. 						createParticleArc(0, PI_2, this.starCount, 1, starFactory);
    1598. 					}
    1599. 				}
    1600. 				else if (Array.isArray(this.color)) {
    1601. 					let start, start2, arc;
    1602. 					if (Math.random() < 0.5) {
    1603. 						start = Math.random() * Math.PI;
    1604. 						start2 = start + Math.PI;
    1605. 						arc = Math.PI;
    1606. 					} else {
    1607. 						start = 0;
    1608. 						start2 = 0;
    1609. 						arc = PI_2;
    1610. 					}
    1611. 					color = this.color[0];
    1612. 					createParticleArc(start, arc, this.starCount / 2, 1, starFactory);
    1613. 					color = this.color[1];
    1614. 					createParticleArc(start2, arc, this.starCount / 2, 1, starFactory)
    1615. 				}
    1616.  
    1617. 				if (this.pistil) {
    1618. 					const innerShell = new Shell({
    1619. 						size: this.size * 0.5,
    1620. 						starLife: this.starLife * 0.7,
    1621. 						starLifeVariation: this.starLifeVariation,
    1622. 						starDensity: 1.65,
    1623. 						color: this.pistilColor,
    1624. 						glitter: 'light',
    1625. 						glitterColor: this.pistilColor === COLOR.Gold ? COLOR.Gold : COLOR.White
    1626. 					});
    1627. 					innerShell.burst(x, y);
    1628. 				}
    1629.  
    1630. 				if (this.streamers) {
    1631. 					const innerShell = new Shell({
    1632. 						size: this.size,
    1633. 						starLife: this.starLife * 0.8,
    1634. 						starLifeVariation: this.starLifeVariation,
    1635. 						starCount: Math.max(6, this.size / 45) | 0,
    1636. 						color: COLOR.White,
    1637. 						glitter: 'streamer'
    1638. 					});
    1639. 					innerShell.burst(x, y);
    1640. 				}
    1641.  
    1642. 				// Queue burst flash render
    1643. 				BurstFlash.add(x, y, this.size / 8);
    1644. 			}
    1645. 		}
    1646.  
    1647.  
    1648.  
    1649. 		const BurstFlash = {
    1650. 			active: [],
    1651. 			_pool: [],
    1652.  
    1653. 			_new() {
    1654. 				return {}
    1655. 			},
    1656.  
    1657. 			add(x, y, radius) {
    1658. 				const instance = this._pool.pop() || this._new();
    1659.  
    1660. 				instance.x = x;
    1661. 				instance.y = y;
    1662. 				instance.radius = radius;
    1663.  
    1664. 				this.active.push(instance);
    1665. 				return instance;
    1666. 			},
    1667.  
    1668. 			returnInstance(instance) {
    1669. 				this._pool.push(instance);
    1670. 			}
    1671. 		};
    1672.  
    1673.  
    1674.  
    1675. 		// Helper to generate objects for storing active particles.
    1676. 		// Particles are stored in arrays keyed by color (code, not name) for improved rendering performance.
    1677. 		function createParticleCollection() {
    1678. 			const collection = {};
    1679. 			COLOR_CODES_W_INVIS.forEach(color => {
    1680. 				collection[color] = [];
    1681. 			});
    1682. 			return collection;
    1683. 		}
    1684.  
    1685. 		const Star = {
    1686. 			// Visual properties
    1687. 			drawWidth: 3,
    1688. 			airDrag: 0.98,
    1689. 			airDragHeavy: 0.992,
    1690.  
    1691. 			// Star particles will be keyed by color
    1692. 			active: createParticleCollection(),
    1693. 			_pool: [],
    1694.  
    1695. 			_new() {
    1696. 				return {};
    1697. 			},
    1698.  
    1699. 			add(x, y, color, angle, speed, life, speedOffX, speedOffY) {
    1700. 				const instance = this._pool.pop() || this._new();
    1701.  
    1702. 				instance.heavy = false;
    1703. 				instance.x = x;
    1704. 				instance.y = y;
    1705. 				instance.prevX = x;
    1706. 				instance.prevY = y;
    1707. 				instance.color = color;
    1708. 				instance.speedX = Math.sin(angle) * speed + (speedOffX || 0);
    1709. 				instance.speedY = Math.cos(angle) * speed + (speedOffY || 0);
    1710. 				instance.life = life;
    1711. 				instance.spinAngle = Math.random() * PI_2;
    1712. 				instance.spinSpeed = 0.8;
    1713. 				instance.spinRadius = 0;
    1714. 				instance.sparkFreq = 0; // ms between spark emissions
    1715. 				instance.sparkSpeed = 1;
    1716. 				instance.sparkTimer = 0;
    1717. 				instance.sparkColor = color;
    1718. 				instance.sparkLife = 750;
    1719. 				instance.sparkLifeVariation = 0.25;
    1720.  
    1721. 				this.active[color].push(instance);
    1722. 				return instance;
    1723. 			},
    1724.  
    1725. 			// Public method for cleaning up and returning an instance back to the pool.
    1726. 			returnInstance(instance) {
    1727. 				// Call onDeath handler if available (and pass it current star instance)
    1728. 				instance.onDeath && instance.onDeath(instance);
    1729. 				// Clean up
    1730. 				instance.onDeath = null;
    1731. 				// Add back to the pool.
    1732. 				this._pool.push(instance);
    1733. 			}
    1734. 		};
    1735.  
    1736.  
    1737. 		const Spark = {
    1738. 			// Visual properties
    1739. 			drawWidth: 0.75,
    1740. 			airDrag: 0.9,
    1741.  
    1742. 			// Star particles will be keyed by color
    1743. 			active: createParticleCollection(),
    1744. 			_pool: [],
    1745.  
    1746. 			_new() {
    1747. 				return {};
    1748. 			},
    1749.  
    1750. 			add(x, y, color, angle, speed, life) {
    1751. 				const instance = this._pool.pop() || this._new();
    1752.  
    1753. 				instance.x = x;
    1754. 				instance.y = y;
    1755. 				instance.prevX = x;
    1756. 				instance.prevY = y;
    1757. 				instance.color = color;
    1758. 				instance.speedX = Math.sin(angle) * speed;
    1759. 				instance.speedY = Math.cos(angle) * speed;
    1760. 				instance.life = life;
    1761.  
    1762. 				this.active[color].push(instance);
    1763. 				return instance;
    1764. 			},
    1765.  
    1766. 			// Public method for cleaning up and returning an instance back to the pool.
    1767. 			returnInstance(instance) {
    1768. 				// Add back to the pool.
    1769. 				this._pool.push(instance);
    1770. 			}
    1771. 		};
    1772.  
    1773.  
    1774.  
    1775. 		init();
    1776. 	script>
    1777. body>
    1778.  
    1779. html>

    二、代码原理

    这段代码的实现原理主要是通过 HTML、CSS 和外部资源（图标、字体和样式表）来构建一个具有烟花秀效果的网页。

    首先，通过标签设置文档的元数据，如字符编码、视口大小等。然后，通过标签引入外部资源，包括图标、字体和样式表。

    在