function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清屏
    particles.forEach(p => {
        p.update();   // 更新邏輯
        p.draw(ctx);  // 繪製
    });
    requestAnimationFrame(animate); // 下一幀遞歸調用
}
animate();

setInterval(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(p => {
        p.update();
        p.draw(ctx);
    });
}, 1000 / 60); // ~16.67ms

function loop() {
    // 動畫邏輯...
    setTimeout(loop, 16.7);
}

let lastTime = 0;

function animate(currentTime) {
    const deltaTime = (currentTime - lastTime) / 1000; // 轉換為秒
    lastTime = currentTime;

    if (deltaTime > 0.1) deltaTime = 0.1; // 防止極端卡頓導致突變

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    particles.forEach(p => {
        p.update(deltaTime); // 關鍵：傳入時間增量
        p.draw(ctx);
    });

    requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

graph TD
    A[開始新幀] --> B{獲取當前時間戳}
    B --> C[計算 deltaTime = (now - last)/1000]
    C --> D[更新所有粒子狀態 using deltaTime]
    D --> E[清除畫布]
    E --> F[繪製所有粒子]
    F --> G[保存當前時間為 lastTime]
    G --> H[requestAnimationFrame(animate)]

canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', handleMouseUp);

sequenceDiagram
    participant User
    participant Canvas
    User->>Canvas: 按下鼠標 (mousedown)
    Canvas-->>JS: 觸發 mousedown 事件
    User->>Canvas: 移動鼠標 (持續 move)
    Canvas-->>JS: 多次觸發 mousemove
    User->>Canvas: 釋放鼠標 (mouseup)
    Canvas-->>JS: 觸發 mouseup 事件

let isDrawing = false;

function handleMouseDown(e) {
    isDrawing = true;
    emitParticle(e); // 立即發射一個
}

function handleMouseMove(e) {
    if (isDrawing) {
        emitParticle(e, { rate: 10 }); // 控制頻率
    }
}

function handleMouseUp() {
    isDrawing = false;
}

function getMousePos(canvas, e) {
    return {
        x: e.offsetX || (e.clientX - canvas.getBoundingClientRect().left),
        y: e.offsetY || (e.clientY - canvas.getBoundingClientRect().top)
    };
}

const STATES = {
    IDLE: 'idle',
    DRAGGING: 'dragging',
    HOVER: 'hover'
};

let currentState = STATES.IDLE;
let mousePos = { x: 0, y: 0 };

canvas.addEventListener('mousedown', () => {
    if (currentState === STATES.IDLE) {
        currentState = STATES.DRAGGING;
        startEmitting();
    }
});

canvas.addEventListener('mouseup', () => {
    if (currentState === STATES.DRAGGING) {
        currentState = STATES.IDLE;
        stopEmitting();
    }
});

canvas.addEventListener('mousemove', (e) => {
    mousePos = getMousePos(canvas, e);
    if (currentState === STATES.IDLE) {
        showCursorEffect(mousePos);
    }
});

class Particle {
    constructor(x, y, vx, vy, life = 2.0) {
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
        this.ax = 0;
        this.ay = 0.1; // 模擬重力
        this.life = life;
        this.maxLife = life;
        this.size = 8;
        this.color = '#ffcc00';
    }
}

update(deltaTime) {
    this.vx += this.ax * deltaTime;
    this.vy += this.ay * deltaTime;
    this.x += this.vx * deltaTime;
    this.y += this.vy * deltaTime;

    this.life -= deltaTime;
    this.size = 8 * (this.life / this.maxLife); // 隨壽命縮小

    // 邊界檢測：觸底反彈
    if (this.y > canvas.height - this.size) {
        this.y = canvas.height - this.size;
        this.vy *= -0.6; // 彈性衰減
    }

    return this.life > 0; // 存活標誌
}

draw(ctx) {
    const alpha = this.life / this.maxLife;
    ctx.save();
    ctx.globalAlpha = alpha;
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
}

const particles = []; // 活躍粒子列表
const renderer = {
    render(particles, ctx) {
        particles.forEach(p => p.draw(ctx));
    }
};

class Vector {
    constructor(x = 0, y = 0) {
        this.x = x;
        this.y = y;
    }

    add(v) { this.x += v.x; this.y += v.y; }
    mult(scalar) { this.x *= scalar; this.y *= scalar; }
    copy() { return new Vector(this.x, this.y); }
}

class Particle {
    constructor(x, y) {
        this.position = new Vector(x, y);
        this.velocity = new Vector(0, 0);
        this.acceleration = new Vector(0, 0.05); // 模擬重力
        this.lifeSpan = 255; // 初始生命值
    }

    update() {
        this.velocity.add(this.acceleration);
        this.position.add(this.velocity);
        this.lifeSpan -= 2; // 每幀減少生命值
    }
}

graph TD
    A[創建粒子] --> B[設定初始位置]
    B --> C[初始化速度與加速度]
    C --> D[進入動畫循環]
    D --> E{是否存活?}
    E -->|是| F[調用update()]
    F --> G[渲染粒子]
    G --> D
    E -->|否| H[從渲染隊列移除]

class Particle {
    constructor(x, y) {
        this.position = new Vector(x, y);
        this.velocity = new Vector(random(-2, 2), random(-5, -1)); // 隨機初速度
        this.acceleration = new Vector(0, 0.05);
        this.size = random(2, 6); // 粒子半徑範圍 [2,6]
        this.maxLife = this.lifeSpan = Math.floor(random(60, 120)); // 壽命60~120幀
        this.color = `hsl(${random(40, 60)}, 100%, 50%)`; // 黃橙色調
    }

    update() {
        this.velocity.add(this.acceleration);
        this.position.add(this.velocity);
        this.lifeSpan--; // 生命遞減
        this.alpha = this.lifeSpan / this.maxLife; // 透明度隨生命線性下降
    }
}

// 輔助函數：生成區間內的浮點隨機數
function random(min, max) {
    return Math.random() * (max - min) + min;
}

function createExplosionParticles(centerX, centerY, count = 50) {
    const particles = [];
    for (let i = 0; i < count; i++) {
        const angle = random(0, 2 * Math.PI); // 全向分佈
        const speed = random(2, 5);
        const vx = Math.cos(angle) * speed;
        const vy = Math.sin(angle) * speed;

        const p = new Particle(centerX, centerY);
        p.velocity = new Vector(vx, vy);
        particles.push(p);
    }
    return particles;
}

pie
    title 發射方向分佈模式
    “全向圓周” ： 70
    “半圓扇形” ： 20
    “錐形窄束” ： 10

function lerpColor(start, end, t) {
    return {
        r: Math.floor(start.r + (end.r - start.r) * t),
        g: Math.floor(start.g + (end.g - start.g) * t),
        b: Math.floor(start.b + (end.b - start.b) * t),
        a: start.a + (end.a - start.a) * t
    };
}

// 使用示例
const yellow = { r: 255, g: 255, b: 0, a: 1 };
const red = { r: 255, g: 0, b: 0, a: 0.8 };
const black = { r: 0, g: 0, b: 0, a: 0 };

// 在渲染時根據生命週期插值
const lifeRatio = particle.lifeSpan / particle.maxLife;
let colorStage;

if (lifeRatio > 0.6) {
    colorStage = lerpColor(yellow, red, (0.6 - lifeRatio) / 0.4);
} else {
    colorStage = lerpColor(red, black, (0.6 - lifeRatio) / 0.6);
}

class ColorGradient {
    constructor(stops) {
        this.stops = stops.sort((a, b) => a.offset - b.offset);
    }

    getColor(t) {
        for (let i = 0; i < this.stops.length - 1; i++) {
            const curr = this.stops[i], next = this.stops[i + 1];
            if (t >= curr.offset && t <= next.offset) {
                const localT = (t - curr.offset) / (next.offset - curr.offset);
                return lerpColor(curr.color, next.color, localT);
            }
        }
        return this.stops[this.stops.length - 1].color;
    }
}

ctx.globalAlpha = 0.8; // 所有後續繪製操作自動帶有80%不透明度
ctx.fillStyle = 'rgba(255,100,0,1)';
particles.forEach(p => drawParticle(ctx, p));
ctx.globalAlpha = 1.0; // 恢復默認

ctx.globalCompositeOperation = 'lighter';
ctx.globalAlpha = 0.6;
drawFlameParticles(ctx, particles); // 多次繪製增強亮度
ctx.globalAlpha = 1.0;
ctx.globalCompositeOperation = 'source-over'; // 恢復正常

const flameColors = new ColorGradient([
    { offset: 0.0, color: { r: 255, g: 255, b: 0, a: 1 } },   // 黃
    { offset: 0.4, color: { r: 255, g: 165, b: 0, a: 0.9 } }, // 橙
    { offset: 0.7, color: { r: 255, g: 69, b: 0, a: 0.7 } },  // 紅
    { offset: 1.0, color: { r: 0, g: 0, b: 0, a: 0 } }       // 黑
]);

// 渲染時調用
const normalizedLife = 1 - (particle.lifeSpan / particle.maxLife);
const c = flameColors.getColor(normalizedLife);
ctx.fillStyle = `rgba(${c.r},${c.g},${c.b},${c.a})`;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();

graph LR
    subgraph 顏色演化流程
        A[獲取lifeRatio] --> B[計算normalizedLife]
        B --> C[查詢ColorGradient]
        C --> D[得到RGBA值]
        D --> E[設置fillStyle]
        E --> F[執行繪製]
    end

const particles = [];

function animate() {
    ctx.clearRect(0, 0, width, height);

    for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].render(ctx);

        if (particles[i].lifeSpan <= 0) {
            particles.splice(i, 1);
            i--; // 防止跳過元素
        }
    }

    requestAnimationFrame(animate);
}

