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/