从像素到粒子：p5.js 图像转动态粒子的设计与实现

export type MySketchProps = SketchProps & {

  activeAnim: boolean;

  imageIdx: number; //

  id?: string;

  particleConfig?: ParticleConfig;

};

// 粒子配置接口

type ParticleConfig = {

  closeEnoughTarget: number; // 目标接近距离

  speed: number; // 移动速度

  mouseSize: number; // 鼠标影响范围

  scaleRatio: number; // 缩放比例

  particleSize: number; // 粒子大小

  maxSpeedRange?: [number, number]; // 最大速度范围

  maxForceRange?: [number, number]; // 最大力范围

  colorBlendRate?: [number, number]; // 颜色混合率

  noiseScale?: number; // 噪声缩放

  noiseStrength?: number; // 噪声强度

};

p5.preload = () => {

  for (let i = 0; i < sourceImgInfos.length; i++) {

    const img = p5.loadImage(sourceImgInfos[i].url);

    const [width, height] = sourceImgInfos[i]?.resize ?? [0, 0];

    const scaleNum = sourceImgInfos[i]?.scaleNum ?? defaultConfig.scaleNum;

    if (width && height) {

      img.resize(width * scaleNum, height * scaleNum);

    } else {

      img.resize(img.width * scaleNum, img.height * scaleNum);

    }

    sourceImgs.push(img);

  }

};

function setImageIdx(idx: number) {

  // 1. 参数解构与默认值处理

  const {

    loadPercentage = defaultConfig.loadPercentage, // 粒子加载密度 (默认: 0.0007)

    resolution = defaultConfig.resolution, // 分辨率倍数 (移动端: 15, 桌面端: 5)

  } = sourceImgInfos[idx] ?? {};

  const sourceImg = sourceImgs[idx];

  // 2. 图像像素数据加载

  sourceImg.loadPixels();

  // 3. 对象池初始化

  const preParticleIndexes = allParticles.map((_, index) => index);

  // 4. 随机采样阈值预计算

  const randomThreshold = loadPercentage * resolution;

  // 5. 像素遍历与粒子分配

  for (let y = 0; y < imgHeight; y++) {

    for (let x = 0; x < imgWidth; x++) {

      // 6. RGBA 像素数据读取

      const pixelR = sourceImg.pixels[pixelIndex++];

      const pixelG = sourceImg.pixels[pixelIndex++];

      const pixelB = sourceImg.pixels[pixelIndex++];

      const pixelA = sourceImg.pixels[pixelIndex++];

      // 7. 透明度过滤优化（若 alpha 值小于 128，我们认为它是透明的，则跳过这个粒子）

      if (pixelA < 128) continue;

      // 8. 随机采样控制粒子密度，决定是否将粒子分配给该像素。

      if (p5.random(1.0) > randomThreshold) continue;

      const pixelColor = p5.color(pixelR, pixelG, pixelB);

      let newParticle: Particle;

      // 9. 智能粒子对象池管理

      if (preParticleIndexes.length > 0) {

        // 9a. 随机选择现有粒子进行复用

        const randomIndex = Math.floor(p5.random(preParticleIndexes.length));

        const index = preParticleIndexes[randomIndex];

        // 9b. O (1) 快速移除策略：将最后元素移到当前位置

        preParticleIndexes[randomIndex] =

          preParticleIndexes[preParticleIndexes.length - 1];

        preParticleIndexes.pop();

        newParticle = allParticles[index];

      } else {

        // 10. 创建新粒子 - 仅在对象池耗尽时

        newParticle = new Particle(

          p5.width / 2, // 初始 x 坐标（画布中心）

          p5.height / 2, // 初始 y 坐标（画布中心）

          p5,

          IS_MOBILE,

          currentParticleConfig

        );

        allParticles.push(newParticle);

      }

      // 11. 坐标系转换与粒子移动最终位置目标设置

      newParticle.target.x = x + p5.width / 2 - sourceImg.width / 2;

      newParticle.target.y = y + p5.height / 2 - sourceImg.height / 2;

      newParticle.endColor = pixelColor;

    }

  }

  // 12. 清理未分配的粒子

  const preLen = preParticleIndexes.length;

  if (preLen > 0) {

    for (let i = 0; i < preLen; i++) {

      const index = preParticleIndexes[i];

      allParticles[index].kill(); // 标记为死亡状态

      allParticles[index].endColor = p5.color(0); // 设置为透明

    }

  }

}