// 標記無效粒子，最後一次性過濾
particles = particles.filter(p => {
    p.update();
    p.render(ctx);
    return p.lifeSpan > 0;
});

class ParticlePool {
    constructor(maxParticles = 1000) {
        this.pool = [];
        this.active = [];
        for (let i = 0; i < maxParticles; i++) {
            this.pool.push(new Particle(0, 0));
        }
    }

    acquire(x, y) {
        if (this.pool.length === 0) return null;
        const p = this.pool.pop();
        p.reset(x, y); // 重置狀態
        this.active.push(p);
        return p;
    }

    release(particle) {
        const index = this.active.indexOf(particle);
        if (index !== -1) {
            this.active.splice(index, 1);
            this.pool.push(particle);
        }
    }

    updateAll() {
        for (let p of this.active) {
            p.update();
            if (p.lifeSpan <= 0) {
                this.release(p);
            }
        }
    }

    renderAll(ctx) {
        for (let p of this.active) p.render(ctx);
    }
}

let animId;

function startAnimation() {
    animId = requestAnimationFrame(loop);
}

function stopAnimation() {
    if (animId) {
        cancelAnimationFrame(animId);
        animId = null;
    }
    particlePool.active.forEach(p => particlePool.release(p));
}

flowchart TB
    A[啓動動畫] --> B[請求下一幀]
    B --> C[更新所有粒子]
    C --> D{是否有存活粒子?}
    D -->|是| B
    D -->|否| E[停止動畫循環]
    E --> F[釋放所有粒子回池]
    F --> G[清理上下文狀態]

