ChatGPT o3-mini による「3Dビッグバン」シミュレーションプログラムの生成と実行

![image.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82835/ec11e580-3933-56ff-e775-0934400946c1.gif)


## はじめに

今回、ChatGPT o3-mini を利用して、[Wikipedia: Big Bang](https://en.wikipedia.org/wiki/Big_Bang) のURLを元に、p5.js の WEBGL モードを用いた高品質な3Dビッグバンシミュレーションプログラムを瞬時にミスなく生成することに成功しました。本記事では、生成されたプログラムの概要や特徴、そして [p5.js Editor](https://editor.p5js.org/) を使った実行方法についてご紹介します。

## プログラムの概要

このシミュレーションプログラムは、以下の特徴を持っています。

- **即時性と正確性**  
  指定されたウィキペディアの情報を基に、ChatGPT o3-mini が瞬時にかつミスなくシミュレーションプログラムを生成しました。その結果、高品質な3Dビッグバンシミュレーションが実現されています。

- **豊富なカスタマイズオプション**  
  - 粒子の移動速度、数、サイズ、シーン全体の回転速度、ライティングのON/OFFなど、様々なパラメータをGUI上のスライダーやチェックボックスで直感的に調整できます。
  - 各オプションには、項目名が白文字で表示され、説明文も合わせて提供されているため、ユーザーは各機能の意味を容易に理解できます。
  - 「シミュレーション再実行」ボタンを用いることで、シミュレーションを初期状態にリセットし、何度でも再実行が可能です。

- **3Dシミュレーション**  
  WEBGLモードを利用して、3D空間上にビッグバンの爆発を視覚的に再現します。  
  ユーザーはマウス操作（`orbitControl`）により、シーンの視点を自由に変更でき、立体的な宇宙の広がりを体験できます。

## コード

```js
let particles = [];
// UI用グローバル変数
let particleSpeedSlider, particleCountSlider, particleSizeSlider, rotationSpeedSlider;
let addParticlesCheckbox, toggleLightingCheckbox;
let restartButton;
// UI説明用ラベル
let particleSpeedLabel, particleCountLabel, particleSizeLabel, rotationSpeedLabel;
let addParticlesLabel, toggleLightingLabel;

function setup() {
  // WEBGLキャンバスを生成
  createCanvas(windowWidth, windowHeight, WEBGL);
  angleMode(DEGREES);
  colorMode(HSB, 360, 100, 100, 255);

  // 粒子速度スライダーとラベル
  particleSpeedSlider = createSlider(0.5, 10, 1, 0.1);
  particleSpeedSlider.position(20, 20);
  particleSpeedSlider.style('width', '200px');
  particleSpeedLabel = createP("粒子速度: 粒子の移動速度を調整します。");
  particleSpeedLabel.position(230, 5);
  particleSpeedLabel.style("color", "white");

  // 粒子数スライダーとラベル
  particleCountSlider = createSlider(100, 1000, 300, 50);
  particleCountSlider.position(20, 60);
  particleCountSlider.style('width', '200px');
  particleCountLabel = createP("粒子数: シミュレーション内の目標粒子数を設定します。");
  particleCountLabel.position(230, 45);
  particleCountLabel.style("color", "white");

  // 粒子サイズスライダーとラベル
  particleSizeSlider = createSlider(1, 10, 5, 1);
  particleSizeSlider.position(20, 100);
  particleSizeSlider.style('width', '200px');
  particleSizeLabel = createP("粒子サイズ: 表示される粒子の大きさを調整します。");
  particleSizeLabel.position(230, 85);
  particleSizeLabel.style("color", "white");

  // 回転速度スライダーとラベル
  rotationSpeedSlider = createSlider(0, 2, 0.1, 0.1);
  rotationSpeedSlider.position(20, 140);
  rotationSpeedSlider.style('width', '200px');
  rotationSpeedLabel = createP("回転速度: シーン全体の回転速度を調整します。");
  rotationSpeedLabel.position(230, 125);
  rotationSpeedLabel.style("color", "white");

  // 新規粒子追加のチェックボックスとラベル
  addParticlesCheckbox = createCheckbox('新規粒子を追加する', true);
  addParticlesCheckbox.position(20, 180);
  addParticlesLabel = createP("新規粒子追加: シミュレーション中に粒子が不足している場合に追加します。");
  addParticlesLabel.position(230, 165);
  addParticlesLabel.style("color", "white");

  // ライティングの有効/無効チェックボックスとラベル
  toggleLightingCheckbox = createCheckbox('ライティングを有効にする', true);
  toggleLightingCheckbox.position(20, 220);
  toggleLightingLabel = createP("ライティング: シーンに照明効果を適用します。");
  toggleLightingLabel.position(230, 205);
  toggleLightingLabel.style("color", "white");

  // シミュレーション再実行ボタン（リセット）
  restartButton = createButton("シミュレーション再実行");
  restartButton.position(20, 260);
  restartButton.style("padding", "10px");
  restartButton.style("background-color", "#333");
  restartButton.style("color", "white");
  restartButton.mousePressed(resetSimulation);

  // 初期の粒子生成
  resetSimulation();
}

function draw() {
  background(0);
  orbitControl(); // マウスドラッグで視点操作可能

  // シーン全体の回転
  rotateY(frameCount * rotationSpeedSlider.value());

  // ライティング（チェックが入っている場合のみ適用）
  if (toggleLightingCheckbox.checked()) {
    ambientLight(50);
    pointLight(255, 255, 255, 0, 0, 200);
  }
  
  // 各粒子の更新と描画
  let speedMultiplier = particleSpeedSlider.value();
  for (let p of particles) {
    p.update(speedMultiplier);
    p.display();
  }
  
  // 新規粒子追加（チェックが入っていれば、目標数に満たない場合追加）
  if (addParticlesCheckbox.checked()) {
    let targetCount = particleCountSlider.value();
    while (particles.length < targetCount) {
      particles.push(new Particle());
    }
  }
}

// 粒子クラス：原点からランダム方向へ移動
class Particle {
  constructor() {
    this.pos = createVector(0, 0, 0);
    this.vel = p5.Vector.random3D().mult(random(1, 5));
    this.size = random(2, 6);
    this.col = color(random(0, 360), 80, 100, 200);
  }
  
  update(multiplier) {
    let velocity = this.vel.copy().mult(multiplier);
    this.pos.add(velocity);
  }
  
  display() {
    push();
    translate(this.pos.x, this.pos.y, this.pos.z);
    noStroke();
    fill(this.col);
    sphere(this.size * (particleSizeSlider.value() / 5));
    pop();
  }
}

// シミュレーションを初期状態にリセット
function resetSimulation() {
  particles = [];
  for (let i = 0; i < particleCountSlider.value(); i++) {
    particles.push(new Particle());
  }
}

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

## 実行方法

1. [p5.js Editor](https://editor.p5js.org/) にアクセスしてください。
2. 本記事のコードをエディターにコピー＆ペーストします。
3. エディター上で「再生」ボタンをクリックすることで、シミュレーションが即座に実行されます。
4. 画面左上に配置された各種オプション（スライダー、チェックボックス、ボタン）を使用して、シミュレーションのパラメータをリアルタイムで調整できます。

## 生成されたプログラムのクオリティについて

ChatGPT o3-mini により生成されたこのプログラムは、[Wikipedia: Big Bang](https://en.wikipedia.org/wiki/Big_Bang) の情報を基に構築され、瞬時にかつミスなく作成されました。  
この高い正確性と即応性により、非常に信頼性の高い3Dシミュレーションプログラムが実現されており、教育的なデモンストレーションやビジュアルコンテンツとしても十分なクオリティを誇ります。

## おわりに

本記事では、ChatGPT o3-mini によって生成されたノーミスの3Dビッグバンシミュレーションプログラムの概要と、その実行方法についてご紹介しました。  
[ p5.js Editor](https://editor.p5js.org/) にて簡単に実行できるため、ぜひお試しいただき、宇宙のダイナミックな膨張と各種パラメータの調整機能を体験してみてください。  
今後もこのような高精度ツールを活用し、さらに魅力的なインタラクティブコンテンツの作成に挑戦していきたいと考えています。