はじめに

今回、ChatGPT o3-mini-high を用いて、下記のような詳細なプロンプトに基づき、
球体の内部で 100 個のカラフルなボールが跳ね回る 3D シミュレーションを実装しました。
シミュレーションは、p5.js の WebGL モードを利用しており、ブラウザ全画面で 3D 表現が可能です。
また、生成されたコードはすべての要件を満たしており、エラーも一切ありません。
editor.p5js.org にコードを貼り付ければ、すぐに実行できます！

シミュレーションの特徴

キャンバスとカメラ設定
- createCanvas(windowWidth, windowHeight, WEBGL) を使用し、ブラウザ全画面での 3D 表示が実現されています。
- orbitControl() を利用することで、マウス操作によるカメラ操作（回転・ズーム）が可能です。
球体のコンテナ
- 半径 300 の球体コンテナは、内部が見やすいように半透明のワイヤーフレームで描画。
- ゆっくりと回転するアニメーションにより、内部の動きを把握しやすくしています。
ボールの生成と挙動
- 100 個のボールは、ランダムな初期位置、速度、色、サイズ（半径 5〜15）で生成。
- 衝突検出では、球体の内壁との接触時に法線を利用した鏡面反射計算を行い、ボールが外に出ないように制御しています。
ボールの軌跡（トレイル）
- 各ボールが移動した軌跡は、古い部分がフェードアウトするように描画され、動きの歴史が視覚的に表現されます。
ユーザーインターフェース
- オプションとして、コンテナの回転速度を調整できるスライダーを実装。直感的にシーンの動きを変更可能です。

完成コード

以下のコードは、ChatGPT o3-mini-high によって一発ノーミスで生成されたものです。
各部分に詳細なコメントを入れており、学習目的にも最適です。

// --- グローバル変数 ---
let balls = [];               // 100 個のボールを格納する配列
const numBalls = 100;         // ボールの個数
const containerRadius = 300;  // 球体コンテナの半径
let containerRotation = 0;    // 球体コンテナの回転角（アニメーション用）
let rotationSpeedSlider;      // オプション：コンテナ回転速度調整用スライダー

// --- setup() ---
// キャンバス作成、ボールの初期化、UI の生成など
function setup() {
  // ブラウザ全画面の WEBGL キャンバスを作成
  createCanvas(windowWidth, windowHeight, WEBGL);
  
  // 背景色やレンダリング設定
  colorMode(RGB, 255, 255, 255, 255);
  
  // 100 個のボールを生成（各ボールはコンストラクタ内でランダムな初期位置・速度・大きさ・色を持つ）
  for (let i = 0; i < numBalls; i++) {
    balls.push(new Ball());
  }
  
  // オプション：コンテナの回転速度を調整できるスライダーを作成
  // 範囲は 0 ~ 0.05、初期値 0.01、刻み幅 0.001
  rotationSpeedSlider = createSlider(0, 0.05, 0.01, 0.001);
  rotationSpeedSlider.position(20, 20);
  rotationSpeedSlider.style('width', '200px');
}

// --- windowResized() ---
// ウィンドウサイズ変更時にキャンバスサイズを更新
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

// --- draw() ---
// 毎フレームの描画・更新処理
function draw() {
  // 背景色を設定（暗い背景）
  background(20);
  
  // ユーザー操作可能なカメラ操作（ドラッグやホイールで視点操作）
  orbitControl();
  
  // 照明設定
  // シーン全体をやわらかく照らすアンビエントライト
  ambientLight(50);
  // 手前上方からのポイントライト
  pointLight(255, 255, 255, 0, -containerRadius * 2, 500);
  
  // スライダーで指定された回転速度でコンテナをゆっくり回転
  let rotSpeed = rotationSpeedSlider.value();
  containerRotation += rotSpeed;
  
  // --- 球体コンテナの描画 ---
  push();
    // 回転アニメーション（Y軸周り）
    rotateY(containerRotation);
    // 内部が見やすいよう、半透明のワイヤーフレームで描画
    noFill();
    stroke(200, 200, 255, 150);
    strokeWeight(1);
    // sphere() の第2・第3引数でディテール数を指定（パフォーマンス調整用）
    sphere(containerRadius, 24, 16);
  pop();
  
  // --- 各ボールの更新＆描画 ---
  for (let ball of balls) {
    ball.update();
    ball.display();
  }
}