function animate(timestamp) {
    // 計算自上次渲染以來的時間差（delta time）
    if (!this.lastTime) this.lastTime = timestamp;
    const deltaTime = timestamp - this.lastTime;
    this.lastTime = timestamp;

    updatePhysics(deltaTime);   // 更新粒子位置、速度等
    render();                   // 渲染到Canvas

    requestAnimationFrame(animate);
}

let lastTime = null;
requestAnimationFrame(animate);

sequenceDiagram
    participant Browser as 瀏覽器渲染線程
    participant JS as JavaScript 引擎
    participant RAF as requestAnimationFrame

    Browser->>RAF: 觸發 VSync 信號 (每16.67ms)
    RAF->>JS: 調度動畫回調
    JS->>JS: 執行 update() 和 render()
    JS-->>Browser: 提交渲染指令
    Browser->>Screen: 繪製新幀
    Note right of Browser: 若回調耗時過長<br/>可能導致跳幀

let animationId = null;

function startAnimation() {
    function loop(timestamp) {
        update(timestamp);
        render();
        animationId = requestAnimationFrame(loop);
    }
    animationId = requestAnimationFrame(loop);
}

function stopAnimation() {
    if (animationId !== null) {
        cancelAnimationFrame(animationId);
        animationId = null;
    }
}

