npm - @mar7th/firework - Versions diffs - 1.0.0 - Mend

@mar7th/firework 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/404.html +25 -0
package/LICENSE +21 -0
package/advanced-guide.html +135 -0
package/api-download.html +164 -0
package/demo.html +83 -0
package/dist-lib/spark-fireworks.js +875 -0
package/dist-lib/spark-fireworks.umd.cjs +1 -0
package/docs/api-guide.md +750 -0
package/docs/performance-optimization-plan.md +396 -0
package/examples/production.html +203 -0
package/favicon.jpg +0 -0
package/guide.html +89 -0
package/index.html +60 -0
package/package.json +38 -0
package/script/script1.js +34 -0
package/script/script2.js +38 -0
package/script/script3.js +63 -0
package/script/script4.js +51 -0
package/script/script5.js +55 -0
package/scripts/copy-dist-lib.mjs +4 -0
package/src/app.js +49 -0
package/src/config/defaults.js +302 -0
package/src/core/Firework.js +213 -0
package/src/core/FireworksSimulator.js +439 -0
package/src/core/Particle.js +174 -0
package/src/core/ParticleSystem.js +56 -0
package/src/core/Renderer.js +44 -0
package/src/demo.js +298 -0
package/src/effects/BackgroundManager.js +100 -0
package/src/pages.css +388 -0
package/src/pages.js +1 -0
package/src/plugin.js +9 -0
package/src/styles.css +544 -0
package/src/ui/ControlPanel.js +205 -0
package/src/ui/PerformancePanel.js +23 -0
package/src/ui/PresetManager.js +128 -0
package/src/utils/color.js +54 -0
package/src/utils/eventBus.js +21 -0
package/src/utils/math.js +29 -0
package/vite.config.js +17 -0
package/vite.lib.config.js +19 -0

package/index.html ADDED Viewed

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/jpeg" href="/favicon.jpg" />
+    <title>宵宫的烟花工厂</title>
+    <script>
+      var _hmt = _hmt || [];
+      (function() {
+        var hm = document.createElement("script");
+        hm.src = "https://hm.baidu.com/hm.js?c39438c75acf24e0e70a36e03a29e613";
+        var s = document.getElementsByTagName("script")[0];
+        s.parentNode.insertBefore(hm, s);
+      })();
+    </script>
+    <script type="module" src="/src/pages.js"></script>
+  </head>
+  <body>
+    <main class="site-shell home-shell">
+      <nav class="site-nav" aria-label="站点导航">
+        <a class="brand" href="/">宵宫的烟花工厂</a>
+        <div class="nav-links">
+          <a href="/demo.html">功能演示</a>
+          <a href="/guide.html">使用指导</a>
+          <a href="/advanced-guide.html">高级指导</a>
+          <a href="/api-download.html">API 下载</a>
+        </div>
+      </nav>
+      <section class="hero home-hero">
+        <div class="hero-preview" aria-label="功能演示预览">
+          <iframe src="/demo.html?embed=1" title="SparkFireworks 演示预览"></iframe>
+        </div>
+        <div class="hero-content">
+          <h1>宵宫的烟花工厂</h1>
+          <p>
+            这里是为宵宫准备的网页烟花工坊：调配颜色、选择形状、编写脚本，把夏祭夜空里的每一次绽放都做成专属配方。
+            从功能演示开始制作一束烟花，也可以阅读指南，把这座小小工厂带到自己的页面里。
+          </p>
+          <section class="yoimiya-note" aria-label="宵宫的小纸条">
+            <h2>宵宫的小纸条</h2>
+            <p>
+              宵宫交给你的用来记录烟花配方的纸条，听说只要将这张纸条交给宵宫，她就能做出和你记忆中完全一致的烟花。
+            </p>
+            <p>
+              哪怕时光荏苒，物是人非，只要好好保管手里的这张纸条，就握住了通往过去的门票。希望在漫天烟火之下，你也能想起专属于你的美好。
+            </p>
+          </section>
+          <div class="hero-actions">
+            <a class="button-link primary" href="/demo.html">打开功能演示</a>
+            <a class="button-link" href="/guide.html">阅读使用指导</a>
+            <a class="button-link" href="/api-download.html">下载构建产物</a>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,38 @@
+{
+  "name": "@mar7th/firework",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist-lib/spark-fireworks.umd.cjs",
+  "module": "./dist-lib/spark-fireworks.js",
+  "exports": {
+    ".": {
+      "import": "./dist-lib/spark-fireworks.js",
+      "require": "./dist-lib/spark-fireworks.umd.cjs"
+    }
+  },
+  "files": [
+    "dist-lib",
+    "src",
+    "script",
+    "scripts",
+    "docs",
+    "examples",
+    "*.html",
+    "favicon.jpg",
+    "vite.config.js",
+    "vite.lib.config.js"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "build": "npm run build:lib && vite build && node scripts/copy-dist-lib.mjs",
+    "build:lib": "vite build --config vite.lib.config.js",
+    "prepack": "npm run build:lib",
+    "preview": "vite preview --host 127.0.0.1"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0"
+  }
+}