//p5.js 中的 pixels 数组是一维数组，按 RGBA 顺序存储

// 对于 100x100 的图像，数组长度为 100 * 100 * 4 = 40,000

// 索引计算：像素 (x,y) 的 R 通道位于 ((y * width + x) * 4) 位置

const pixelIndex = (y * sourceImg.width + x) * 4;

const [r, g, b, a] = [

  sourceImg.pixels[pixelIndex], // Red

  sourceImg.pixels[pixelIndex + 1], // Green

  sourceImg.pixels[pixelIndex + 2], // Blue

  sourceImg.pixels[pixelIndex + 3], // Alpha

];

// 传统方法（性能差）：

for (const pixel of pixels) {

  const particle = new Particle(); // 每次都创建新对象

  particles.push(particle);

}

// 对象池优化方法：

const preParticleIndexes = allParticles.map((_, index) => index);

// 这创建了一个索引数组 [0, 1, 2, ..., n-1]

// 随机选择策略避免视觉上的规律性

const randomIndex = Math.floor(p5.random(preParticleIndexes.length));

const actualIndex = preParticleIndexes[randomIndex];

// O (1) 移除技巧：swap and pop

preParticleIndexes[randomIndex] =

  preParticleIndexes[preParticleIndexes.length - 1];

preParticleIndexes.pop();

const randomThreshold = loadPercentage * resolution;

// 示例：loadPercentage = 0.0007, resolution = 5

// randomThreshold = 0.0035

// 意味着每个像素有 0.35% 的概率被选中创建粒子

//p5.random (1.0) 生成 [0, 1) 的随机数

// 只有当随机数 <= randomThreshold 时才创建粒子

if (p5.random(1.0) > randomThreshold) continue;

// 图像坐标转换为画布中心坐标

newParticle.target.x = x + p5.width / 2 - sourceImg.width / 2;

newParticle.target.y = y + p5.height / 2 - sourceImg.height / 2;

// 分解理解：

//x: 图像内的像素 x 坐标 (0 到 sourceImg.width-1)

//p5.width/ 2: 画布中心 x 坐标

//sourceImg.width/ 2: 图像中心偏移量

// 结果：将图像中心对齐到画布中心

if (pixelA < 128) continue; // 半透明阈值判断

// 步骤 12：清理未分配的粒子

const preLen = preParticleIndexes.length;

if (preLen > 0) {

  for (let i = 0; i < preLen; i++) {

    const index = preParticleIndexes[i];

    allParticles[index].kill(); // 触发粒子的消失动画

    allParticles[index].endColor = p5.color(0); // 变透明

  }

}

export class Particle {

  p5: P5CanvasInstance<MySketchProps>;

  // 物理属性

  pos: P5.Vector; // 当前位置

  vel: P5.Vector; // 速度向量

  acc: P5.Vector; // 加速度向量

  target: P5.Vector; // 目标位置

  distToTarget: number = 0;

  // 视觉属性

  currentColor: P5.Color; // 当前颜色

  endColor: P5.Color; // 目标颜色

  currentSize: number; // 当前大小

  // 生命周期状态

  isKilled: boolean = false;

  config: ParticleConfig;

  noiseOffsetX: number; // 随机噪声偏移 X

  noiseOffsetY: number; // 随机噪声偏移 Y

  // 优化用的可重用向量

  private tempVec1: P5.Vector;

  private tempVec2: P5.Vector;

  private tempVec3: P5.Vector;

