cos

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], // 赤
  sourceImg.pixels[pixelIndex + 1], // 緑
  sourceImg.pixels[pixelIndex + 2], // 青
  sourceImg.pixels[pixelIndex + 3], // アルファ
];

// 従来の方法（パフォーマンスが悪い）：
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) 削除テクニック：スワップとポップ
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; // ここでは画像がスケールされているため、マウス位置も調整する必要があります
    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 {}
}

/**
 * 主な描画ループ - 毎フレーム実行されるコア関数
 * 粒子の更新、描画、メモリ管理を担当します
 */
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;

pnpm i @p5-wrapper/react p5
pnpm i -D @types/p5

// 型定義
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 を使用してスケッチ関数をキャッシュし、再作成を避けます
  const wrappedSketch = useMemo(() => {
    return function sketch(p5: P5CanvasInstance<MySketchProps>) {
      // スケッチの実装...
    };
  }, [getSourceImgInfos]);

  return (
    <ReactP5Wrapper
      sketch={wrappedSketch}
      activeAnim={activeAnim}
      imageIdx={imageIdx}
      id={id}
      particleConfig={particleConfig}
    />
  );
};

function sketch(p5) {
  p5.setup = () => {
    /* ... */
  };
  p5.draw = () => {
    /* ... */
  };
}

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],
  // ... その他の設定項目のマッピング
};

// 毎回レンダリングするたびにスケッチ関数を再作成しないようにします
const wrappedSketch = useMemo(() => {
  return function sketch(p5: P5CanvasInstance<MySketchProps>) {
    // スケッチの実装
  };
}, [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;
};

// スケッチ関数内で強い型を使用します
function sketch(p5: P5CanvasInstance<MySketchProps>) {
  p5.updateWithProps = (props: MySketchProps) => {
    // TypeScript は完全な型ヒントとチェックを提供します
    activeAnim = props.activeAnim ?? false;
    setImageIdx(props.imageIdx || 0);
  };
}