package/script/script1.js ADDED Viewed

@@ -0,0 +1,34 @@
+function createParticles(canvasData) {
+    const particles = [];
+    const count = 360;
+    const maxRadius = 120;          // 星尖最大半径
+    const minRadius = 45;           // 星凹最小半径
+    const speedScale = 0.12;        // 速度缩放系数
+    for (let i = 0; i < count; i += 1) {
+        const angle = (i / count) * Math.PI * 2;
+        // 五角星半径公式：每72度（2PI/5）出现一个尖角
+        // 0.4 + 0.6 * |cos(2.5*angle)|^0.4 产生尖锐的星形起伏
+        const petalFactor = 0.4 + 0.6 * Math.pow(Math.abs(Math.cos(2.5 * angle)), 0.4);
+        const radius = minRadius + (maxRadius - minRadius) * petalFactor;
+        // 速度方向指向星形轮廓，大小与半径成正比
+        const speed = radius * speedScale;
+        particles.push({
+            x: canvasData.x,
+            y: canvasData.y,
+            vx: Math.cos(angle) * speed,
+            vy: Math.sin(angle) * speed,
+            size: 2 + Math.random() * 4,
+            life: 80 + Math.random() * 40,
+            startColor: i % 2 === 0 ? "#ff6b6b" : "#ffd93d",
+            endColor: i % 3 === 0 ? "#ffffff" : "#6c5ce7",
+            textureType: i % 5 === 0 ? "star" : "circle",
+            rotationVelocity: -0.03 + Math.random() * 0.06,
+            secondaryEligible: false
+        });
+    }
+    return particles;
+}

package/script/script2.js ADDED Viewed

@@ -0,0 +1,38 @@
+function createParticles(canvasData) {
+    const particles = [];
+    const count = 360;
+    const scale = 0.22;              // 控制心形整体大小
+    for (let i = 0; i < count; i += 1) {
+        const t = (i / count) * Math.PI * 2;
+        // 笛卡尔心形参数方程（标准公式）
+        const dx = 16 * Math.pow(Math.sin(t), 3);
+        const dy = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t);
+        // 取反dy使得心形朝上，并乘以缩放系数作为速度
+        const vx = dx * scale;
+        const vy = -dy * scale;
+        particles.push({
+            x: canvasData.x,
+            y: canvasData.y,
+            vx: vx,
+            vy: vy,
+            size: 2.5 + Math.random() * 3.5,
+            life: 90 + Math.random() * 50,
+            startColor: i % 2 === 0 ? "#ff4757" : "#ff6b81",
+            endColor: i % 3 === 0 ? "#ffcccc" : "#c0392b",
+            textureType: "circle",   // 心形适合全部用圆形，更柔美
+            rotationVelocity: 0,
+            secondaryEligible: false
+        });
+    }
+    return {
+        config: {
+            gravity: 0,
+        },
+        particles
+    };
+}