class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.vx = 100; // px/s
        this.vy = 50;
    }

    update(deltaTime) {
        // deltaTime 單位為 ms，需轉換為秒
        this.x += this.vx * (deltaTime / 1000);
        this.y += this.vy * (deltaTime / 1000);
    }
}

const MAX_DELTA = 100; // 最大允許 100ms 的跳躍
const clampedDeltaTime = Math.min(deltaTime, MAX_DELTA);

updatePhysics(clampedDeltaTime);

function animate(timestamp) {
    performance.mark('frame-start');

    update(timestamp);
    render();

    performance.mark('frame-end');
    performance.measure('frame-duration', 'frame-start', 'frame-end');

    const measures = performance.getEntriesByName('frame-duration');
    console.log(`幀耗時: ${measures[measures.length - 1].duration.toFixed(2)}ms`);

    requestAnimationFrame(animate);
}

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 半透明黑
ctx.fillRect(0, 0, canvas.width, canvas.height);

function render() {
    // 1. 繪製背景（可選半透明）
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. 繪製粒子羣
    particles.forEach(p => {
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
        ctx.fillStyle = p.color;
        ctx.fill();
    });

    // 3. 繪製UI元素（FPS、按鈕等）
    drawUI();
}

let mouseX = 0, mouseY = 0;
let particles = [];

function update(deltaTime) {
    // 應用物理規則
    particles.forEach((p, i) => {
        p.velocity.y -= p.gravity;          // 上升減速（模擬浮力）
        p.x += p.velocity.x * (deltaTime / 1000);
        p.y += p.velocity.y * (deltaTime / 1000);
        p.life -= deltaTime;

        if (p.life <= 0) {
            particles.splice(i, 1);         // 移除死亡粒子
        }
    });

    // 響應用户輸入（假設鼠標為引力中心）
    const dx = mouseX - canvas.width / 2;
    const dy = mouseY - canvas.height / 2;
    const dist = Math.hypot(dx, dy);
    const force = Math.min(dist / 100, 5);

    particles.forEach(p => {
        p.x += dx / dist * force;
        p.y += dy / dist * force;
    });
}

graph TD
    A[requestAnimationFrame] --> B{計算 deltaTime}
    B --> C[更新粒子物理狀態]
    C --> D[處理用户輸入影響]
    D --> E[清除畫布]
    E --> F[分層繪製]
    F --> G[提交下一幀]
    G --> A

const fpsCounter = {
    frames: 0,
    lastTime: performance.now(),
    current: 0,

    tick() {
        const now = performance.now();
        this.frames++;

        if (now >= this.lastTime + 1000) {
            this.current = Math.round(this.frames * 1000 / (now - this.lastTime));
            this.frames = 0;
            this.lastTime = now;
        }
    },

    display(ctx) {
        ctx.fillStyle = 'white';
        ctx.font = '18px sans-serif';
        ctx.fillText(`FPS: ${this.current}`, 10, 30);
    }
};

// 在主循環中調用
function animate(timestamp) {
    fpsCounter.tick();

    update(timestamp);
    render();
    fpsCounter.display(ctx);

    requestAnimationFrame(animate);
}

class ParticlePool {
    constructor(size = 1000) {
        this.pool = [];
        for (let i = 0; i < size; i++) {
            this.pool.push(new Particle());
        }
    }

    acquire(x, y) {
        const p = this.pool.pop() || new Particle();
        p.init(x, y); // 重置狀態
        return p;
    }

    release(particle) {
        this.pool.push(particle.reset());
    }
}

const KPI = {
    maxFrameTime: 16,       // 超過16ms報警
    minFPS: 50,             // 低於50fps告警
    maxParticles: 5000,     // 粒子上限

    check(frameTime, fps, particleCount) {
        if (frameTime > this.maxFrameTime) {
            console.warn(`⚠️ 幀耗時超標: ${frameTime.toFixed(2)}ms`);
        }
        if (fps < this.minFPS) {
            console.warn(`⚠️ FPS過低: ${fps}fps`);
        }
        if (particleCount > this.maxParticles) {
            console.warn(`⚠️ 粒子數量過多: ${particleCount}`);
        }
    }
};

