ChatGPT O3-miniを使ってあこがれの理系プログラマーになりたいな
「ChatGPT O3-mini-high」が公開されていたので、早速使ってみたいと思います。
いざ使うにしても、何したらいいの？・・っていうか何ができるの？
という状況の中、他の解説してくれてる人たちの情報をみていると、
ゲームが簡単に作れちゃう！！
という所に、どうしても目が行きます。ゲーム好きとしてはやはり・・
もちろん私も試してみました。
たしかに、簡単なゲームというか複雑なゲームでも一瞬でサンプルコードを提案してくれました。
すごい！
若かりし頃に作った、非常に苦労して作った、何日もかけて作った、
VBとかで作ったようなゲームを一瞬でだと…！？
しかもコードの解説までしてくれて、至れり尽くせり。
勉強になります！
ゲーム作りが捗りそうなことはわかりました。
他にも、科学、数学が得意な様子。
ということは、私のような文系プログラマーには絶対書けないような、
意味不明な計算式を使ったプログラムも、ChatGPT O3-miniを使えば書けるようになるのではないか。
理系プログラマーに俺はなるっ！
おまたせしました、やってみましょう！
それで何をやるかですが、
先日、子供が理科の勉強をしていて、その疑問に答えるために地球儀があったらいいなと思ったことがありましたが、家には地球儀がなかったのです。
説明しようにも、地球儀がない、足りてない。
「ゴー☆ジャス」のネタをやるにも地球儀は必要、ということで
ChatGPT O3-mini先生に太陽系の様子を描いてもらいました。
お願いしたこと
・太陽系をいくつかの球体で表現して
・各惑星は公転と自転をしてほしい
・ブラウザで動きを見れるようにして
この無茶ぶりに、提案してくれたコードを実行すると
ほほぉ、これはしっかりと太陽系
この後、いろいろと無茶ぶりを付け加えていったので、
コードは最終のものだけ掲載しますね。
追加注文
・上からの視点に変更してください
・地球の周りには月も追加してください
・惑星はそれぞれイメージした色を付けてほしい
さらに追加注文
・カメラ視点をマウスで変更できるようにしたい
・右下に公転に伴う日付と時間を表示してほしい
・各惑星は太陽から照らされている部分を明るくして・マウスクリックで動作を停止できるようにしてください
それで、できたものはこれです。
動画を載せるのに失敗したため画像のみです💦
コードを載せておくので是非試してみてください。
手順
①コードをすべてコピーしてテキストに貼り付けます。
②ファイルはなんでもよいので保存します。拡張子はhtmlにしてください。
③ブラウザで開きます
操作方法
・スペースキーでアニメーションの動作停止と再開
・左クリックを押しながらマウス操作で視点変更
・右クリックを押しながらマウス操作で移動
・マウスのホイールで拡大縮小
コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>太陽系アート作品（スペースキーで動作停止＆再開、ライティング付き）</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
</style>
<!-- p5.js の読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
</head>
<body>
<script>
let planets = [];
let simulationStart;
let simulationSpeed = 0.872; // 1フレームで進む日数
let timeDiv; // 日時表示用の DOM 要素
let paused = false; // 描画ループの停止状態
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
angleMode(RADIANS);
// シミュレーション開始日時（例：2000年1月1日 0:00:00）
simulationStart = new Date("2000-01-01T00:00:00");
// 日時表示用の DIV を作成（絶対配置で右下に表示）
timeDiv = createDiv('');
timeDiv.style('position', 'absolute');
timeDiv.style('color', 'white'); // 白文字
timeDiv.style('bottom', '20px');
timeDiv.style('right', '20px');
timeDiv.style('font-size', '16px');
// 初期カメラ位置（上からの視点だが、マウス操作で自由に変更可能）
camera(0, 300, 0, 0, 0, 0, 0, 0, -1);
// 惑星データ（orbitRadius：太陽からの距離、size：大きさ、orbitSpeed：公転速度、rotationSpeed：自転速度、color：惑星のイメージカラー）
planets = [
{ name: "Mercury", orbitRadius: 100, size: 10, orbitSpeed: 0.03, rotationSpeed: 0.05, color: [200, 200, 200] },
{ name: "Venus", orbitRadius: 150, size: 15, orbitSpeed: 0.02, rotationSpeed: 0.03, color: [255, 150, 50] },
{ name: "Earth", orbitRadius: 200, size: 20, orbitSpeed: 0.015, rotationSpeed: 0.05, color: [100, 150, 255] },
{ name: "Mars", orbitRadius: 250, size: 18, orbitSpeed: 0.012, rotationSpeed: 0.06, color: [255, 100, 100] },
{ name: "Jupiter", orbitRadius: 320, size: 40, orbitSpeed: 0.008, rotationSpeed: 0.02, color: [255, 200, 150] },
{ name: "Saturn", orbitRadius: 400, size: 35, orbitSpeed: 0.006, rotationSpeed: 0.015, color: [210, 180, 140] }
];
}
function draw() {
background(0);
// マウスによる視点変更（ドラッグ・スクロールで回転・ズーム）
orbitControl();
// 照明設定：ambientLight と、原点に pointLight を配置して太陽光としてシーンを照らす
ambientLight(50);
pointLight(255, 255, 255, 0, 0, 0);
directionalLight(255, 255, 255, 0.5, 1, -1);
// 太陽の描画（emissiveMaterial により発光感を表現）
push();
noStroke();
emissiveMaterial(255, 204, 0);
rotateY(frameCount * 0.01);
sphere(50);
pop();
// 各惑星の描画
for (let planet of planets) {
// 公転軌道を薄い線で描画（XZ平面上）
push();
noFill();
stroke(255, 50);
rotateX(HALF_PI);
ellipse(0, 0, planet.orbitRadius * 2, planet.orbitRadius * 2);
pop();
push();
// 公転：Y軸周りに回転
rotateY(frameCount * planet.orbitSpeed);
// 公転軌道に沿って平行移動
translate(planet.orbitRadius, 0, 0);
// 自転
rotateY(frameCount * planet.rotationSpeed);
noStroke();
// ambientMaterial により、照明の影響を受けて太陽側が明るくなります
ambientMaterial(...planet.color);
sphere(planet.size);
// 地球の場合は、月を追加
if (planet.name === "Earth") {
let moonOrbit = 40;
let moonSize = 5;
let moonOrbitSpeed = 0.05;
// 月の軌道を描画
push();
noFill();
stroke(255, 50);
rotateX(HALF_PI);
ellipse(0, 0, moonOrbit * 2, moonOrbit * 2);
pop();
// 月の描画
push();
rotateY(frameCount * moonOrbitSpeed);
translate(moonOrbit, 0, 0);
rotateY(frameCount * 0.02);
noStroke();
ambientMaterial(200, 200, 200);
sphere(moonSize);
pop();
}
pop();
}
// シミュレーション日時の計算
let simDays = frameCount * simulationSpeed;
let simDate = new Date(simulationStart.getTime() + simDays * 86400000);
let simDateStr = simDate.toLocaleString();
// 日時表示用の DIV の内容を更新
timeDiv.html(simDateStr);
}
// スペースキーで描画ループの停止／再開を切り替え
function keyPressed() {
if (key === ' ') {
if (paused) {
loop();
paused = false;
} else {
noLoop();
paused = true;
}
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
</script>
</body>
</html>こんなん自力じゃ絶対無理ですわー
おしまい