package/script/script3.js ADDED Viewed

@@ -0,0 +1,63 @@
+function createParticles(canvasData) {
+    const particles = [];
+    const total = 360;
+    const circleCount = 120;          // 用于内圈
+    const rayCount = total - circleCount; // 用于射线
+    const numRays = 24;               // 射线数量
+    const particlesPerRay = Math.floor(rayCount / numRays);
+    // ----- 1. 内圈粒子（核心发光圆）-----
+    for (let i = 0; i < circleCount; i += 1) {
+        const angle = (i / circleCount) * Math.PI * 2;
+        const speed = 1.8 + Math.random() * 1.2; // 低速，形成饱满圆圈
+        particles.push({
+            x: canvasData.x,
+            y: canvasData.y,
+            vx: Math.cos(angle) * speed,
+            vy: Math.sin(angle) * speed,
+            size: 3 + Math.random() * 5,
+            life: 60 + Math.random() * 30,
+            startColor: "#ffda79",
+            endColor: "#ffb142",
+            textureType: "circle",
+            rotationVelocity: 0,
+            secondaryEligible: false
+        });
+    }
+    // ----- 2. 射线粒子（光芒）-----
+    for (let j = 0; j < numRays; j += 1) {
+        const baseAngle = (j / numRays) * Math.PI * 2;
+        // 每条射线填充多个粒子，形成粗细和长度变化
+        for (let k = 0; k < particlesPerRay; k += 1) {
+            // 在基础角度附近加微小随机偏移，让射线有自然发散感
+            const angleOffset = (Math.random() - 0.5) * 0.12;
+            const angle = baseAngle + angleOffset;
+            // 速度随机，形成长短不一的芒刺
+            const speed = 4.5 + Math.random() * 8.5;
+            particles.push({
+                x: canvasData.x,
+                y: canvasData.y,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                size: 1.5 + Math.random() * 2.5,
+                life: 70 + Math.random() * 60,
+                startColor: Math.random() > 0.3 ? "#fff5b0" : "#ff9f43",
+                endColor: "#feca57",
+                textureType: "circle",
+                rotationVelocity: 0,
+                secondaryEligible: false
+            });
+        }
+    }
+    return {
+        config: {
+            gravity: 0,
+        },
+        particles
+    };
+}

package/script/script4.js ADDED Viewed

@@ -0,0 +1,51 @@
+function createParticles(canvasData) {
+    const particles = [];
+    const layers = 7;
+    const colors = [
+        "#FF0000", // 红
+        "#FF7F00", // 橙
+        "#FFFF00", // 黄
+        "#00FF00", // 绿
+        "#0000FF", // 蓝
+        "#4B0082", // 靛
+        "#8B00FF"  // 紫
+    ];
+    const particlesPerLayer = 55;      // 每层粒子数量，总数为385
+    const baseRadius = 20;
+    const radiusStep = 15;
+    const speedFactor = 0.10;          // 速度 = 半径 * 该系数，保持同步扩张
+    for (let layer = 0; layer < layers; layer += 1) {
+        const radius = baseRadius + layer * radiusStep;
+        const color = colors[layer];
+        // 为增加层次感，起始色与结束色用同色系深浅搭配
+        const endColor = layer % 2 === 0 ? "#ffffff" : color;
+        for (let i = 0; i < particlesPerLayer; i += 1) {
+            const angle = (i / particlesPerLayer) * Math.PI * 2;
+            const speed = radius * speedFactor;
+            particles.push({
+                x: canvasData.x,
+                y: canvasData.y,
+                vx: Math.cos(angle) * speed,
+                vy: Math.sin(angle) * speed,
+                size: 2.5 + Math.random() * 3,
+                life: 100 + Math.random() * 40,
+                startColor: color,
+                endColor: endColor,
+                textureType: i % 4 === 0 ? "star" : "circle", // 少量星形点缀
+                rotationVelocity: -0.02 + Math.random() * 0.04,
+                secondaryEligible: false
+            });
+        }
+    }
+    return {
+        config: {
+            gravity: 0,
+        },
+        particles
+    };
+}