  constructor(

    x: number,

    y: number,

    p5: P5CanvasInstance<MySketchProps>,

    isMobile?: boolean,

    config?: ParticleConfig

  ) {

    this.p5 = p5;

    this.config =

      config ??

      {

        /* 默认配置 */

      };

    // 初始化物理属性

    this.pos = new P5.Vector(x, y);

    this.vel = new P5.Vector(0, 0);

    this.acc = new P5.Vector(0, 0);

    this.target = new P5.Vector(0, 0);

    // 随机化属性增加自然感

    this.maxSpeed = p5.random(maxSpeedRange[0], maxSpeedRange[1]);

    this.maxForce = p5.random(maxForceRange[0], maxForceRange[1]);

    this.colorBlendRate = p5.random(

      colorBlendRateRange[0],

      colorBlendRateRange[1]

    );

    this.noiseOffsetX = p5.random(1000);

    this.noiseOffsetY = p5.random(1000);

    // 初始化可重用向量（避免频繁内存分配）

    this.tempVec1 = new P5.Vector();

    this.tempVec2 = new P5.Vector();

    this.tempVec3 = new P5.Vector();

  }

  /**

   * 粒子运动逻辑 - 整合了寻径、噪声扰动、鼠标交互等多种物理模拟

   * 该方法在每一帧被调用，负责更新粒子的位置、速度和加速度

   */

  public move() {

    const p5 = this.p5;

    const { closeEnoughTarget, speed, scaleRatio, mouseSize } = this.config;

    // 1. 添加 Perlin 噪声扰动，让粒子运动更自然

    const noiseScale = this.config.noiseScale ?? 0.005;

    const noiseStrength = this.config.noiseStrength ?? 0.6;

    this.tempVec1.set(

      p5.noise(

        this.noiseOffsetX + this.pos.x * noiseScale,

        this.pos.y * noiseScale

      ) *

        noiseStrength -

        noiseStrength / 2,

      p5.noise(

        this.noiseOffsetY + this.pos.y * noiseScale,

        this.pos.x * noiseScale

      ) *

        noiseStrength -

        noiseStrength / 2

    );

    this.acc.add(this.tempVec1);

    // 2. 计算到目标的距离（寻径行为核心）

    const dx = this.target.x - this.pos.x;

    const dy = this.target.y - this.pos.y;

    const distSq = dx * dx + dy * dy;

    this.distToTarget = Math.sqrt(distSq);

    // 3. 接近减速机制 - 防止粒子在目标位置震荡

    let proximityMult = 1;

    if (this.distToTarget < closeEnoughTarget) {

      proximityMult = this.distToTarget / closeEnoughTarget;

      this.vel.mult(0.9); // 强阻尼，快速稳定

    } else {

      this.vel.mult(0.95); // 轻阻尼，保持流畅运动

    }

    // 4. 朝向目标的寻径力

    if (distSq > 1) {

      this.tempVec2.set(this.target.x - this.pos.x, this.target.y - this.pos.y);

      this.tempVec2.normalize();

      this.tempVec2.mult(this.maxSpeed * proximityMult * speed);

      this.acc.add(this.tempVec2);

    }

    // 5. 鼠标交互系统

    const scaledMouseX = p5.mouseX / scaleRatio; // 这里是因为图像 scale 了，鼠标位置也需要

    const scaledMouseY = p5.mouseY / scaleRatio;

    const mouseDx = scaledMouseX - this.pos.x;

    const mouseDy = scaledMouseY - this.pos.y;

    const mouseDistSq = mouseDx * mouseDx + mouseDy * mouseDy;

    if (mouseDistSq < mouseSize * mouseSize) {

      const mouseDist = Math.sqrt(mouseDistSq);

      if (p5.mouseIsPressed) {

        // 鼠标按下：吸引粒子

        this.tempVec3.set(mouseDx, mouseDy);

      } else {

        // 鼠标悬停：排斥粒子

        this.tempVec3.set(-mouseDx, -mouseDy);

      }

      this.tempVec3.normalize();

      this.tempVec3.mult((mouseSize - mouseDist) * 0.05);

      this.acc.add(this.tempVec3);

    }

    // 6. 应用物理更新：加速度→速度→位置

    this.vel.add(this.acc);

    this.vel.limit(this.maxForce * speed);

    this.pos.add(this.vel);

    this.acc.mult(0); // 重置加速度，为下一帧准备

    // 7. 更新噪声偏移，保持噪声的连续性

    this.noiseOffsetX += 0.01;

    this.noiseOffsetY += 0.01;

  }

