@mar7th/firework 1.0.0

package/src/demo.js

@@ -0,0 +1,298 @@
+import "./styles.css";
+import SparkFireworks from "./app.js";
+import { eventBus } from "./utils/eventBus.js";
+import { ControlPanel } from "./ui/ControlPanel.js";
+import { PresetManager } from "./ui/PresetManager.js";
+import script1 from "../script/script1.js?raw";
+import script2 from "../script/script2.js?raw";
+import script3 from "../script/script3.js?raw";
+import script4 from "../script/script4.js?raw";
+import script5 from "../script/script5.js?raw";
+
+const appShell = document.querySelector("#app");
+const canvas = document.querySelector("#fireworksCanvas");
+const controlsContainer = document.querySelector("#controls");
+const fpsCounter = document.querySelector("#fpsCounter");
+const toastElement = document.querySelector("#toast");
+const presetSelect = document.querySelector("#presetSelect");
+const resetConfigButton = document.querySelector("#resetConfigButton");
+const savePresetButton = document.querySelector("#savePresetButton");
+const exportButton = document.querySelector("#exportButton");
+const importInput = document.querySelector("#importInput");
+const shareButton = document.querySelector("#shareButton");
+const advancedModeButton = document.querySelector("#advancedModeButton");
+const autoButton = document.querySelector("#autoButton");
+const pauseButton = document.querySelector("#pauseButton");
+const clearButton = document.querySelector("#clearButton");
+const collapseButton = document.querySelector("#collapseButton");
+const advancedScriptInput = document.querySelector("#advancedScriptInput");
+const advancedScriptPresetSelect = document.querySelector("#advancedScriptPresetSelect");
+const applyAdvancedScriptButton = document.querySelector("#applyAdvancedScriptButton");
+const resetAdvancedScriptButton = document.querySelector("#resetAdvancedScriptButton");
+const advancedScriptStatus = document.querySelector("#advancedScriptStatus");
+
+let toastTimer = 0;
+let scriptCompileTimer = 0;
+
+const defaultAdvancedScript = `function createParticles(canvasData) {
+  const particles = [];
+  const count = 360;
+
+  for (let i = 0; i < count; i += 1) {
+    const angle = (i / count) * Math.PI * 2;
+    const petal = 0.6 + Math.abs(Math.sin(angle * 5)) * 0.85;
+    const speed = petal * (3 + Math.random() * 6.5);
+
+    particles.push({
+      x: canvasData.x,
+      y: canvasData.y,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed,
+      size: 2 + Math.random() * 5,
+      life: 72 + Math.random() * 58,
+      startColor: i % 2 === 0 ? "#ffbf4d" : "#ff5a3c",
+      endColor: i % 3 === 0 ? "#fff2d0" : "#d12f2f",
+      textureType: i % 6 === 0 ? "star" : "circle",
+      rotationVelocity: -0.04 + Math.random() * 0.08,
+      secondaryEligible: false
+    });
+  }
+
+  return {
+    config: {
+      gravity: 0.08,
+      damping: 0.988,
+      enableTrails: true,
+      fadeTrail: 0.1,
+      glowIntensity: 1.1,
+      flicker: true,
+      sizeEndMultiplier: 0.25,
+      colorShiftRate: 0.04,
+      windEnabled: false,
+      textureType: "star"
+    },
+    particles
+  };
+}`;
+
+const advancedScriptPresets = [
+  ["default", "默认示例", defaultAdvancedScript],
+  ["script1", "script1：五角星爆炸", script1],
+  ["script2", "script2：爱心爆炸", script2],
+  ["script3", "script3：核心圆与放射线", script3],
+  ["script4", "script4：彩虹多层圆", script4],
+  ["script5", "script5：十二方向二次爆炸", script5]
+];
+
+const toast = (message) => {
+  window.clearTimeout(toastTimer);
+  toastElement.textContent = message;
+  toastElement.classList.add("visible");
+  toastTimer = window.setTimeout(() => toastElement.classList.remove("visible"), 2400);
+};
+
+const fireworks = SparkFireworks.create(canvas, {
+  eventBus,
+  advancedMode: false,
+  createParticles: compileAdvancedScript(defaultAdvancedScript, false),
+  onFpsChange: (fps) => {
+    fpsCounter.textContent = `FPS ${fps}`;
+  },
+  onLowFps: () => {
+    controlPanel.updateValues(fireworks.getConfig());
+    toast("检测到帧率偏低，已降低推荐粒子数量");
+  },
+  onConfigChange: (config) => {
+    controlPanel?.updateValues(config);
+    autoButton.setAttribute("aria-pressed", String(config.autoLaunch));
+  }
+});
+
+advancedModeButton?.setAttribute("aria-pressed", String(fireworks.advancedMode));
+
+const controlPanel = new ControlPanel(
+  controlsContainer,
+  fireworks.getConfig(),
+  eventBus,
+  fireworks.backgroundManager,
+  toast
+);
+controlPanel.render();
+initializeAdvancedScriptEditor();
+
+if (new URLSearchParams(window.location.search).get("embed") === "1") {
+  appShell.classList.add("embed-mode");
+  fireworks.startAutoPlay(1.2);
+}
+
+eventBus.on("config:change", ({ key, value }) => {
+  if (!key) return;
+  fireworks.setConfig({ [key]: value });
+});
+
+const presetManager = new PresetManager(
+  presetSelect,
+  () => fireworks.getConfig(),
+  (config, presetId) => {
+    if (presetId === "default" || presetId?.startsWith?.("builtin:")) {
+      fireworks.selectPreset(presetId);
+      return;
+    }
+    fireworks.setConfig(config);
+  },
+  toast
+);
+presetManager.renderOptions();
+presetManager.bind();
+presetManager.loadFromHash();
+
+resetConfigButton.addEventListener("click", () => {
+  fireworks.resetConfig();
+  toast("已恢复初始化设置");
+});
+
+savePresetButton.addEventListener("click", () => presetManager.saveCurrent());
+exportButton.addEventListener("click", () => presetManager.exportConfig());
+importInput.addEventListener("change", () => {
+  presetManager.importConfig(importInput.files?.[0]);
+  importInput.value = "";
+});
+shareButton.addEventListener("click", () => presetManager.shareConfig());
+
+advancedModeButton?.addEventListener("click", () => {
+  const enabled = !fireworks.advancedMode;
+  const creator = compileAdvancedScript(advancedScriptInput.value);
+  fireworks.setAdvancedMode(enabled, creator);
+  advancedModeButton.setAttribute("aria-pressed", String(enabled));
+  toast(enabled ? "高级模式已开启：所有参数均以脚本设置为准，页面设置可能被覆盖不生效" : "高级模式已关闭");
+});
+
+autoButton.addEventListener("click", () => {
+  const config = fireworks.getConfig();
+  if (config.autoLaunch) {
+    fireworks.stopAutoPlay();
+    toast("自动发射已关闭");
+  } else {
+    fireworks.startAutoPlay();
+    toast("自动发射已开启");
+  }
+});
+
+pauseButton.addEventListener("click", () => {
+  const paused = fireworks.togglePause();
+  pauseButton.setAttribute("aria-pressed", String(paused));
+  pauseButton.textContent = paused ? "恢复" : "暂停";
+});
+
+clearButton.addEventListener("click", () => {
+  fireworks.clearParticles();
+  toast("画布已清除");
+});
+
+collapseButton.addEventListener("click", () => {
+  const collapsed = appShell.classList.toggle("collapsed");
+  collapseButton.textContent = collapsed ? "展开" : "收起";
+  collapseButton.setAttribute("aria-expanded", String(!collapsed));
+  requestAnimationFrame(() => fireworks.resize());
+});
+
+document.addEventListener("visibilitychange", () => {
+  if (document.hidden) {
+    pauseButton.setAttribute("aria-pressed", "true");
+    pauseButton.textContent = "恢复";
+  }
+});
+
+window.fireworks = fireworks;
+
+function initializeAdvancedScriptEditor() {
+  if (!advancedScriptInput) return;
+
+  advancedScriptInput.value = defaultAdvancedScript;
+  initializeAdvancedScriptPresets();
+
+  applyAdvancedScriptButton?.addEventListener("click", () => {
+    const creator = compileAdvancedScript(advancedScriptInput.value);
+    if (creator) {
+      fireworks.setParticleCreator(creator);
+      toast("高级脚本已应用");
+    }
+  });
+
+  resetAdvancedScriptButton?.addEventListener("click", () => {
+    advancedScriptInput.value = defaultAdvancedScript;
+    if (advancedScriptPresetSelect) {
+      advancedScriptPresetSelect.value = "default";
+    }
+    const creator = compileAdvancedScript(defaultAdvancedScript);
+    fireworks.setParticleCreator(creator);
+    toast("已恢复高级脚本示例");
+  });
+
+  advancedScriptInput.addEventListener("input", () => {
+    window.clearTimeout(scriptCompileTimer);
+    scriptCompileTimer = window.setTimeout(() => {
+      const creator = compileAdvancedScript(advancedScriptInput.value, false);
+      if (creator) {
+        fireworks.setParticleCreator(creator);
+      }
+    }, 500);
+  });
+}
+
+function initializeAdvancedScriptPresets() {
+  if (!advancedScriptPresetSelect) return;
+
+  advancedScriptPresetSelect.innerHTML = "";
+  for (const [value, label] of advancedScriptPresets) {
+    const option = document.createElement("option");
+    option.value = value;
+    option.textContent = label;
+    advancedScriptPresetSelect.append(option);
+  }
+
+  advancedScriptPresetSelect.value = "default";
+  advancedScriptPresetSelect.addEventListener("change", () => {
+    const preset = advancedScriptPresets.find(([value]) => value === advancedScriptPresetSelect.value);
+    if (!preset) return;
+    advancedScriptInput.value = preset[2];
+    const creator = compileAdvancedScript(preset[2]);
+    if (creator) {
+      fireworks.setParticleCreator(creator);
+      toast(`已加载${preset[1]}`);
+    }
+  });
+}
+
+function compileAdvancedScript(source, showToast = true) {
+  try {
+    const creatorFactory = new Function(
+      `"use strict";
+${source}
+return createParticles;`
+    );
+    const creator = creatorFactory();
+    if (typeof creator !== "function") {
+      throw new Error("脚本必须声明 createParticles 函数");
+    }
+    const wrappedCreator = (canvasData) => {
+      const result = creator(canvasData);
+      if (Array.isArray(result)) return result;
+      if (result && Array.isArray(result.particles)) return result;
+      return [];
+    };
+    setScriptStatus("脚本已生效；开启高级模式后将使用这段脚本生成粒子。", "ok");
+    return wrappedCreator;
+  } catch (error) {
+    setScriptStatus(`脚本错误：${error.message}`, "error");
+    if (showToast) toast("高级脚本存在语法错误");
+    return null;
+  }
+}
+
+function setScriptStatus(message, type = "") {
+  if (!advancedScriptStatus) return;
+  advancedScriptStatus.textContent = message;
+  advancedScriptStatus.classList.toggle("ok", type === "ok");
+  advancedScriptStatus.classList.toggle("error", type === "error");
+}