const canvas = document.getElementById('particleCanvas');
let isDrawing = false;

canvas.addEventListener('mousedown', (e) => {
    isDrawing = true;
    emitParticles(e); // 發射初始粒子
});

canvas.addEventListener('mousemove', (e) => {
    if (isDrawing) {
        emitParticles(e, 3); // 每次移動發射3個粒子
    }
});

canvas.addEventListener('mouseup', () => {
    isDrawing = false;
});

function getMousePos(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    };
}

function emitParticles(event, count = 1) {
    const pos = getMousePos(canvas, event);
    for (let i = 0; i < count; i++) {
        particles.push(new Particle(pos.x, pos.y));
    }
}

stateDiagram-v2
    [*] --> Idle
    Idle --> Pressing: mousedown
    Pressing --> Drawing: move > threshold
    Pressing --> ClickRelease: mouseup within 300ms
    Drawing --> Idle: mouseup
    ClickRelease --> Idle: cleanup

let pressTimer = null;
let startPos = null;

canvas.addEventListener('mousedown', (e) => {
    startPos = getMousePos(canvas, e);
    pressTimer = setTimeout(() => {
        isLongPress = true;
    }, 500);
});

canvas.addEventListener('mousemove', (e) => {
    if (isLongPress || (pressTimer && distance(startPos, getMousePos(canvas, e)) > 10)) {
        clearTimeout(pressTimer);
        isDrawing = true;
        emitParticles(e, 5); // 強激發
    }
});

canvas.addEventListener('mouseup', () => {
    clearTimeout(pressTimer);
    if (!isDrawing && !isLongPress) {
        emitParticles(e, 2); // 輕點擊，少量粒子
    }
    resetInteractionState();
});

class TracingParticle extends Particle {
    constructor(x, y) {
        super(x, y);
        this.targetX = 0;
        this.targetY = 0;
        this.attractForce = 0.05; // 吸引係數
    }

    update(mouseX, mouseY) {
        // 計算指向鼠標的單位向量
        const dx = mouseX - this.x;
        const dy = mouseY - this.y;
        const dist = Math.sqrt(dx * dx + dy * dy);

        if (dist > 1) {
            this.vx += (dx / dist) * this.attractForce;
            this.vy += (dy / dist) * this.attractForce;
        }

        // 應用阻尼，防止震盪
        this.vx *= 0.92;
        this.vy *= 0.92;

        super.update(); // 調用父類位置更新
    }
}

function createExplosion(x, y, count = 50) {
    for (let i = 0; i < count; i++) {
        const angle = (i / count) * Math.PI * 2; // 均勻角度
        const speed = 2 + Math.random() * 3;     // 隨機初速

        const vx = Math.cos(angle) * speed;
        const vy = Math.sin(angle) * speed;

        particles.push(new ExplodingParticle(x, y, vx, vy));
    }
}

function applyGlobalAttraction(particles, mouseX, mouseY) {
    particles.forEach(p => {
        const dx = mouseX - p.x;
        const dy = mouseY - p.y;
        const distSq = dx * dx + dy * dy;
        const minDist = 100; // 防止過近導致劇烈抖動
        const maxForce = 0.4;

        if (distSq < minDist * minDist) return; // 近距忽略

        const dist = Math.sqrt(distSq);
        const force = Math.min(maxForce, 100 / distSq); // 反平方衰減

        p.vx += (dx / dist) * force;
        p.vy += (dy / dist) * force;
    });
}

function throttle(func, delay) {
    let lastCall = 0;
    return function (...args) {
        const now = Date.now();
        if (now - lastCall >= delay) {
            func.apply(this, args);
            lastCall = now;
        }
    };
}

// 使用方式
const throttledEmit = throttle((e) => emitParticles(e, 2), 100);
canvas.addEventListener('mousemove', (e) => {
    if (isDrawing) throttledEmit(e);
});

const MAX_PARTICLES = 1000;

