Processingで音楽と同期するデジタルアートを作ってみた。ピックアップホームテクノロジーProcessingで音楽と同期するデジタルアートを作ってみた。2019.11.22>>エンジニア養成プログラムNo.1未経験からのITエンジニア転職ならテックエキスパート「映像作品に興味がある」「プログラミングをはじめてみたい」そう考えてはいるけれど、なかなかきっかけがなくてはじめられないとう方も多いのではないでしょうか?そのような方々を代表して、ビジュアルアートに最適なプログラミング言語「Processing(プロセッシング)」で音楽と映像の同期に挑戦してみました。この記事を読めば、初心者にもおすすめと言われるプロセッシングの魅力が理解できます。Processing(プロセッシング)ははじめてのプログラミングにおすすめプロセッシング(Processing)で音楽と映像を融合したいまずは、上記の動画をご覧いただきたいです。ミニマルなテクノの音楽と映像が連動しています。クールで格好良い映像ではないでしょうか。これを自分でも「やってみたい」と思いませんか?ただ、どのようなアプリを使えば良いのかわからないという方もいらっしゃるでしょう。Liveにプロセッシングを同期させて制作されています。これを参考にしない手はないでしょう。Proで作った楽曲を準備済みです。今回はこのプロセッシングを使って、音楽と映像の融合を目指します。音楽や映像の制作に興味がある方や、ビジュアルアートをはじめてみたいと考えている方はぜひ参考にしてみてください。プロセッシング(Processing)についてまずは、映像制作が可能なプロセッシングの概要について紹介します。オープンソースのビジュアルアートのIDEプロセッシング(Processing)は、オープンソースのビジュアルアートに適したプログラミング言語であり、IDE(統合開発環境)です。無料でダウンロードできます。ビジュアルアートに興味がある方だけでなく、プログラミングの入門にもおすすめ。構文は基本的にJavaと同じですが、プロセッシングならではのいくつかの変更が加えられています。それにより、Javaよりもプロセッシングは記述が簡単で理解しやすいです。視覚的に結果を理解できることもプロセッシングが取り組みやすいポイントと言えるでしょう。プロセッシングは利用している方が多いため、豊富なドキュメントや本を参考にできるところもプログラミング初心者にとっては安心です。Processing.orgプロセッシングとJavaの関係についてプロセッシングはプログラミング言語ですが、Javaによって構築されたソフトウェアという見方もできます。プロセッシングで記述したプログラムは実行する時には、Javaに翻訳されてWebブラウザで動作するJavaアプレットやアプリケーションとしてコンパイルされます。それでは、何がJavaと違うのかと言うと、Javaと比較すると手続きなどの記述が少なくとってもすっきりしたコードになります。ビジュアルに関する記述を抜粋したような形となり、初心者の方も興味を持って取り組みやすいのです。プロセッシングを理解して、その次にJavaへと進むのもプログラミングを学ぶ1つの方法と言えるでしょう。この記事のハッシュタグ#Webデザイン#Java#仕事に役立つ#休日の過ごし方#プログラマープロセッシング(Processing)を利用してできることを紹介ここでは、ビジュアルアート以外にプロセッシングを利用してできることを紹介します。以下で見ていきましょう。プロセッシングの用途はビジュアル・アートだけではない上記の動画ではプロセッシングを利用して、Android向けのゲームアプリを制作しています。プロセッシングはP5.jsを使って、Webページへの埋め込みも可能。P5.jsはプロセッシングのJavaScriptによるライブラリで、HTML5のオブジェクトが作りやすくなっています。Webデザインにプログラミングを取り込みたいというデザイナーの方も、プロセッシングにチャレンジしてみてはいかがでしょうか。このようにプロセッシングの用途は、ビジュアルアートに限定されないのです。実際にプロセッシングでどのような作品が制作できるのか、気になる方も多いのではないでしょうか。どのようなことができるのか具体的に理解できる活用事例について以下で紹介します。この方は、上記の作品がはじめてのプロセッシングによる作品なのだそうです。プロセッシングへの期待が高まった方も多いでしょう。下記のページをご覧いただくと、他にも作品が掲載されています。Processing歴1年になったのでこの1年間を振り返ってみたデザイナー向けSNS「Dribbble」でもプロセッシングでタグ付けされた作品が多く公開されていますので、参考にしてみてください。Dribbbleまた、プロセッシングはデバイスやセンサーと組み合わせた利用も可能です。プロセッシングの公式サイトには、ビジュアルアートの枠に収まらない活用事例がピックアップされています。未経験からIT業界に挑戦するポイントをまとめた資料を公開しています。以下のような疑問はありませんか。読むだけで転職が有利になる限定資料をダウンロードしてみてください。プロセッシング(Processing)のインストールについてプロセッシングのWebサイトから、まずはファイルをダウンロードしましょう。ダウンロードをはじめるとドネーションの画面に遷移します。プロセッシングが気に入った方は、積極的に支援を行ってください。ダウンロードが完了しましたら、展開します。そこからアプリをアプリケーションフォルダに移動して起動します。アプリが無事に立ち上がるとエディターの画面が開きます。プロセッシングのバージョン3.3.7では、はじめから日本語に設定されていますのでとても使いやすいです。環境設定から他の言語への変更も可能。チュートリアルでProcessingをはじめるプロセッシングでは、プログラムをスケッチと呼びます。公式サイトのプロセッシングのチュートリアルを確認しながら、プロセッシングで早速「スケッチ」していきましょう。円を表示させるプロセッシングの公式サイト内にある「Tutorilal」を参考に進めていきます。下記のコードをエディター画面に入力します。80);引用元:Processing.org入力ができましたら、三角形の実行ボタンをクリックしましょう。World!」のような位置づけと考えられます。次は、下記のコードをエディター画面に入力します。80);}引用元:Processing.orgウィンドウ内をマウスオーバーすると、その動きに従って円が描写されます。「すでに楽しい」と感じた方もいらっしゃるのではないでしょうか。プロセッシングはエディターにコードを入力すると、エラーがある場合にはすぐに指摘してくれます。実行時のエラーも具体的な箇所と解決方法も概ね教えてくれるので、初心者でもサクサクとプログラミングが可能。音楽と映像を連動させるプロセッシングを無事に起動できました。準備がとても簡単です。次に、細かい基礎はさておき、音楽と映像の連動を目指します。下記のWebサイトを参考に進めました。音の再生と視覚化まずは、プロセッシングのエディタに「Soundライブラリー」を追加します。はじめに、エディター画面に鳴らしたいファイルをドラッグ&ドロップします。今回は、私が作った楽曲「la3.mp3」を使います。ループ再生するために、エディターに下記のコードを記述しましょう。draw(){}引用元:yoppa.org横軸で再生速度、縦軸で音量をコントロール無事に再生されました。次は、カーソルの動きで再生速度と音量をコントロールします。=map(mouseY,0,height,1.0,0.0);soundfile.rate(rate);soundfile.amp(amp);}引用元:yoppa.orgこちらも問題なく動作しました。画面が黒でわかりづらいですが、カーソルの動きに注目してください。ボリュームと再生スピードがカーソルに連動しています。音量の視覚化それでは、今回の目標である音楽と映像の同期に挑戦しましょう。下記のコードを入力して楽曲の音量と円が同期して動く様にします。diameter=map(rms.analyze(),0.0,1.0,0.0,width);ellipse(width/2,height/2,diameter,diameter);}引用元:yoppa.org結論から言いますと、エラーが発生しました。音楽を解析して、その音量に応じて丸が動くというシンプルなスケッチです。音が左側からしか出力されず、深刻な様子のエラーメッセージが表示されます。Forumで確認すると、「なんでminimにしないの?それで話は終わりじゃん。」といった書き込みがありました。最近では「minim」のライブラリーの利用がサウンドファイルを扱う際のスタンダードとなっている様です。プロセッシング初心者なので、素直に従います。minimのライブラリーを使って再挑戦minimのライブラリを使って、音楽と映像の同期に再挑戦します。今度は、下記のWebページの資料を参考にしました。ファイル名などは変えていますが、基本的にyoppa.orgのコードから引用しています。Minimを使用してProcessingで音を可視化するまずは、プロセッシングのライブラリ一覧からminimのライブラリをインストールしましょう。先ほど失敗した音量と円の動きの同期に再度挑戦。height/2,radiusL,radiusL);ellipse(width/3*2,height/2,radiusR,radiusR);}エラーにならず、左右の音量に合わせて円が描画されました。シンプルですが、少なからず自分が作ったものが動く喜びが感じられるでしょう。次は円ではなく、波形で描画しましょう。同期の要素は同じですが、まったく違った雰囲気に仕上がります。x1,y2+player.right.get(i)*100,x2,y2+player.right.get(i+1)*100);}}カラフルなグラフは躍動感あり音を周波数ごとに分け、色をつけてカラフルなグラフに描画します。波形よりも躍動感があります。FFT(高速フーリエ変換)というフーリエ変換をコンピュータでスピーディーに行うアルゴリズムを使って、音楽を分析。フーリエ変換とは、簡単に言うと音楽の周波数を数学的に分析してあらわすことです。その周波数を色で分類して、大きさはグラフの高さであらわされています。map(i,0,fft.specSize(),0,180);stroke(h,100,100);line(x,height,x,y);}}色の濃度で音を表現グラフの高さではなく、色相と濃度で音を表現しました。神秘的でとてもクールな雰囲気があります。ここまで美しいものが仕上がるとは思っていませんでした。2;fill(h,80,80,a);rect(x,0,w,height);}}完成した動画がこちら上記で紹介した手法を使い、動画が完成しました。シンプル・イズ・ベストな仕上がり音楽と波形が同期した映像が一番曲に合っていると感じました。シンプルなのに、音楽と共に変化するので見ていて飽きません。作者だからでしょうか。YouTubeにアップロードすれば、動画の公開も簡単。1日足らずで、しっかりと求めた以上の結果が得られました。他の方のコードを今回は利用したので、次は自分のイメージにより近いビジュアルアートの制作を行いたいです。Music」によって楽曲を制作。その楽曲とプロセッシングを組み合わせました。Musicの機能を生かし、違うジャンルの音を組み合わせましたので、描画の違いを感じていただければ幸いです。Musicや人工知能による作曲については、下記の記事で詳しく解説しています。Musicとは?事例や仕組みを解説Processing(プロセッシング)ははじめてのプログラミングにおすすめプロセッシングに実際触れてみて、プログラミングの入門におすすめのプログラミング言語であることがよくわかりました。その理由として、簡単なコードの記述でも想像した以上に美しい作品が作れることがあげられます。楽しいと思えることは、プログラミングなどのモノづくりを行う上で大切な要素と言えるでしょう。今回は、音楽と簡単な映像を同期させるという目標を見事に達成。自分の音楽に合わせて映像が流れるのはうれしいものです。誰でもはじめやすく、奥が深いプログラミング言語と言えるでしょう。プロセッシングは、サウンドからの情報によってビジュアルが動くという一方通行のアプローチに限定されません。「映像からサウンドが鳴る」「センサーと同期してサウンドとビジュアルが生成される」など様々なアプローチが可能です。次回は、あっと驚くアプローチに挑戦します。言っておけば、次回もあるのではないかと考えています。エキスパート)は未経験からのエンジニア・Webデザイナー転職を実現するスクールです。確実に使えるスキルを身につけるための教育と、徹底した就職サポートであなたの転職を叶えます。エキスパート)の強みやミッション、実績をまとめたサービス資料をぜひみてください。他のサービスとの違いがわかります。Hiroto音楽・ITをはじめとするさまざまなジャンルのライティングを行っています。ITエンジニアの経験を生かし、TECH::NOTEでの執筆を担当。