見出し画像

【ChatGPT】Processingで音楽に合わせて映像を同期する

以前からちょっと気になっていたProcessingというプログラミング言語。自分には敷居が高いのかな?と手をつけてなかったやつですが、例によってChatGPTの力を借りて、音楽と同期する映像を作ってみました。これもコードがどうのこうのというよりも、AIを活用してチャレンジすることの敷居を下げるという話です。

ちなみにオリジナル曲です。

Processingとは

幾何学的な模様を作って動かしたり、ゲームを作ったりなどができるもので、音楽に同期した映像を作ったりもできるものです。カメラやマイク、リアルタイムの音に同期することもできるので、ライブなどのイベントにも使えそうで楽しそうです。

電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境(IDE)である。アーティストによるコンテンツ制作作業のために、詳細な設定を行う関数を排除している。 視覚的なフィードバックが即座に得られるため、初心者がプログラミングを学習するのに適しており、電子スケッチブックの基盤としても利用できる。Java を単純化し、グラフィック機能に特化した言語といえる。

wikipedia - Processin

下記のサイトでコードも色々公開されていて、単純に面白そうだなあと。

まずは開発環境をインストールして、公開されているコードを見ながら色々試してみました。

最新バージョンは4.2(2023.4月現在)

ChatGPTとのやりとり

AIがなにかとんでもないものを作り出してくれるんじゃないかということではなく、AIに何をどう作りたいかを明確に伝える必要があるのですが、とりあえずお約束でアバウトな感じで投げてみます。

適当な質問にもコードで返してくれる

あたりまえなのですが、何がどうかっこいいかなんて人だってわかりません。よくある簡易的なオーディオビジュアライザーのようなコードを出してくれました。もう少し具体的に聞いてみます。

機能によって必要なライブラリなどの解説もしてくれます

ちょっと怠け癖がついたというか、簡単な調べものも同じスレッドで調べてしまいます、、。

そのくらい調べろよという感じですが、、

その後、だいぶ思っていた動きとどんどん違う方向にいってしまったり、エラーが続出したり、話がそれてしまったりしたので、もう一度最初から細かい指示に変更しました。

画面中央に円を表示するところまで戻る!
んー、ここまで聞くかというかんじ
という具合に、さまざまなパラメータで設定できそうなことを確認
だんだんと形になっていく

成果

なんとなく構造は理解して、継ぎ接ぎのようにコードを並べて、パラメータを設定したものが、記事の最初にあった動画のものです。やったことは超ざっくりですがこんな感じです。

・必要なライブラリを読み込み、機能の設定をする
・音楽ファイルを読み込み、再生をする
・円の設定(位置、反応する音域、色、太さ、動き方、スピードなど)
・線の設定(位置、反応する音域、色、太さ、動き方、スピードなど)
・ボタン、再生中のファイル表示

本来であれば、いろいろ設計してから作るものだと思うんですが、感覚的に触って楽しみながら学ぶにはいいのではないでしょうか。コードはぐちゃぐちゃですが、自分のアニメーション活動の映像素材として使えたらなということもあり、こんな感じにつかってみました。まあこれに関していえば、別に音に同期する必要はあまりないのですが、、w

いろんな使い方がある

音に同期する映像は、VJ用の機材などでも同期できるみたいですが、今回はprocessingで作ってみました。イベントなどで使えたらいいなあ、、。

アート作品などで活用しているアーティストもたくさんいて、そのような方の作品はすばらしいものばかりです。

p5.jsというJavascriptのライブラリやオンラインエディターなども用意されていて、Webサイトやオンラインゲームなどにも活用できるみたいです。それはそれでチャレンジしてみたいことがあるし、なんでもできる分、自分なりのprocessingの使い方をみつけて活用できたらと思っています。

この記事が参加している募集

AIとやってみた

この記事が気に入ったらサポートをしてみませんか?