// ======================================================================
// ボールを表すクラス
// 各ボールは位置、速度、半径、色、そして移動軌跡（トレイル）を持ちます。
// ======================================================================
class Ball {
  constructor() {
    // ボールの大きさ（半径）は 5～15 のランダム値
    this.r = random(5, 15);
    // ボールの色：明るめのランダムな RGB 値
    this.col = color(random(50, 255), random(50, 255), random(50, 255));
    
    // ボールの初期位置は「球体コンテナ内」に配置
    // コンテナの内側に収まるよう、最大距離は containerRadius - this.r
    let maxDist = containerRadius - this.r;
    // ランダムな方向を取得し、0～maxDist のランダムな長さを掛ける
    let pos = p5.Vector.random3D();
    pos.mult(random(0, maxDist));
    this.pos = pos;
    
    // ボールの初期速度はランダムな 3D ベクトル
    // 速度の大きさは 1～3 の範囲（シーンの動き具合を調整可能）
    let vel = p5.Vector.random3D();
    vel.mult(random(1, 3));
    this.vel = vel;
    
    // トレイル（軌跡）として過去の位置を記録する配列
    this.trail = [];
    // トレイルの最大長（過去の位置の数）を設定
    this.maxTrailLength = 30;
  }
  
  // --- update() ---  
  // 位置の更新、コンテナ内での衝突判定＆反射、軌跡の記録を行います。
  update() {
    // 位置に速度を加算して更新
    this.pos.add(this.vel);
    
    // --- 衝突判定＆反射処理 ---
    // 球体コンテナの内壁との衝突判定：
    // ボールの中心から原点までの距離 d にボールの半径 this.r を加えた値が
    // コンテナの半径 containerRadius より大きくなれば衝突と判定
    let d = this.pos.mag();
    if (d + this.r > containerRadius) {
      // 衝突点での「法線」は原点からボールの位置への単位ベクトル
      let n = this.pos.copy().normalize();
      // 速度ベクトルと法線との内積を求める
      let vDotN = this.vel.dot(n);
      // ミラー反射の公式： v' = v - 2*(v・n)*n
      // （ボールが外向きに動いている場合 vDotN > 0 となります）
      if (vDotN > 0) {
        this.vel.sub(p5.Vector.mult(n, 2 * vDotN));
      }
      // 衝突後、ボールがコンテナ外に出ないよう、ボールの位置を内壁上に補正
      // 補正後の位置は「法線ベクトル × (containerRadius - this.r)」
      this.pos = n.mult(containerRadius - this.r);
    }
    
    // --- トレイルの記録 ---
    // 現在の位置のコピーをトレイル配列に追加
    this.trail.push(this.pos.copy());
    // トレイルの長さが設定した上限を超えたら、古い位置を削除
    if (this.trail.length > this.maxTrailLength) {
      this.trail.shift();
    }
  }
  
  // --- display() ---
  // ボール自体と、過去の軌跡（トレイル）を描画します。
  display() {
    // --- トレイルの描画 ---
    // 各トレイルの線分は、ボールの色で描画しつつ、
    // 古い部分ほど透明度を下げることでフェードアウトさせます。
    noFill();
    // トレイルは、記録した位置を順に結んだ線分として描画
    for (let i = 0; i < this.trail.length - 1; i++) {
      let pos1 = this.trail[i];
      let pos2 = this.trail[i + 1];
      // インデックスが古いほど alpha 値が低くなるように補間
      let alpha = map(i, 0, this.trail.length - 1, 50, 255);
      stroke(red(this.col), green(this.col), blue(this.col), alpha);
      strokeWeight(2);
      line(pos1.x, pos1.y, pos1.z, pos2.x, pos2.y, pos2.z);
    }
    
    // --- ボール自体の描画 ---
    push();
      translate(this.pos.x, this.pos.y, this.pos.z);
      noStroke();
      fill(this.col);
      // ボールは低ディテールの球体として描画（パフォーマンス配慮）
      sphere(this.r, 8, 6);
    pop();
  }
}

