パーティクルの基礎

実行例

実行結果を見る

ソースコード

TypeScript

particle.ts / app.ts

解説/アルゴリズム

export type Particle = {
  // 位置
  x: number;
  y: number;
  // 速度
  vx: number;
  vy: number;
  // 形状は円にするので半径の情報を持つ
  radius: number;
};

export function init(
  x: number,
  y: number,
  vx: number,
  vy: number,
  radius: number
): Particle {
  return { x, y, vx, vy, radius };
}

// 毎フレーム速度の情報をもとに位置を更新する
export function update(p: Particle): void {
  p.x += p.vx;
  p.y += p.vy;
}

パーティクルを表現するために最低限必要な情報を定義する。

パーティクルの個々の表示オブジェクトを作る Particle クラスは、位置と速度を定義している。

形状は円にするので半径の情報を持ち合わせている。

particles = [];
for (let i = 0; i < 100; i++) {
  const vx = p.random(-3, 3);
  const vy = p.random(-3, 3);
  const particle = init(p.windowWidth / 2, p.windowHeight / 2, vx, vy, 30);
  particles.push(particle);
}

パーティクルオブジェクトを 100 個ほど作り、配列に入れておく。

パーティクルの初期位置は画面中央、速度はランダムにしておく。

p.draw = () => {
  p.background(color.background);
  p.fill(color.fill);
  p.noStroke();

  particles.forEach((particle) => {
    update(particle);
    p.circle(particle.x, particle.y, particle.radius);
  });
};

毎フレーム画面を初期化して、全てのパーティクルをそれぞれの位置情報をもとに描画を行う。