  /**

   * 粒子渲染逻辑 - 处理颜色过渡、大小变化和最终绘制

   * 该方法负责粒子的视觉表现，包括颜色插值和大小映射

   */

  public draw() {

    const p5 = this.p5;

    const { closeEnoughTarget, particleSize } = this.config;

    // 1. 颜色平滑过渡 - 使用线性插值实现自然的颜色变化

    this.currentColor = p5.lerpColor(

      this.currentColor,

      this.endColor,

      this.colorBlendRate

    );

    p5.stroke(this.currentColor);

    // 2. 基于距离的动态大小计算

    let targetSize = 2; // 默认最小大小

    if (!this.isKilled) {

      // 距离目标越近，粒子越大，营造 "到达感"

      targetSize = p5.map(

        p5.min(this.distToTarget, closeEnoughTarget),

        closeEnoughTarget,

        0,

        0,

        particleSize

      );

    }

    // 3. 大小平滑过渡 - 避免突变，保持视觉连贯性

    this.currentSize = p5.lerp(this.currentSize, targetSize, 0.1);

    // 4. 设置绘制属性并渲染粒子

    p5.strokeWeight(this.currentSize);

    p5.point(this.pos.x, this.pos.y); // 以点的形式绘制粒子

  }

  // 边界检测 - 超出屏幕的粒子标记为死亡

  public isOutOfBounds(): boolean {

    const margin = 50;

    return (

      this.pos.x < -margin ||

      this.pos.x > this.p5.width + margin ||

      this.pos.y < -margin ||

      this.pos.y > this.p5.height + margin

    );

  }

  // 粒子的回收清理

  public kill(): void {}

}

// 语法：lerpColor (c1, c2, amt)

// 在两个颜色之间进行线性插值

//amt: 0-1 之间的值，0 返回 c1，1 返回 c2

this.currentColor = p5.lerpColor(

  this.currentColor,

  this.endColor,

  this.colorBlendRate

);

// 语法：noise (x, [y], [z])

// 生成连续的伪随机噪声值

const noiseValue = p5.noise(

  this.noiseOffsetX + this.pos.x * noiseScale,

  this.pos.y * noiseScale

);

// 语法：map (value, start1, stop1, start2, stop2)

// 将值从一个范围映射到另一个范围

targetSize = p5.map(

  p5.min(this.distToTarget, closeEnoughTarget),

  closeEnoughTarget,

  0,

  0,

  particleSize

);

// 创建向量

const vel = new P5.Vector(x, y);

// 向量运算

vel.normalize(); // 标准化：保持方向，长度变成 1

vel.mult(magnitude); // 缩放：改变长度，保持方向

vel.add(otherVector); // 相加：两个力的合成

vel.limit(maxMag); // 限制大小：不让速度太快

/**

 * 粒子运动逻辑 - 整合了寻径、噪声扰动、鼠标交互等多种物理模拟

 * 该方法在每一帧被调用，负责更新粒子的位置、速度和加速度

 */

