Processingと音楽の連動②(音楽×プログラミング記事)
こんにちは。Evening Music Recordsの鶴留です。
本記事では、音楽情報バイラルメディア「EVENING」の運営スタッフにより、テック関連情報をブログ形式でお届けさせていただきます。
今回は前回に引き続き、Processingと音楽を組み合わせたグラフィックの作成になります。前回作ったものに色を付けました。色を表現するためにHSBという方法を用いました。
※ 前回記事: https://note.com/eveningmusic/n/nf46272df5a69
HSB(HSV)とは?
RGBは赤・緑・青の3つの色の比率で色を表現しますが、HSBでは色相・彩度・明度で色を表現します。Processingでは、関数colorMode(HSB,360,100,100)でHSBモードに切り替えることができます。括弧内の値により、今回の色相は最大値360まで、彩度と明度は最大値100までと決めています。特に色相が色を大きく変えるパラメータとなっており、値が大きくなるにつれ、赤→橙→黄→緑→青→紫→赤と変化していきます。
実際に作る!
HSBを活用して、周波数ごとに色が変わるアナライザを作りました。
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(1000, 1000);
minim = new Minim(this);
player = minim.loadFile("sample.wav");
player.loop();
fft = new FFT(player.bufferSize(), player.sampleRate());
colorMode(HSB, 360, 100, 100);
}
void draw() {
translate(width / 2, height / 2);
background(0);
strokeWeight(20);
fft.forward(player.mix);
for (int i=0; i<fft.specSize(); i+= 1) {
float h = map(i, 0, fft.specSize(), 0, 360); //音楽から取得した周波数スペクトルの幅を0~360に変換
float angle = +map(i, 0, fft.specSize(), 0, 2*PI) ; //放射状に伸びる線を0~2πの間に描写
float len = fft.getBand(i)*10;
stroke(h, 100, 100);
line(radious * cos(angle), radious * sin(angle), (radious + len) * cos(angle), (radious + len) * sin(angle));
}
noStroke();
fill(0);
ellipse(0, 0, 280, 280);
fill(360);
ellipse(0, 0, 170, 170);
}
実行すると以下のようになります。
関数colorMode(HSB,360,100,100)でHSBモードにしました。
線や図形の枠の色を設定する関数stroke()の値を(h,100,100)とし(hは変数)、色相が変わる仕様になっています。for文で音楽の周波数の小さいほうからスペクトル幅を取得していき、変数h内でマッピングさせます。0~fft.specSize()の値を0~360へマッピングさせました。そうすることで、円の一周である360°に上手く対応させることができ、綺麗な虹色となるのです。
0~360の範囲を変えることで好みの色にしたり、線の太さを変えたりするだけでもだいぶ楽しいので、是非色々試してみてください。
今回は以上になります。
音楽情報バイラルメディアEVENING: https://evening-mashup.com/
音楽情報バイラルメディア「EVENING」は、音楽業界に関連するニュースやエンターテイメント情報を提供するWebメディアです。 宜しければ、サポートをお願いいたします!! 最新の音楽関連情報について、皆さんの知りたい情報をお届けいたします!!