こんにちは。
AMDlabの藤井です。
今日も暑い！7月になりさらにむし暑くなってきた気がします。。。
熱中症には気を付けて下さいね。
さて今回は、Processingを使って遊びたいと思います。
現実世界の音に反応して動く絵を作ってみましょう。
流行っているインタラクティブデザインってやつですね^^
Processingだとライブラリが既に用意されているので簡単に作れちゃいます。
Processingを持ってない方は、ここからdownloadして下さい。
Processingが開けたら早速ライブラリを入れちゃいましょう。
ツールバー内、スケッチ>>ライブラリをインポート>>ライブラリを追加
こんなページがポップアップで出てきたと思います。
右上のドロップダウンリストでSoundを選択して下さい。
音に関するライブラリは他にもありますが、今回は、最もベーシックな「Sound library based on MethCla for Processing」を選択してインストールして下さい。
この方法で他のライブラリのインポートも行えます。
これで、下準備は整いました。あとは書いていくのみ。
今回は簡単に、音の大きさに反応して大きさを変える図形を作成してみましょう。
import processing.sound.*;//Import Sound Libraries
AudioIn in;
Amplitude amp;
まずは、Sound Librariesをインポートします。
用意されているクラスを使用します。
ここで、リアルタイムに音を入力するのがAudioInになります。
ちなみに、ファイルのデータを再生するにはSoundFileを使用します。
void setup() {
size(800, 800);
fill(0, 255, 0);
noStroke();
in = new AudioIn(this, 0);
in.start();
amp = new Amplitude(this);
amp.input(in);
}
setup部分です。
キャンバスの大きさや描画色を設定したり、初期化したりしています。
void draw() {
background(0);
int scale = 3;//Scale diameter
float diameter = map(amp.analyze(), 0.0, 1.0, 0.0, width*scale);
ellipse(width/2, height/2, diameter, diameter);
}
最後に描画部分です。
入力した音を解析して波の大きさを取得し、その値の幅を画面の大きさに合わせて調整しています。
Scaleを付けたのは、変化をよりわかりやすくするためです。
音の大きさに応じて円の大きさを変えるようにしています。
以上になります。
以下に全てのコードを貼っておきます。
こんなに短い記述で、インタラクティブな絵が描けるわけです。
簡単だし面白いですよね^^
解析方法や表現方法は他にも色々あるので、また紹介しますね。
import processing.sound.*;//Import Sound Libraries
AudioIn in;
Amplitude amp;
void setup() {
size(800, 800);
fill(0, 255, 0);
noStroke();
in = new AudioIn(this, 0);
in.start();
amp = new Amplitude(this);
amp.input(in);
}
void draw() {
background(0);
int scale = 3;//Scale diameter
float diameter = map(amp.analyze(), 0.0, 1.0, 0.0, width*scale);
ellipse(width/2, height/2, diameter, diameter);
}
COMMENTS