package/script/script5.js ADDED Viewed

@@ -0,0 +1,55 @@
+function createParticles(canvasData) {
+    const particles = [];
+    const count = 12;
+    const speed = 7.2;
+    for (let i = 0; i < count; i += 1) {
+        const angle = -Math.PI / 2 + (i / count) * Math.PI * 2;
+        const isRed = i % 2 === 0;
+        particles.push({
+            x: canvasData.x,
+            y: canvasData.y,
+            vx: Math.cos(angle) * speed,
+            vy: Math.sin(angle) * speed,
+            size: 5,
+            life: 76,
+            startColor: isRed ? "#ff2d55" : "#2f80ff",
+            endColor: isRed ? "#ff8fa3" : "#8ec5ff",
+            textureType: "circle",
+            rotationVelocity: 0,
+            secondaryEligible: true,
+            secondaryBurstConfig: {
+                particleCount: 42,
+                particleMinSize: 2,
+                particleMaxSize: 4.2,
+                particleLife: 54,
+                initialSpeedMin: 1.7,
+                initialSpeedMax: 5.2,
+                colorStart: "#fff4a3",
+                colorEnd: "#ffffff",
+                useRandomColors: false,
+                textureType: "circle",
+                explosionShape: "sphere",
+                glowIntensity: 1.05,
+                enableTrails: true,
+                fadeTrail: 0.14,
+                flicker: true,
+                enableSecondaryBurst: false
+            }
+        });
+    }
+    return {
+        config: {
+            gravity: 0.08,
+            damping: 0.988,
+            enableTrails: true,
+            glowIntensity: 1,
+            fadeTrail: 0.12,
+            flicker: true,
+            enableSecondaryBurst: true
+        },
+        particles
+    };
+}

package/scripts/copy-dist-lib.mjs ADDED Viewed

@@ -0,0 +1,4 @@
+import { cp, mkdir } from "node:fs/promises";
+await mkdir("dist/dist-lib", { recursive: true });
+await cp("dist-lib", "dist/dist-lib", { recursive: true });

package/src/app.js ADDED Viewed

@@ -0,0 +1,49 @@
+import { builtInPresets, defaultConfig, sanitizeConfig } from "./config/defaults.js";
+import { FireworksSimulator } from "./core/FireworksSimulator.js";
+export { FireworksSimulator, builtInPresets, defaultConfig, sanitizeConfig };
+export function create(canvas, config = {}) {
+  return new FireworksSimulator(normalizeOptions(canvas, config));
+}
+export function init(canvas, config = {}) {
+  return create(canvas, config);
+}
+const SparkFireworks = {
+  create,
+  init,
+  FireworksSimulator,
+  builtInPresets,
+  defaultConfig,
+  sanitizeConfig
+};
+if (typeof window !== "undefined") {
+  window.SparkFireworks = SparkFireworks;
+}
+export default SparkFireworks;
+function normalizeOptions(canvas, config) {
+  const canvasOption = typeof canvas === "string" ? { canvasId: canvas } : { canvas };
+  const looksLikeFullOptions =
+    config &&
+    typeof config === "object" &&
+    ("config" in config ||
+      "onConfigChange" in config ||
+      "onFpsChange" in config ||
+      "onLowFps" in config ||
+      "clickToLaunch" in config ||
+      "keyboard" in config ||
+      "autoResize" in config ||
+      "pauseOnHidden" in config ||
+      "initialLaunch" in config ||
+      "advancedMode" in config ||
+      "createParticles" in config);
+  return looksLikeFullOptions
+    ? { ...config, ...canvasOption }
+    : { ...canvasOption, config };
+}