前書き
デザイン部の新福です。VD部という部署に所属し、普段は3DCGや映像制作を担当しています。また、エンジニアと協力してインタラクティブコンテンツを制作することも多いです。
ChatGPTが浸透して久しく、
- アイディア出し
- 画像生成
- AE、Illustrator、C4Dで使うスクリプト
- チュートリアルの代わり
- ディープリサーチ
と、様々な事に日々使っております。
映像という「観る」ものを作っているのですが、インタラクティブな体験を作る事にも非常に興味があります。1→10に入社したのもそこが大きな動機です。
インタラクティブコンテンツを作る時に大きなハードルとなるのが「プログラミング」です。
P5.js（processing）というライブラリを使うと、インタラクティブな作品が作れるという動画に刺激を受けて、自分でも作ってみました。
とはいえ、私はプログラミングに苦手意識があるため、最初から自分で書こうとはせず、ChatGPTにコードを書いてもらいました。
いわゆる”Vibe Coding”です。
今回のやり方を簡単に説明しますと、最初にChatGPTに
「○○を表現したいのでp5.jsのコードを書いてください」
と伝えます。数回のやりとりをした後に、chatGPTから
- index.html
- sketch.js
の二つのコードを書き出してもらいます。
その二つのコードをp5.js Web Editorの該当箇所にcopy&paste（AIエージェントによっては、この作業が不要になる場合もあります。）して試して再生ボタンを押して実行します。
実行後にエラーが出たら、エラーメッセージをChatGPTに教える事で改善されたコードが生成されるので再びp5.js Web Editorにcopy&pasteします。この工程を繰り返していきます。
こういった流れで制作した作品を紹介していきます！
1作目 Color Motion Particles
ウェブカメラが人の動きを検知し、その差分からパーティクルを発生させます。動く物体の色を拾うため、鮮やかな色を動かすとカラフルに広がります。
動きの差分のところを発生源として、パーティクルが出るシステムを作ってみました。
パーティクルに関してChatGPTに指示を与えるのですが、普段からCGでも触る事が多いので、
- パーティクルのカラー
- パーティクルの大きさ
- パーティクルの寿命
- パーティクルの消え方
等、自分が持っている知識を生かす事で指示がしやすくなると思います。ChatGPTの良いところはマルチモーダルに対応しているので、そういった知識を口語で説明できるところです。
最初はパーティクルの色は単色でしたが、動いているオブジェクトの色を取得するようにする事で、体験者が色を選ぶという選択ができるので表現が広がったと思います。
仕組みもシンプルでアンビエントな表現なので公共の場に置いてあっても楽しいと思います。
オレンジジュースを炭酸ジュースのように演出できないか実験してみました。
＜↑のアイコンをクリックすると別ウインドウで体験できます。＞
遊び方
動きのあるところからパーティクルが発生します。手を振ったり、カラフルな物を動かすと画面が鮮やかになります。
2作目 Hand Fireworks ― 手のひらで打ち上げる花火
手の開閉を検知し、グーからパーに変えると手のひらから花火が打ち上がります。誰でも直感的に楽しめる、動作連動型のインタラクションです。
1作目は動きの差分をパーティクルの発生源としましたが、手のひらの動きを検知できるという事を知ったので、手の開閉によって花火が上がるようにしました。
仕組みをまとめると
- 手の開閉を検知して花火が上がる
- グーの状態が長いほど大きな花火が上がる
- 花火を目立たせるために、背景がだんだん暗くなっていく
などです。
＜↑のアイコンをクリックすると別ウインドウで体験できます。＞
遊び方
- 手を握った状態から開くと、手の平から花火がでます。
- 手の握っている時間が長いほど（最大10秒）大きな花火が打ち上がります。
- 片手のみ検知できます。複数手が入っていると検知しません。
3作目 分解と結合のリズム
時計のリズムで大きな画像が1/4 → 1/8 → 1/16と細分化されながら回転し、再び結合して元の姿に戻ります。
これは今までのウェブカメラを使ったインタラクティブな作品ではなく、公共施設の映像制作に使えないか試したものです。
描かれている画像がどんどん細分化されて、再び元に戻っていくというものです。これをafter effectsでやろうとするとかなり手数がかかってしまうので、プログラムに向いた映像だと思います。
ここで具体的な制作工程、マルチモーダルを活かした修正方法を少し紹介します。
今回は最初に、動かしたいグラフィックを添えて次のように指示を出しました。
「背景も含めてこのグラフィックを縦4横32個の正方形に分割して、その正方形が一秒毎にずれていき30秒毎にぴったりロゴが現れた瞬間に白黒反転するミニマムな映像をつくりたいです。」
「ばらけてから30秒、つまり1秒毎に正方形がずれるのが30回目で要約画像がそろうという感じです。 身近なものでいうとルービックキューブを平面でやっている感じです（誤字そのまま）」
しかし、文章だけでは伝わりにくい部分に関しては、手書きの図を使って説明しました。
上の画像は4分割だけでなく、さらに8、16分割になるようにチャレンジした時に回転の仕方を説明したものです。親のブロックが回転しつつさらにそれを4分割した子ブロック、孫ブロックが回転するというものです。このような簡単な手書き図でも、ChatGPTはしっかり理解してくれます。
また、画像だけではなく動画も認識してくれるので、p5.js web editorで実行した時に挙動がおかしい場合は、動画キャプチャを撮って、ChatGPTに動画ファイルを渡して理解してもらいます。
こういったラリーを何度も何度も繰り返しながら自分のイメージに近づけていきます。またChatGPTに会話をくり返す事で自分も違うアプローチが思い浮かんだりしました。
制作途中の失敗のキャプチャ
回転させたい画像が一番下のレイヤーに残ったままで、挙動がおかしな回転をしています。
タイルの動きのイージングも気持ちよくなるようにして、ボーっと見ていられるコンテンツを目指しました。
他の作品についてはp5.js Web Editorを使いましたが、今回の作品は画像を扱うためにローカル環境で行いました。使っている画像（logo.png）を差し替えれば簡単に別パターンを作れます。
成果物
4作目 virtual theremin
指先で音を奏でるインタラクティブ楽器
ウェブカメラで指の位置を検出し、左右で音程、上下で音量を操作します。さらに指の組み合わせで音色が変化します。また音の周波数、振幅を波で視覚的に表現しました。
今までの映像は視覚的な変化でしたが、今回はさらに音のインタラクションにも挑戦してみました。
人動き→（映像）＋（音）の変化
となります。
テルミンという楽器は、本体にある2本のアンテナに手を近づけたり遠ざけたりして音程と音量をコントロールする、手を触れずに音を奏でる楽器です。
- 垂直に立っているアンテナ→右手を近づけると高い音が、遠ざけると低い音がでます。
- 水平のアンテナ→左手を近づけるほど大きい音が、遠ざけるほど小さな音になります。
今回は2本のアンテナではなくウェブカメラを用いて操作するため、テルミン自体の仕組みから考える必要があります。
そこで考えた基本的な仕組みは
- 画面の左端にいくほど高音に、右にいくほど低音になる
- 画面の下端にいくほど音が大きく、上端にいくほど小さな音になる（後に変更）
- 広範囲の音をカバーしようとすると、音程が小さな動きで変わってしまうので3オクターブにする
- 実際のギターやバイオリン等の弦楽器だと高音になるほど、フレットは狭くなり繊細な動きが必要になるが今回均等な間隔にする
になります。下二つの条件についても弦楽器を経験した時の気づきから入れております。音の大きさについては最初はテルミンと同様に下にいくほど大きくなるようにしましたが、歌手が大きな声を出す時に手を上に上げる様子を思い出し、手を上に上げるほど大きな音が出るように変更しました。
また、今どの音程を出しているのかわかるようにガイドを考えました。最初はシンプルにドとなるところにラインを引いていたのですが、白黒の段階的なグラデーションの境界をドにしました。白黒にする事で、視覚的な情報が少なくなりプレイする事に集中できます。また後述する波のエフェクトも際立たせる事ができました。
また、こちらは「親指と人差し指をくっつける」事によってそこに〇（丸）の形をしたポインタが現れます。
- 親指＋人差し指→テルミンっぽい音
- 親指＋中指→フルートっぽい音
- 親指＋薬指→グロッケンっぽい音
と、音色が変わるようにしました。下二つは調整が難しかったので、もっとアナログシンセの知識が必要だと思います。指の組み合わせで音を切り替えるのは、指の組み合わせの切り替えで色が変わるペイントコンテンツをヒントにしました。
視覚エフェクト
音を出すだけでなく、視覚エフェクトも作りました。音は波なので出している音によって波エフェクトの「振幅と周波数」も変化させてます。音=波という事を直感的に感じられます。
また、指の組み合わせでパーティクルやトレイルが出るエフェクトも追加しました。
指の検知のブレ
ウェブカメラでの手の検知では映像的なノイズもあり、ポイントがブルブル震えて安定しない問題が発生しました。これはパーティクル表現を入れる事でより顕著に現れました。
そこで身近なものでこういったブレを補正するものを考えた時に
- ipadのお絵描きアプリprocreateの手振れ補正
- 株取引のチャート画面に出ている移動平均線
が思い浮かんだので、これらをヒントに手振れを抑える実装をしました。
＜↑のアイコンをクリックすると別ウインドウで体験できます。＞
「8」キーでフルスクリーンになります
遊び方
- 親指と人差し指をくっつけるとポイントが現れるので、それを動かして音程、音量をコントロールします。
- キーボードの数字キーで機能のオンオフができます。
- 1 HUD（説明）
- 2 ガイド線（C4, C5, C6, C7）
- 3 音名表示
- 4 白黒モード（オクターブで段階的に暗く）
- 5 波エフェクト（ピンチ解除で自然フェードアウト）
- 6 検知範囲の枠
- 7 ビジュアル（トレイル＆パーティクル）
- 8 フルスクリーン（入力解像度は1280×960のまま）
あとがき
今回ChatGPTによってプログラムを書いてもらってインタラクティブコンテンツを作りました。どのコンテンツも半日とかからずに6割程度完成させる事はできたのですが、そこから詰めるのに時間がかかりました。AIを使っているとは言え簡単にはいかないものです。
特に最後のテルミンについてはコード数が400量を超えてきてChatGPTを開いているだけでとてもPCが重たくなり、ChatGPT自体の返答も時間がかかりました。
またChatGPTが書き出したコードをp5.js web editorに人力で何度も何度もコピペしていたいので、とても非効率でした。
弊社エンジニアに相談したところChatGPTではなくclaudeがお薦めだという事でしたので、今度はそちらを試してみようと思います。
それなりに苦労はありましたが、非エンジニアの人でもAIと相談する事により、シンプルなインタラクティブコンテンツが作れるは楽しいので、皆さんもぜひチャレンジしてみてください！