function emitParticles(e, count) {
    const pos = getMousePos(canvas, e);
    for (let i = 0; i < count; i++) {
        if (particles.length >= MAX_PARTICLES) {
            // 移除最老的粒子（FIFO）
            particles.shift();
        }
        particles.push(new Particle(pos.x, pos.y));
    }
}

graph LR
    A[Main Thread] -- postMessage --> B[Worker Thread]
    B -- 計算位置/速度 --> C[返回更新數據]
    C -- transferable objects --> A
    A -- 渲染 --> D[Canvas]

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>魔幻火焰粒子系統</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      background: #000;
    }
    canvas {
      display: block;
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>
<body>
  <canvas id="fireCanvas"></canvas>
  <script src="fire.js"></script>
</body>
</html>

const canvas = document.getElementById('fireCanvas');
const ctx = canvas.getContext('2d');

// 動態適配設備像素比，避免模糊
function resizeCanvas() {
  const dpr = window.devicePixelRatio || 1;
  canvas.width = window.innerWidth * dpr;
  canvas.height = window.innerHeight * dpr;
  ctx.scale(dpr, dpr); // 縮放繪圖座標系
  canvas.style.width = window.innerWidth + 'px';
  canvas.style.height = window.innerHeight + 'px';
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas(); // 初始執行一次

const CONFIG = {
  particleCount: 150,           // 單次發射粒子數
  emissionRate: 8,              // 每幀新增粒子數（鼠標按下時）
  gravity: 0.05,                // 向上加速度（負值表示向上）
  wind: 0.02,                   // 水平擾動力
  friction: 0.97,               // 空氣阻力系數
  minSpeed: 1.5,                // 最小初速度
  maxSpeed: 3.5,                // 最大初速度
  lifeSpan: [60, 100],          // 生命週期幀數範圍
  size: { start: 12, end: 0 },  // 起始與結束大小
  color: {
    start: [255, 255, 180],     // 亮黃色
    mid: [255, 120, 0],         // 橙紅色
    end: [30, 30, 30, 0]        // 黑煙透明
  },
  noiseScale: 0.005,            // 噪聲函數輸入縮放因子
  noiseStrength: 0.8            // 噪聲擾動強度
};

let particles = [];
let isMouseDown = false;
let mouseX = 0, mouseY = 0;

function animate(timestamp) {
  ctx.clearRect(0, 0, canvas.width / devicePixelRatio, canvas.height / devicePixelRatio);

  if (isMouseDown) {
    emitParticles();
  }

  updateParticles();
  renderParticles();

  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

graph TD
    A[頁面加載] --> B[獲取Canvas元素]
    B --> C[獲取2D上下文]
    C --> D[設置DPR適配]
    D --> E[定義CONFIG配置對象]
    E --> F[監聽窗口resize事件]
    F --> G[註冊requestAnimationFrame主循環]
    G --> H[清空畫布]
    H --> I{鼠標是否按下?}
    I -- 是 --> J[發射新粒子]
    I -- 否 --> K[跳過發射]
    J --> L[更新所有粒子狀態]
    K --> L
    L --> M[繪製所有粒子]
    M --> N[請求下一幀]
    N --> H

class Particle {
  constructor(x, y, vx, vy, life) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.life = life;
    this.maxLife = life;
    this.size = CONFIG.size.start;
    this.opacity = 1;
    this.color = [...CONFIG.color.start]; // 複製初始顏色數組
  }

  update() {
    // 應用力學模型
    this.vx += (Math.random() - 0.5) * CONFIG.wind; // 微小橫向擾動
    this.vy += CONFIG.gravity;                     // 上升加速度（負重力）
    this.vx *= CONFIG.friction;                    // 空氣阻力
    this.vy *= CONFIG.friction;

    this.x += this.vx;
    this.y += this.vy;

    // 生命值遞減
    this.life--;
    const lifeRatio = this.life / this.maxLife;

    // 大小線性衰減
    this.size = CONFIG.size.start * lifeRatio + CONFIG.size.end * (1 - lifeRatio);

    // 透明度非線性衰減（先慢後快）
    this.opacity = Math.pow(lifeRatio, 2);

    // 顏色插值：三段式漸變
    if (lifeRatio > 0.6) {
      this.color = interpolateColor(CONFIG.color.start, CONFIG.color.mid, (0.6 - (1 - lifeRatio)) / 0.6);
    } else {
      this.color = interpolateColor(CONFIG.color.mid, CONFIG.color.end, (0.4 - lifeRatio) / 0.4);
    }
  }

  isDead() {
    return this.life <= 0;
  }
}

function interpolateColor(c1, c2, t) {
  return c1.map((channel, i) => Math.round(channel + (c2[i] - channel) * t));
}

function emitParticles() {
  for (let i = 0; i < CONFIG.emissionRate; i++) {
    const angle = Math.random() * Math.PI; // 半圓向上噴射
    const speed = CONFIG.minSpeed + Math.random() * (CONFIG.maxSpeed - CONFIG.minSpeed);
    const vx = Math.cos(angle) * speed * (Math.random() > 0.5 ? 1 : -1);
    const vy = -Math.sin(angle) * speed; // 負號表示向上
    const life = CONFIG.lifeSpan[0] + Math.random() * (CONFIG.lifeSpan[1] - CONFIG.lifeSpan[0]);

    particles.push(new Particle(mouseX, mouseY, vx, vy, life));
  }
}

function updateParticles() {
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    if (particles[i].isDead()) {
      particles.splice(i, 1); // 移除死亡粒子
    }
  }
}

function renderParticles() {
  particles.forEach(p => {
    ctx.globalAlpha = p.opacity;
    ctx.fillStyle = `rgb(${p.color[0]}, ${p.color[1]}, ${p.color[2]})`;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
    ctx.fill();
  });
  ctx.globalAlpha = 1; // 重置透明度
}

class SimplexNoise {
  constructor() {
    this.perm = Array(512).fill(0).map(() => Math.floor(Math.random() * 255));
  }

  noise(x, y) {
    const X = Math.floor(x) % 255;
    const Y = Math.floor(y) % 255;

    const xf = x - Math.floor(x);
    const yf = y - Math.floor(y);

    const topRight = this.perm[X + 1] + this.perm[Y];
    const topLeft = this.perm[X] + this.perm[Y];
    const bottomRight = this.perm[X + 1] + this.perm[Y + 1];
    const bottomLeft = this.perm[X] + this.perm[Y + 1];

    const dotTop = this.interpolate(topLeft, topRight, xf);
    const dotBottom = this.interpolate(bottomLeft, bottomRight, xf);
    return this.interpolate(dotTop, dotBottom, yf);
  }

  interpolate(a, b, t) {
    const ft = t * t * (3 - 2 * t); // 平滑插值曲線
    return a * (1 - t) + b * ft;
  }
}

const noiseGen = new SimplexNoise();

// 替換原有的隨機風力
const noiseX = noiseGen.noise(this.x * CONFIG.noiseScale, this.y * CONFIG.noiseScale) * 2 - 1;
this.vx += noiseX * CONFIG.noiseStrength;

// 在renderParticles中增加外圈模糊層
ctx.globalAlpha = p.opacity * 0.6;
ctx.fillStyle = `rgba(255, 165, 0, ${p.opacity})`;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size * 1.8, 0, Math.PI * 2);
ctx.fill();