package/src/effects/BackgroundManager.js

@@ -0,0 +1,100 @@
+export class BackgroundManager {
+  constructor() {
+    this.image = null;
+    this.imageUrl = "";
+    this.stars = [];
+  }
+
+  resize(width, height) {
+    const count = Math.round(Math.min(260, Math.max(90, (width * height) / 9000)));
+    this.stars = Array.from({ length: count }, () => ({
+      x: Math.random() * width,
+      y: Math.random() * height,
+      r: Math.random() * 1.4 + 0.25,
+      a: Math.random() * 0.65 + 0.18
+    }));
+  }
+
+  setImage(file, onDone, onError) {
+    if (!file) return;
+    if (file.size > 2 * 1024 * 1024) {
+      onError?.("背景图片不能超过 2MB");
+      return;
+    }
+
+    if (this.imageUrl) URL.revokeObjectURL(this.imageUrl);
+    this.imageUrl = URL.createObjectURL(file);
+    const image = new Image();
+    image.onload = () => {
+      this.image = image;
+      onDone?.();
+    };
+    image.onerror = () => {
+      this.image = null;
+      onError?.("背景图片读取失败");
+    };
+    image.src = this.imageUrl;
+  }
+
+  draw(ctx, width, height, config) {
+    if (config.backgroundType === "image" && this.image) {
+      this.drawImage(ctx, width, height, config.backgroundImageMode);
+      return;
+    }
+
+    if (config.backgroundType === "linear") {
+      const gradient = ctx.createLinearGradient(0, 0, width, height);
+      gradient.addColorStop(0, config.backgroundColor);
+      gradient.addColorStop(1, config.backgroundColor2);
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, width, height);
+      return;
+    }
+
+    if (config.backgroundType === "radial" || config.backgroundType === "starfield") {
+      const gradient = ctx.createRadialGradient(width * 0.5, height * 0.35, 0, width * 0.5, height * 0.5, Math.max(width, height));
+      gradient.addColorStop(0, config.backgroundColor2);
+      gradient.addColorStop(1, config.backgroundColor);
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, width, height);
+      if (config.backgroundType === "starfield") this.drawStars(ctx);
+      return;
+    }
+
+    ctx.fillStyle = config.backgroundColor;
+    ctx.fillRect(0, 0, width, height);
+  }
+
+  drawStars(ctx) {
+    ctx.save();
+    for (const star of this.stars) {
+      ctx.fillStyle = `rgba(255, 255, 255, ${star.a})`;
+      ctx.beginPath();
+      ctx.arc(star.x, star.y, star.r, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    ctx.restore();
+  }
+
+  drawImage(ctx, width, height, mode) {
+    if (mode === "tile") {
+      const pattern = ctx.createPattern(this.image, "repeat");
+      ctx.fillStyle = pattern;
+      ctx.fillRect(0, 0, width, height);
+      return;
+    }
+
+    const scale =
+      mode === "contain"
+        ? Math.min(width / this.image.width, height / this.image.height)
+        : Math.max(width / this.image.width, height / this.image.height);
+    const drawWidth = this.image.width * scale;
+    const drawHeight = this.image.height * scale;
+    const x = (width - drawWidth) / 2;
+    const y = (height - drawHeight) / 2;
+
+    ctx.fillStyle = "#050711";
+    ctx.fillRect(0, 0, width, height);
+    ctx.drawImage(this.image, x, y, drawWidth, drawHeight);
+  }
+}