実行方法

editor.p5js.org にアクセスします。
新規スケッチを作成し、上記コードをエディタに貼り付けます。
「再生」ボタンをクリックすると、ブラウザ全画面でシミュレーションが実行されます。
マウスのドラッグやホイール操作でシーンを自由に回転・ズームでき、詳細な動きを確認できます。

使用したプロンプト

以下は、今回のシミュレーション作成に用いた詳細なプロンプトの一部です。
（実際のプロンプトは上記の要件に沿っており、p5.js のキャンバス設定、球体コンテナ、ボール生成・衝突処理、トレイル描画、パフォーマンス最適化など、各機能が明確に記述されています。）

以下の要件を含め、**p5.js（WebGL モード）**を使用して球体の内部で 100 個のカラフルなボールが跳ね回る 3D シミュレーションを作成してください

## 1. キャンバスとカメラ設定
- `createCanvas(windowWidth, windowHeight, WEBGL)` を使用し、ブラウザ全画面で 3D 表示できるようにしてください。  
- シーンがわかりやすいよう、視点の位置やカメラの動きを適宜調整してください。

## 2. 球体のコンテナ
- 球体の半径は 300 程度に設定し、ボールが視認しやすいようにしてください。  
- 球体はゆっくりと回転するようにアニメーションさせ、内部を把握できるようにしてください。  
- 球体の描画はワイヤーフレームや半透明など、内部が見やすい方法を検討してください。

## 3. ボールの生成と挙動
- **ボールの個数**: 100 個  
- **色・大きさ**: ランダムな色で、半径 5〜15 程度の大きさに設定してください。  
- 初期位置と速度（ベクトル）をランダムに与え、球体内部を動き回るようにしてください。  
- 衝突検出により、ボールが球体の内壁に衝突した際には**反射計算**を行い、球体の外には出ないようにしてください。  
  - 反射処理は単純な鏡面反射（法線方向で速度ベクトルを反転）で構いません.

## 4. ボールの軌跡（トレイル）
- 各ボールが移動した後に、**軌道を示すトレイル**を描画してください。  
- トレイルはフレームごとに徐々にフェードアウトし、最新の軌跡が色濃く残るようにしてください（アルファ値やレイヤー描画を利用）。

## 5. 描画パフォーマンスと見栄え
- 1 フレームあたりの描画が重くなりすぎないよう、**最適化**を検討してください。  
  - 不要なオブジェクト生成を避ける、背景クリアの方法を工夫するなど。  
- シーンの見栄えがよくなるよう、**背景色や照明、マテリアル**などを適切に設定してください。  
  - `ambientLight`, `pointLight` などの使用を検討.

## 6. ユーザーへの操作ガイド（任意）
- ユーザーが**ボタンやスライダー**などで球体の回転速度やボールの色・大きさの範囲を変更できる**インタラクティブ UI**を加えても構いません.

## 7. コードの可読性とコメント
- 変数名や関数名はわかりやすくし、主要な部分にはコメントを適宜入れてください。  
- 衝突判定や反射処理がどのように行われているかを明確にし、学習目的で読んだ際に理解しやすいように記述してください.

まとめ

今回のシミュレーションは、ChatGPT o3-mini-high の高度なコード生成能力を実感できる一例です。
p5.js（WebGL）を活用したリアルタイムの 3D シミュレーションを、シンプルな設定で実現できる点や、
AI が即座にミスなくコードを生成できるクオリティの高さをぜひ体験してください。