/fire-project
├── index.html
├── core/
│   ├── CanvasManager.js
│   ├── Particle.js
│   └── AnimationLoop.js
├── utils/
│   ├── Noise.js
│   └── ColorUtils.js
└── effects/
    └── FireEffect.js

class FireParticleSystem {
  constructor(canvasId, options = {}) {
    Object.assign(CONFIG, options);
    this.canvas = document.getElementById(canvasId);
    this.ctx = this.canvas.getContext('2d');
    this.particles = [];
    this.initEventListeners();
    this.animate = this.animate.bind(this);
    requestAnimationFrame(this.animate);
  }

  setOption(key, value) {
    CONFIG[key] = value;
  }

  destroy() {
    cancelAnimationFrame(this.animationId);
    this.particles.length = 0;
  }
}

// 使用方式
const fireSys = new FireParticleSystem('fireCanvas', {
  particleCount: 200,
  color: { start: [255, 220, 100], mid: [255, 80, 0] }
});

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 暫停動畫
  } else {
    // 恢復
  }
});

let frameCount = 0;
let lastTime = 0;

function animate(timestamp) {
  if (!lastTime) lastTime = timestamp;
  frameCount++;
  if (timestamp - lastTime >= 1000) {
    console.log(`FPS: ${frameCount}`);
    frameCount = 0;
    lastTime = timestamp;
  }
  // ...其餘邏輯
}