public move() {

  const p5 = this.p5;

  const { closeEnoughTarget, speed, scaleRatio, mouseSize } = this.config;

  // 1. 添加 Perlin 噪声扰动，让粒子运动更自然

  const noiseScale = this.config.noiseScale ?? 0.005;

  const noiseStrength = this.config.noiseStrength ?? 0.6;

  this.tempVec1.set(

    p5.noise(

      this.noiseOffsetX + this.pos.x * noiseScale,

      this.pos.y * noiseScale

    ) *

      noiseStrength -

      noiseStrength / 2,

    p5.noise(

      this.noiseOffsetY + this.pos.y * noiseScale,

      this.pos.x * noiseScale

    ) *

      noiseStrength -

      noiseStrength / 2

  );

  this.acc.add(this.tempVec1);

  // 2. 计算到目标的距离（寻径行为核心）

  const dx = this.target.x - this.pos.x;

  const dy = this.target.y - this.pos.y;

  const distSq = dx * dx + dy * dy;

  this.distToTarget = Math.sqrt(distSq);

  // 3. 接近减速机制 - 防止粒子在目标位置震荡

  let proximityMult = 1;

  if (this.distToTarget < closeEnoughTarget) {

    proximityMult = this.distToTarget / closeEnoughTarget;

    this.vel.mult(0.9); // 强阻尼，快速稳定

  } else {

    this.vel.mult(0.95); // 轻阻尼，保持流畅运动

  }

  // 4. 朝向目标的寻径力

  if (distSq > 1) {

    this.tempVec2.set(this.target.x - this.pos.x, this.target.y - this.pos.y);

    this.tempVec2.normalize();

    this.tempVec2.mult(this.maxSpeed * proximityMult * speed);

    this.acc.add(this.tempVec2);

  }

  // 5. 鼠标交互系统

  const scaledMouseX = p5.mouseX / scaleRatio; // 这里是因为图像 scale 了，鼠标位置也需要

  const scaledMouseY = p5.mouseY / scaleRatio;

  const mouseDx = scaledMouseX - this.pos.x;

  const mouseDy = scaledMouseY - this.pos.y;

  const mouseDistSq = mouseDx * mouseDx + mouseDy * mouseDy;

  if (mouseDistSq < mouseSize * mouseSize) {

    const mouseDist = Math.sqrt(mouseDistSq);

    if (p5.mouseIsPressed) {

      // 鼠标按下：吸引粒子

      this.tempVec3.set(mouseDx, mouseDy);

    } else {

      // 鼠标悬停：排斥粒子

      this.tempVec3.set(-mouseDx, -mouseDy);

    }

    this.tempVec3.normalize();

    this.tempVec3.mult((mouseSize - mouseDist) * 0.05);

    this.acc.add(this.tempVec3);

  }

  // 6. 应用物理更新：加速度→速度→位置

  this.vel.add(this.acc);

  this.vel.limit(this.maxForce * speed);

  this.pos.add(this.vel);

  this.acc.mult(0); // 重置加速度，为下一帧准备

  // 7. 更新噪声偏移，保持噪声的连续性

  this.noiseOffsetX += 0.01;

  this.noiseOffsetY += 0.01;

}

// 1. 噪声偏移的作用

this.noiseOffsetX = p5.random(1000); // 为每个粒子生成唯一的噪声起始点

this.noiseOffsetY = p5.random(1000);

// 2. 2D Perlin 噪声生成自然随机力

const noiseForceX =

  p5.noise(this.noiseOffsetX + this.pos.x * 0.005, this.pos.y * 0.005) * 0.6 -

  0.3;

const noiseForceY =

  p5.noise(this.noiseOffsetY + this.pos.y * 0.005, this.pos.x * 0.005) * 0.6 -

  0.3;

// 3. 噪声偏移的更新（模拟时间流逝）

this.noiseOffsetX += 0.01;

this.noiseOffsetY += 0.01;

// ❌ 错误做法：所有粒子使用相同的噪声

const force = p5.noise(this.pos.x * 0.005, this.pos.y * 0.005);

// ✅ 正确做法：每个粒子有独特的噪声偏移

// 粒子 A: offset = 123.45

const forceA = p5.noise(123.45 + this.pos.x * 0.005, this.pos.y * 0.005);

// 粒子 B: offset = 987.65

const forceB = p5.noise(987.65 + this.pos.x * 0.005, this.pos.y * 0.005);

// 平滑运动（大尺度噪声）

const smoothForce = p5.noise(x * 0.001, y * 0.001);

// 剧烈运动（小尺度噪声）

const chaoticForce = p5.noise(x * 0.02, y * 0.02);

// 无噪声：粒子直接移向目标，路径僵硬

const force = target.sub(position).normalize().mult(speed);

// 有噪声：粒子在移向目标的同时受到 "风力" 影响，路径自然

const seekForce = target.sub(position).normalize().mult(speed);

const noiseForce = calculatePerlinNoise(position, time);

const totalForce = seekForce.add(noiseForce);

this.acc.add(seekForce); // 寻径力

this.acc.add(noiseForce); // 噪声扰动力

this.acc.add(mouseForce); // 鼠标交互力

