先日、データ分析基盤に関するプレゼン資料を作成しました。 せっかくなので生成AIを使って何かできないか、ということでプレゼン表紙の背景画像を作成してみました。
実際にできあがったものはこちら。
通常、生成AIで動画を作成する場合はSoraやVeoなどの動画生成に対応したものを利用します。ですが、少し工夫をすればテキストしか出力できない生成AIでも動画を作成できます。
JavaScriptでグラフィックを描画
テキストで動くものを表現する最も簡単な方法はプログラムを書かせることです。例えば、今回作ったものであれば、Three.jsを使って表現できます。
生成AIに投げるプロンプトの趣旨は次の通りです。
- HTMLファイルを生成する
- Three.jsを使ってグラフィックを描画する
- 円を描画する
- 円のサイズはランダム
- 円の色は一色で明度を変えていくつかのパターンにする
- 円同士を0～3つの他の円と線でつなぐ
- 円をゆっくりと動かす
ポイントは、まとめて投げないことです。できる限り1度の指示はシンプルにしてステップバイステップで作業を行います。
HTML形式で出力しているのでブラウザさえあれば動作確認ができます。後はブラウザを動画キャプチャしてGIFにでもすれば完成です。
実際に投げたプロンプト（抜粋）
- Three.jsを使ってHTMLファイルで円を表示するコードを作成してください。
- 円を30個ほどに増やして、それぞれの大きさをランダムに変更してください。表示する位置もランダムでお願いします。
- 円同士の重なりをもう少し減らしてください。一色で明度のみを変更してください。
- 円がそれぞれゆっくりと動くようにしてください。
（※当時の動画を取っていないのでキャプチャなし）
- それぞれの円を線でつないでください。 １つの円から0～5の円につながるようにしてください。
-
線の数が多すぎるので少し減らしてください。
-
背景色を白に変更してください。
おわりに
例えばChart.jsを使ってグラフを描画させることも簡単にできます。また、テキストしか出力できない生成AIでもプログラムで音を出すことも。
プログラミング言語＋生成AIでいろいろなことが実現できるので皆さんもぜひ試してみてください。