const textureLoader = async (urls) => {
  const promises = urls.map(src => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => resolve({ src, img });
      img.onerror = reject;
      img.src = src;
    });
  });

  return await Promise.allSettled(promises);
};

// 使用示例
const textures = await textureLoader([
  '/particles/fire.png',
  '/particles/smoke.png'
]);

// worker.js
self.onmessage = function(e) {
  const { particles, deltaTime } = e.data;
  const updated = particles.map(p => ({
    ...p,
    x: p.x + p.vx * deltaTime,
    y: p.y + p.vy * deltaTime,
    life: p.life - 0.01
  }));
  self.postMessage(updated);
};

// 主線程中啓動worker
const worker = new Worker('particle-worker.js');
worker.postMessage({ particles, deltaTime });
worker.onmessage = e => {
  renderParticles(e.data); // 渲染返回結果
};

const offscreen = document.createElement('canvas').transferControlToOffscreen();
offscreen.width = 32;
offscreen.height = 32;

const ctx = offscreen.getContext('2d');
ctx.shadowBlur = 15;
ctx.shadowColor = 'rgba(255, 165, 0, 0.8)';
ctx.fillStyle = 'orange';
ctx.beginPath();
ctx.arc(16, 16, 12, 0, Math.PI * 2);
ctx.fill();

// 將 offscreen canvas 傳遞給 worker 或主渲染層複用

#canvas-container {
  will-change: transform; /* 告知將頻繁變換 */
  contain: paint; /* 限制繪製範圍 */
}

let isMobile = /Mobi|Android/i.test(navigator.userAgent);

if (isMobile) {
  canvas.addEventListener('touchstart', handleTouchStart);
  canvas.addEventListener('touchmove', throttle(handleTouchMove, 16));
} else {
  canvas.addEventListener('mousemove', handleMouseMove);
}

function textToParticles(ctx, text, font = '64px Arial') {
  ctx.font = font;
  const metrics = ctx.measureText(text);
  const { width, actualBoundingBoxAscent } = metrics;
  // 創建臨時canvas提取像素
  const temp = document.createElement('canvas');
  temp.width = width;
  temp.height = actualBoundingBoxAscent * 2;
  const tCtx = temp.getContext('2d');
  tCtx.font = font;
  tCtx.fillText(text, 0, actualBoundingBoxAscent);

  const pixels = tCtx.getImageData(0, 0, temp.width, temp.height).data;
  const points = [];

  for (let y = 0; y < temp.height; y += 4) {
    for (let x = 0; x < temp.width; x += 4) {
      const i = (y * temp.width + x) * 4;
      if (pixels[i + 3] > 128) { // alpha > 50%
        points.push({ x, y });
      }
    }
  }

  return points; // 返回可用於發射粒子的座標集
}

graph TD
    A[Audio Source] --> B[AudioContext]
    B --> C[AnalyserNode]
    C --> D[getByteFrequencyData]
    D --> E[映射到粒子大小/顏色]
    E --> F[requestAnimationFrame渲染]

const analyser = audioCtx.createAnalyser();
analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

function updateFromAudio() {
  analyser.getByteFrequencyData(dataArray);
  const avg = dataArray.slice(0, 32).reduce((a, b) => a + b) / 32;
  particleEnergy = avg / 255; // 歸一化為0~1
}

const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(maxParticles * 3);
const velocities = new Float32Array(maxParticles * 3);

geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('velocity', new THREE.BufferAttribute(velocities, 3));

const material = new THREE.ShaderMaterial({
  vertexShader: /* GLSL 動態更新位置 */,
  fragmentShader: /* 發光、透明混合 */
});

CSS.paintWorklet.addModule('particle-painter.js');

/* 在CSS中使用 */
.element {
  background: paint(particleEffect);
}