@mar7th/firework 1.0.0

package/src/config/defaults.js

@@ -0,0 +1,302 @@
+export const MAX_PARTICLES = 1400;
+
+export const defaultConfig = {
+  particleCount: 180,
+  particleMinSize: 2.5,
+  particleMaxSize: 7,
+  sizeEndMultiplier: 0.35,
+  gravity: 0.18,
+  damping: 0.982,
+  initialSpeedMin: 2.8,
+  initialSpeedMax: 8.2,
+  particleLife: 94,
+  rotationSpeed: 0.025,
+  colorShiftRate: 0.035,
+  colorStart: "#ffbf4d",
+  colorEnd: "#ff5a3c",
+  useRandomColors: false,
+  textureType: "circle",
+  glowIntensity: 0.9,
+  explosionShape: "sphere",
+  enableSecondaryBurst: false,
+  secondaryBurstRatio: 0.2,
+  enableTrails: true,
+  showLaunchTrail: true,
+  windEnabled: false,
+  windX: 0,
+  windY: 0,
+  flicker: true,
+  fadeTrail: 0.18,
+  autoLaunch: false,
+  autoInterval: 900,
+  autoLaunchIntervalSeconds: 0.9,
+  backgroundType: "starfield",
+  backgroundColor: "#170d17",
+  backgroundColor2: "#3a1a24",
+  backgroundImageMode: "cover"
+};
+
+export const controlsSchema = [
+  {
+    title: "样式",
+    controls: [
+      { key: "colorStart", label: "起始颜色", type: "color" },
+      { key: "colorEnd", label: "结束颜色", type: "color" },
+      { key: "useRandomColors", label: "随机颜色", type: "boolean" },
+      {
+        key: "textureType",
+        label: "粒子形状",
+        type: "select",
+        options: [
+          ["circle", "圆形"],
+          ["square", "方形"],
+          ["star", "星形"],
+          ["heart", "心形"]
+        ]
+      },
+      { key: "glowIntensity", label: "辉光强度", type: "range", min: 0, max: 1.5, step: 0.05 }
+    ]
+  },
+  {
+    title: "特效",
+    controls: [
+      {
+        key: "explosionShape",
+        label: "爆炸形状",
+        type: "select",
+        options: [
+          ["sphere", "球形"],
+          ["ring", "环形"],
+          ["starburst", "星形"],
+          ["flower", "花朵"],
+          ["willow", "柳絮"],
+          ["scatter", "随机散落"],
+          ["heart", "爱心"]
+        ]
+      },
+      {
+        key: "enableSecondaryBurst",
+        label: "二次爆炸",
+        type: "boolean",
+        hint: "二次爆炸对性能影响较大，谨慎开启。"
+      },
+      {
+        key: "secondaryBurstRatio",
+        label: "二次比例",
+        type: "range",
+        min: 0,
+        max: 1,
+        step: 0.05,
+        hint: "这里只控制二次爆炸比例；自定义二次爆炸效果需要使用高级模式自定义脚本。"
+      },
+      { key: "enableTrails", label: "粒子拖尾", type: "boolean", hint: "拖尾会影响性能，酌情开启。" },
+      { key: "showLaunchTrail", label: "升空轨迹", type: "boolean" },
+      { key: "windEnabled", label: "风场", type: "boolean" },
+      { key: "windX", label: "水平风", type: "range", min: -0.35, max: 0.35, step: 0.01 },
+      { key: "windY", label: "垂直风", type: "range", min: -0.35, max: 0.35, step: 0.01 },
+      { key: "flicker", label: "闪烁", type: "boolean" },
+      { key: "fadeTrail", label: "拖尾长度", type: "range", min: 0.04, max: 0.55, step: 0.01 }
+    ]
+  },
+  {
+    title: "粒子",
+    controls: [
+      { key: "particleCount", label: "粒子数量", type: "range", min: 10, max: 1000, step: 10 },
+      { key: "initialSpeedMin", label: "最小速度", type: "range", min: 0, max: 20, step: 0.1 },
+      { key: "initialSpeedMax", label: "最大速度", type: "range", min: 0, max: 20, step: 0.1 },
+      { key: "damping", label: "速度衰减", type: "range", min: 0.95, max: 1, step: 0.001 },
+      { key: "gravity", label: "重力影响", type: "range", min: -1, max: 2, step: 0.01 },
+      { key: "particleLife", label: "生命周期", type: "range", min: 30, max: 180, step: 1 },
+      { key: "particleMinSize", label: "最小大小", type: "range", min: 2, max: 15, step: 0.5 },
+      { key: "particleMaxSize", label: "最大大小", type: "range", min: 2, max: 15, step: 0.5 },
+      { key: "sizeEndMultiplier", label: "结束比例", type: "range", min: 0, max: 2, step: 0.05 },
+      { key: "rotationSpeed", label: "旋转速度", type: "range", min: 0, max: 0.105, step: 0.005 },
+      { key: "colorShiftRate", label: "变色速率", type: "range", min: 0, max: 0.1, step: 0.005 },
+      { key: "autoLaunchIntervalSeconds", label: "自动间隔(秒)", type: "range", min: 0.25, max: 3, step: 0.05 }
+    ]
+  },
+  {
+    title: "背景",
+    controls: [
+      {
+        key: "backgroundType",
+        label: "背景样式",
+        type: "select",
+        options: [
+          ["solid", "纯色"],
+          ["linear", "线性渐变"],
+          ["radial", "径向渐变"],
+          ["starfield", "星空"],
+          ["image", "图片"]
+        ]
+      },
+      { key: "backgroundColor", label: "背景色 A", type: "color" },
+      { key: "backgroundColor2", label: "背景色 B", type: "color" },
+      {
+        key: "backgroundImageMode",
+        label: "图片填充",
+        type: "select",
+        options: [
+          ["cover", "覆盖"],
+          ["contain", "完整"],
+          ["tile", "平铺"]
+        ]
+      },
+      { key: "backgroundImage", label: "上传图片", type: "file" }
+    ]
+  }
+];
+
+export const builtInPresets = {
+  "classic-gold": {
+    name: "经典礼花",
+    config: {
+      colorStart: "#ffd166",
+      colorEnd: "#ff3d2e",
+      explosionShape: "sphere",
+      particleCount: 220,
+      gravity: 0.22,
+      damping: 0.981,
+      glowIntensity: 0.9,
+      enableSecondaryBurst: false,
+      textureType: "circle",
+      fadeTrail: 0.18
+    }
+  },
+  aurora: {
+    name: "梦幻极光",
+    config: {
+      colorStart: "#4cc9f0",
+      colorEnd: "#80ffdb",
+      explosionShape: "ring",
+      particleCount: 260,
+      gravity: 0.03,
+      damping: 0.992,
+      glowIntensity: 1.1,
+      fadeTrail: 0.08,
+      textureType: "circle"
+    }
+  },
+  fountain: {
+    name: "星光喷泉",
+    config: {
+      colorStart: "#f7f3a1",
+      colorEnd: "#fca311",
+      explosionShape: "flower",
+      particleCount: 420,
+      particleMinSize: 2,
+      particleMaxSize: 4.5,
+      initialSpeedMin: 4,
+      initialSpeedMax: 11,
+      gravity: 0.32,
+      damping: 0.976,
+      textureType: "star"
+    }
+  },
+  ghost: {
+    name: "幽灵鬼火",
+    config: {
+      colorStart: "#7bdff2",
+      colorEnd: "#b2f7ef",
+      explosionShape: "scatter",
+      particleCount: 160,
+      initialSpeedMin: 0.8,
+      initialSpeedMax: 4.6,
+      gravity: -0.01,
+      damping: 0.989,
+      enableSecondaryBurst: true,
+      glowIntensity: 1.2,
+      fadeTrail: 0.12
+    }
+  },
+  meteor: {
+    name: "节日流星",
+    config: {
+      colorStart: "#ffafcc",
+      colorEnd: "#ffffff",
+      explosionShape: "willow",
+      particleCount: 300,
+      initialSpeedMin: 7,
+      initialSpeedMax: 13,
+      damping: 0.965,
+      gravity: 0.16,
+      windEnabled: true,
+      windX: 0.12,
+      textureType: "square"
+    }
+  },
+  heart: {
+    name: "爱心爆发",
+    config: {
+      colorStart: "#ff4d6d",
+      colorEnd: "#ffd6e0",
+      explosionShape: "heart",
+      particleCount: 260,
+      gravity: 0.08,
+      damping: 0.986,
+      textureType: "heart",
+      glowIntensity: 1
+    }
+  }
+};
+
+export function sanitizeConfig(input) {
+  const clean = { ...defaultConfig };
+  if (!input || typeof input !== "object") {
+    return clean;
+  }
+
+  const schemas = controlsSchema.flatMap((section) => section.controls);
+  for (const item of schemas) {
+    if (!(item.key in input)) continue;
+
+    if (item.type === "range") {
+      const value = Number(input[item.key]);
+      if (Number.isFinite(value)) {
+        clean[item.key] = Math.min(item.max, Math.max(item.min, value));
+      }
+    } else if (item.type === "boolean") {
+      clean[item.key] = Boolean(input[item.key]);
+    } else if (item.type === "select") {
+      const allowed = item.options.map(([value]) => value);
+      if (allowed.includes(input[item.key])) clean[item.key] = input[item.key];
+    } else if (item.type === "color") {
+      const value = String(input[item.key]);
+      if (/^#[0-9a-f]{6}$/i.test(value)) clean[item.key] = value;
+    }
+  }
+
+  if ("autoLaunch" in input) {
+    clean.autoLaunch = Boolean(input.autoLaunch);
+  }
+
+  if ("autoInterval" in input) {
+    const intervalMs = Number(input.autoInterval);
+    if (Number.isFinite(intervalMs)) {
+      clean.autoInterval = clamp(intervalMs, 250, 3000);
+      clean.autoLaunchIntervalSeconds = toSeconds(clean.autoInterval);
+    }
+  }
+
+  if ("autoLaunchIntervalSeconds" in input) {
+    const intervalSeconds = Number(input.autoLaunchIntervalSeconds);
+    if (Number.isFinite(intervalSeconds)) {
+      clean.autoLaunchIntervalSeconds = clamp(intervalSeconds, 0.25, 3);
+      clean.autoInterval = toMilliseconds(clean.autoLaunchIntervalSeconds);
+    }
+  }
+
+  return clean;
+}
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function toMilliseconds(seconds) {
+  return Math.round(seconds * 1000);
+}
+
+function toSeconds(milliseconds) {
+  return Math.round((milliseconds / 1000) * 100) / 100;
+}

package/src/core/Firework.js

@@ -0,0 +1,213 @@
+import { random, randomInt } from "../utils/math.js";
+import { randomVividColor } from "../utils/color.js";
+
+export class FireworkFactory {
+  constructor(getConfig) {
+    this.getConfig = getConfig;
+  }
+
+  createExplosion(x, y, override = {}) {
+    const config = { ...this.getConfig(), ...override };
+    const count = Math.min(1000, Math.max(10, Math.round(config.particleCount)));
+    const particles = [];
+    const randomStart = config.useRandomColors ? randomVividColor() : config.colorStart;
+    const randomEnd = config.useRandomColors ? randomVividColor() : config.colorEnd;
+    const secondaryCount = config.enableSecondaryBurst
+      ? Math.round(count * clampRatio(config.secondaryBurstRatio))
+      : 0;
+    const secondaryIndexes = createSecondaryIndexes(count, secondaryCount);
+
+    for (let i = 0; i < count; i += 1) {
+      const vector = createVector(config.explosionShape, i, count);
+      const speed = vector.speedMultiplier * random(config.initialSpeedMin, config.initialSpeedMax);
+      const jitterX = config.explosionShape === "heart" ? vector.offsetX : 0;
+      const jitterY = config.explosionShape === "heart" ? vector.offsetY : 0;
+      const startColor = config.useRandomColors && i % 4 === 0 ? randomVividColor() : randomStart;
+      const endColor = config.useRandomColors && i % 5 === 0 ? randomVividColor() : randomEnd;
+      const size = random(config.particleMinSize, config.particleMaxSize);
+      const life = random(config.particleLife * 0.78, config.particleLife * 1.18);
+
+      particles.push({
+        x: x + jitterX,
+        y: y + jitterY,
+        vx: vector.x * speed,
+        vy: vector.y * speed,
+        size,
+        life,
+        startColor,
+        endColor,
+        textureType: config.textureType,
+        rotationVelocity: random(-config.rotationSpeed, config.rotationSpeed),
+        secondaryEligible: secondaryIndexes.has(i)
+      });
+    }
+
+    return particles;
+  }
+
+  createSubExplosion(x, y, source = null) {
+    const baseConfig = source?.config || this.getConfig();
+    const particleConfig = this.createConfigFromParticle(source, baseConfig);
+    const overrides = source?.secondaryBurstConfig || {};
+    const config = {
+      ...particleConfig,
+      ...overrides,
+      enableSecondaryBurst: false
+    };
+    const particleCount = "particleCount" in overrides
+      ? config.particleCount
+      : Math.max(12, Math.round(particleConfig.particleCount * 0.16));
+    const particleLife = "particleLife" in overrides
+      ? config.particleLife
+      : Math.max(28, particleConfig.particleLife * 0.48);
+    const initialSpeedMin = "initialSpeedMin" in overrides
+      ? config.initialSpeedMin
+      : Math.max(0.4, particleConfig.initialSpeedMin * 0.38);
+    const initialSpeedMax = "initialSpeedMax" in overrides
+      ? config.initialSpeedMax
+      : Math.max(1, particleConfig.initialSpeedMax * 0.56);
+
+    return this.createExplosion(x, y, {
+      ...config,
+      particleCount,
+      particleLife,
+      initialSpeedMin,
+      initialSpeedMax,
+      enableSecondaryBurst: false
+    });
+  }
+
+  createConfigFromParticle(source, baseConfig) {
+    if (!source) return baseConfig;
+    return {
+      ...baseConfig,
+      colorStart: source.startColor || baseConfig.colorStart,
+      colorEnd: source.endColor || baseConfig.colorEnd,
+      useRandomColors: false,
+      textureType: source.textureType || baseConfig.textureType,
+      particleMinSize: source.size,
+      particleMaxSize: source.size,
+      particleLife: source.maxLife,
+      enableSecondaryBurst: false
+    };
+  }
+
+  createLaunch(startX, startY, targetX, targetY) {
+    const config = this.getConfig();
+    return new LaunchShell(startX, startY, targetX, targetY, config);
+  }
+}
+
+function clampRatio(value) {
+  if (!Number.isFinite(Number(value))) return 0;
+  return Math.min(1, Math.max(0, Number(value)));
+}
+
+function createSecondaryIndexes(count, secondaryCount) {
+  const indexes = new Set();
+  while (indexes.size < secondaryCount) {
+    indexes.add(randomInt(0, count - 1));
+  }
+  return indexes;
+}
+
+export class LaunchShell {
+  constructor(startX, startY, targetX, targetY, config) {
+    this.x = startX;
+    this.y = startY;
+    this.targetX = targetX;
+    this.targetY = targetY;
+    this.color = config.colorStart;
+    this.life = 1;
+    this.path = [];
+    const dx = targetX - startX;
+    const dy = targetY - startY;
+    const distance = Math.hypot(dx, dy) || 1;
+    const speed = Math.min(18, Math.max(9, distance / 28));
+    this.vx = (dx / distance) * speed;
+    this.vy = (dy / distance) * speed;
+  }
+
+  update(step) {
+    this.path.push({ x: this.x, y: this.y });
+    if (this.path.length > 18) this.path.shift();
+    this.x += this.vx * step;
+    this.y += this.vy * step;
+    this.vy += 0.03 * step;
+    return Math.hypot(this.targetX - this.x, this.targetY - this.y) < 14 || this.vy > 1.5;
+  }
+
+  draw(ctx, showTrail) {
+    ctx.save();
+    ctx.strokeStyle = "rgba(255, 230, 170, 0.35)";
+    ctx.fillStyle = this.color;
+    ctx.shadowColor = this.color;
+    ctx.shadowBlur = 16;
+
+    if (showTrail && this.path.length > 1) {
+      ctx.beginPath();
+      this.path.forEach((point, index) => {
+        if (index === 0) ctx.moveTo(point.x, point.y);
+        else ctx.lineTo(point.x, point.y);
+      });
+      ctx.stroke();
+    }
+
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+  }
+}
+
+function createVector(shape, index, count) {
+  if (shape === "ring") {
+    const angle = (index / count) * Math.PI * 2;
+    return { x: Math.cos(angle), y: Math.sin(angle), speedMultiplier: 1 };
+  }
+
+  if (shape === "starburst") {
+    const spoke = randomInt(0, 4);
+    const base = (spoke / 5) * Math.PI * 2 - Math.PI / 2;
+    const angle = base + random(-0.16, 0.16);
+    return { x: Math.cos(angle), y: Math.sin(angle), speedMultiplier: index % 3 === 0 ? 1.25 : 0.62 };
+  }
+
+  if (shape === "flower") {
+    const angle = (index / count) * Math.PI * 2;
+    const petal = 0.58 + Math.abs(Math.sin(angle * 6)) * 0.72;
+    return { x: Math.cos(angle), y: Math.sin(angle), speedMultiplier: petal };
+  }
+
+  if (shape === "willow") {
+    const angle = random(-Math.PI * 0.92, -Math.PI * 0.08);
+    return { x: Math.cos(angle), y: Math.sin(angle), speedMultiplier: random(0.28, 1.35) };
+  }
+
+  if (shape === "scatter") {
+    const angle = random(0, Math.PI * 2);
+    return { x: Math.cos(angle), y: Math.sin(angle), speedMultiplier: random(0.2, 1.55) };
+  }
+
+  if (shape === "heart") {
+    const t = random(0, Math.PI * 2);
+    const hx = 16 * Math.pow(Math.sin(t), 3);
+    const hy = -(
+      13 * Math.cos(t) -
+      5 * Math.cos(2 * t) -
+      2 * Math.cos(3 * t) -
+      Math.cos(4 * t)
+    );
+    const length = Math.hypot(hx, hy) || 1;
+    return {
+      x: hx / length,
+      y: hy / length,
+      offsetX: hx * 1.8,
+      offsetY: hy * 1.8,
+      speedMultiplier: random(0.72, 1.12)
+    };
+  }
+
+  const angle = random(0, Math.PI * 2);
+  return { x: Math.cos(angle), y: Math.sin(angle), speedMultiplier: Math.sqrt(Math.random()) };
+}