// 鼠标交互逻辑

const scaledMouseX = p5.mouseX / scaleRatio;

const scaledMouseY = p5.mouseY / scaleRatio;

// 使用平方距离比较（避免开方运算）

const mouseDx = scaledMouseX - this.pos.x;

const mouseDy = scaledMouseY - this.pos.y;

const mouseDistSq = mouseDx * mouseDx + mouseDy * mouseDy;

const mouseSizeSq = mouseSize * mouseSize;

if (mouseDistSq < mouseSizeSq) {

  const mouseDist = Math.sqrt(mouseDistSq); // 只在需要时计算开方

  if (p5.mouseIsPressed) {

    // 按下鼠标：吸引粒子

    this.tempVec3.set(mouseDx, mouseDy);

  } else {

    // 鼠标悬停：排斥粒子

    this.tempVec3.set(-mouseDx, -mouseDy);

  }

  this.tempVec3.normalize();

  this.tempVec3.mult((mouseSize - mouseDist) * 0.05);

  this.acc.add(this.tempVec3);

}

// 应用物理更新

this.vel.add(this.acc);

this.vel.limit(this.maxForce * speed);

this.pos.add(this.vel);

this.acc.mult(0); // 重置加速度

public draw() {

  const p5 = this.p5;

  const { closeEnoughTarget, particleSize } = this.config;

  // 平滑颜色过渡

  this.currentColor = p5.lerpColor(

    this.currentColor,

    this.endColor,

    this.colorBlendRate

  );

  p5.stroke(this.currentColor);

  // 基于距离的大小计算

  let targetSize = 2;

  if (!this.isKilled) {

    targetSize = p5.map(

      p5.min(this.distToTarget, closeEnoughTarget),

      closeEnoughTarget,

      0,

      0,

      particleSize

    );

  }

  // 平滑大小过渡

  this.currentSize = p5.lerp(this.currentSize, targetSize, 0.1);

  p5.strokeWeight(this.currentSize);

  p5.point(this.pos.x, this.pos.y);

}

/**

 * 主渲染循环 - 每帧执行一次的核心函数

 * 负责粒子更新、渲染和内存管理

 */

p5.draw = () => {

  // 1. 早期返回优化 - 避免无效计算

  if (!(activeAnim && allParticles?.length)) {

    return; // 动画未激活或无粒子时直接返回

  }

  // 2. 清除上一帧的画布内容

  p5.clear();

  // 3. 双指针算法实现活跃粒子压缩

  let writeIndex = 0; // 写指针：指向下一个活跃粒子应存放的位置

  // 4. 遍历所有粒子，同时进行更新和生命周期管理

  for (let readIndex = 0; readIndex < allParticles.length; readIndex++) {

    const particle = allParticles[readIndex];

    // 5. 执行粒子的物理更新和渲染

    particle.move(); // 更新位置、速度、加速度

    particle.draw(); // 渲染到画布

    // 6. 生命周期检查和数组压缩

    if (!(particle.isKilled || particle.isOutOfBounds())) {

      // 粒子仍然活跃，需要保留

      if (writeIndex !== readIndex) {

        // 只有当位置不同时才进行赋值（避免自赋值）

        allParticles[writeIndex] = allParticles[readIndex];

      }

      writeIndex++; // 写指针前移

    }

    // 注意：死亡粒子会被自动跳过，不会被复制到新位置

  }

  // 7. 数组截断 - 移除末尾的死亡粒子引用

  allParticles.length = writeIndex;

};

// ❌ 原代码：每次删除都要移动大量元素

for (let i = allParticles.length - 1; i >= 0; i--) {

  if (allParticles[i].isKilled) {

    allParticles.splice(i, 1);

  }

}

// ✅ 双指针：单次遍历完成删除，O (n) 复杂度

let writeIndex = 0;

for (let readIndex = 0; readIndex < allParticles.length; readIndex++) {

  if (!allParticles[readIndex].isKilled) {

    allParticles[writeIndex++] = allParticles[readIndex];

  }

}

allParticles.length = writeIndex;

// 类型定义

