Processingと音楽の連動②

Processing

こんにちは。Evening Music Records株式会社 でインターンをさせて頂いている鶴留です。
今回は前回に引き続き、Processingと音楽を組み合わせたグラフィックの作成になります。前回作ったものに色を付けました。色を表現するためにHSBという方法を用いました。

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/
※ インターンシップの詳細はこちらから:https://evening-mashup.com/home/music-intern 
※ 就職活動に関する情報はこちらから: https://evening-mashup.com/evening-job 

コメント

タイトルとURLをコピーしました