ボールの衝突シミュレーション
2つのボールが衝突したときの挙動をシミュレートするプログラムです。パラメータとして、ボールの初速と質量を変更できます。
左側のボール
右側のボール
生成AIをもちいた制作
なお、このプログラムはHTML・CSS・JSを生成AIをもちいて制作しました。
パラメータが少ないので、すぐできるだろうと予測していたとおり、すぐできました。
ちなみに、書いたプロンプトは以下のような感じです。
1回目
JavaScriptで、無重力・真空の空間で2つのボールが衝突したときの挙動をシミュレーションするプログラムを作ってください。詳細仕様は、以下によります。
・2次元で表現する。
・画面横方向に2つのボールを配置する。
・画面左側のボールの初速を設定し、画面右側のボールに衝突させて、その後の動きをシミュレートする。
・画面左のボールのパラメータとして、「初速（m/s）」「重量（kg）」を変更可能とする。初期値は、「初速5m/s」「重量1kg」とする。
・画面右のボールのパラメータとして、「重量（kg）」を変更可能とする。初期値は、「初速0m/s」「重量1kg」とする。
・パラメーターは、画面下に、テキストボックスとスライダーを配置し設定する。ただし、左右のボールに対応して2列で配置すること。
2回目
以下を追加修正してください。差分だけでOKです。
・どちらかのボールが画面の外に出た時点で、画面の更新を中止してください。
・canvasのheightを240pxとしてください。
・各ボールの速度をcanvas左下、右下に表示してください。
3回目
以下を追加修正してください。差分だけでOKです。
・ボールのグラフィックを、グラデーションを使って立体的に表現してください。
・右のボールの初速を変更可能にしてください。初期値0m/sで、マイナス（画面左方向）方向のみ変更可能とします。
今回は、前のコードをプロンプトに書かず、差分だけ提示させました。プログラムの学習をするためには、この方法のほうがコードを読むので効果的です。
さて、途中で仕様変更をしました。当初は右側のボールは静止状態のみとしていました。しかし、AIからの提示を見て、やっぱり動かしたほうが面白いということで追加しました。
後出しの仕様変更にも、素直に応じてくれるのがAIの良いところです。
人間がコードは書けなくても、ロジックは考えてあげないと、より優れたプロダクトは生まれないのかと思います。
