Processingと音楽の連動（音楽×プログラミング記事）

こんにちは。Evening Music Recordsの鶴留です。

本記事では、音楽情報バイラルメディア「EVENING」の運営スタッフにより、テック関連情報をブログ形式でお届けさせていただきます。

今回は、音楽と連携したアニメーションを作っていきます。任意の音楽データを取り込み、周波数ごとの音量で動きを付けます。
そのためには、Minimライブラリと音源が必要になります。

Minimライブラリ

Minimは、Processingのサウンドライブラリです。
短いコードで、サウンドを駆使したプログラムが書けます。今回はこれを利用します。
お持ちでない方は、スケッチ＞ライブラリをインポート＞ライブラリを追加を選択し、Minimと検索すると「Minim | An audio library that provides…」というライブラリがあるのでインストールしてください。

音源の準備

アニメーション実行のための音源を用意します。拡張子はmp3、wav等で実行可能です。他の拡張子は試していないので分かりません。音源ファイルを、コードを保存してあるファイルと同じ階層に保存してください。

実際に作る！

それでは、実際にコードを描いていきます。
「sample.wav」の箇所は、自分で用意した音源ファイルの名前に変更してください。

import ddf.minim.analysis.*;
import ddf.minim.*;

Minim minim;
AudioPlayer player;
FFT fft;

int fftSize;
float radious = 150;
float r = 255;
float g = 0;
float b = 255;

void setup() {
 size(1500, 1500);
 minim = new Minim(this);
 player = minim.loadFile("sample.wav"); //自分の音源ファイル名
 player.loop();
 fft = new FFT(player.bufferSize(), player.sampleRate());  //インスタンス変数
}

void draw() {
 translate(width / 2, height / 2);
 background(0);
 strokeWeight(30);
 stroke(r, g, b);
 fft.forward(player.mix);  //FFTの実行
 for (int i=0; i<fft.specSize(); i+= 1) {　//fft.specSize()で周波数帯域の取得
   float angle = +map(i, 0, fft.specSize()/9, 0, 360) ;
   float len = fft.getBand(i)*10;　//周波数帯域ごとの振幅を取得
   line(radious * cos(angle), radious * sin(angle), (radious + len) * cos(angle), (radious + len) * sin(angle));
 }
 noStroke();
 fill(0);
 ellipse(0, 0, 280, 280);
 fill(255);
 ellipse(0, 0, 170, 170);
}

実行結果はこのようになります。流れる音楽の音量に合わせて周りのピンクのラインが伸び縮みします。

右端から時計回りの向きに、使用した音源の低～高周波数のスペクトルを表示しています。

fft.specSize()/9の箇所は、いまいち理解できておらず、9で割ったら形が綺麗になったので使用しています。分かった事があったら追記しようかと考えています。また、周波数ごとに色を変えるなどして、解析が正しく行われているか分かるようなグラフィックに改善したいと思います。

音楽情報バイラルメディアEVENING： https://evening-mashup.com/