export type MySketchProps = SketchProps & {

  activeAnim: boolean; // 动画开关

  imageIdx: number; // 当前图像索引

  id?: string; // DOM 容器 ID

  particleConfig?: ParticleConfig; // 粒子配置

};

// 主组件

export const DynamicParticleGL = ({

  activeAnim,

  imageIdx,

  id = "particle-container",

  getSourceImgInfos,

  particleConfig,

}: DynamicParticleGLProps) => {

  // 使用 useMemo 缓存 sketch 函数，避免重复创建

  const wrappedSketch = useMemo(() => {

    return function sketch(p5: P5CanvasInstance<MySketchProps>) {

      //sketch 实现...

    };

  }, [getSourceImgInfos]);

  return (

    <ReactP5Wrapper

      sketch={wrappedSketch}

      activeAnim={activeAnim}

      imageIdx={imageIdx}

      id={id}

      particleConfig={particleConfig}

    />

  );

};

function sketch(p5: P5CanvasInstance<MySketchProps>) {

  // 状态变量

  let activeAnim = false;

  let canvas: P5.Renderer;

  const allParticles: Array<Particle> = [];

  // 响应 React props 变化

  p5.updateWithProps = (props) => {

    activeAnim = props.activeAnim ?? false;

    setImageIdx(props?.imageIdx || 0);

    // 动态配置更新

    if (props.particleConfig) {

      Object.assign(currentParticleConfig, props.particleConfig);

    }

    // DOM 容器动态绑定

    if (canvas && props.id) {

      canvas.parent(props.id);

    }

  };

  p5.preload = () => {

    /* 图像预加载 */

  };

  p5.setup = () => {

    /* 初始化设置 */

  };

  p5.draw = () => {

    /* 渲染循环 */

  };

}

// 在演示组件中

const [active, setActive] = useState(true);

const [imageIdx, setImageIdx] = useState(0);

// 实时配置更新（使用 Leva 控制面板）

const particleControls = useControls("Particle System", {

  particleSize: { value: isMobile ? 4 : 5, min: 1, max: 20, step: 1 },

  speed: { value: 3, min: 0.1, max: 10, step: 0.1 },

  //... 更多配置项

});

// 配置转换

const particleConfig = {

  closeEnoughTarget: particleControls.closeEnoughTarget,

  speed: particleControls.speed,

  maxSpeedRange: [

    particleControls.maxSpeedMin,

    particleControls.maxSpeedMax,

  ] as [number, number],

  //... 其他配置项映射

};

// 避免每次渲染都重新创建 sketch 函数

const wrappedSketch = useMemo(() => {

  return function sketch(p5: P5CanvasInstance<MySketchProps>) {

    //sketch 实现

  };

}, [getSourceImgInfos]); // 只有当图像源配置变化时才重新创建

// 粒子配置类型

export type ParticleConfig = {

  closeEnoughTarget: number;

  speed: number;

  mouseSize: number;

  scaleRatio: number;

  particleSize: number;

  maxSpeedRange?: [number, number];

  maxForceRange?: [number, number];

  colorBlendRate?: [number, number];

  noiseScale?: number;

  noiseStrength?: number;

};

// 图像源配置类型

type SourceImageInfo = {

  url: string;

  scaleNum?: number;

  resize?: [number, number];

  loadPercentage?: number;

  resolution?: number;

};

// 组件 Props 类型

interface DynamicParticleGLProps {

  activeAnim?: boolean;

  imageIdx: number;

  id?: string;

  getSourceImgInfos?: (isMobile: boolean) => SourceImageInfo[];

  particleConfig?: ParticleConfig;

}

// 扩展 P5 实例类型，支持自定义 props

export type MySketchProps = SketchProps & {

  activeAnim: boolean;

  imageIdx: number;

  id?: string;

  particleConfig?: ParticleConfig;

};

// 在 sketch 函数中使用强类型

function sketch(p5: P5CanvasInstance<MySketchProps>) {

  p5.updateWithProps = (props: MySketchProps) => {

    // TypeScript 会提供完整的类型提示和检查

    activeAnim = props.activeAnim ?? false;

    setImageIdx(props.imageIdx || 0);

  };

}