p5.jsでビジュアルデザイン！コーディングでサウンドビジュアリゼーションを作ろう

p5.jsとp5.soundライブラリを使った、サウンドビジュアリゼーションの作り方をご紹介します。

ブラウザーを使った、基本的なラインスタイルのミュージックビジュアリゼーションを紹介します。p5.jsを使ったスケッチと、p5.soundライブラリを使ったコーディングによるサウンド解析のデモを行います。

サウンドビジュアリゼーションとは

音に反応して変化するビジュアルをデザインするとき、一番シンプルなのは音量に反応させてビジュアルを変化させることです。しかし、音量というひとつのシグナルを元にスケッチするのと、低音や高音に反応させたり、または独自にカスタマイズしてビジュアルを変化させるのでは、表現できるビジュアルの質と数が違います。複雑なビジュアリゼーションを可能にするのが、FFT（高速フーリエ変換）というアルゴリズムです。

FFTは、音の波を解析して異なる周波数を検出することができます。つまり、FFTを使って曲を解析することで高音、中音、低音、音量のデータを細かく取得できます。詳細なデータを元に、コーディングを行い、ビジュアルをデザインすることができます。

p5.soundライブラリはビルトインでFFTオブジェクトを実装しています。用途に応じた様々なメソッドがあり、たとえば、getEnergy()はとても便利で、音量に応じて0から255の変数を返します。

曲の再生中にこのプログラムを実行することで、モダンな見た目のビジュアルを表示することができます。

// Initiate the FFT object
  var fft = new p5.FFT();

  // Run the analysis, while the audio is playing
  fft.analyze();

// Get different value for different frequency ranges
// ----------------------------------------------------------------
// p5.sound comes with predefined keywords,
// but giving getEnergy() 2 numbers instead of a keyword
// you could use your custom range if needed
var bass = ft.getENergy( "bass" );
var treble = ftt.getEnergy( "treble" );
var mid = fft.getEnergy( "mid" );
var custom = fft.getEnergy( 100, 200);

ビジュアルをスケッチしてみよう

このデモは大きく分けて4つのステップに分けられます。

１. 最初のスケッチをする
２. 音を解析する
３. 周波数に応じたビジュアル
４. マウスの動きに合わせたインタラクションを付け加える

例として、最初のビジュアルはひとつの円を均等に分けて周りに簡単な形をスケッチします。4等分、8等分……としたときの画像が以下になります。

出典：Codrops

// Define in how many pieces you want to divide the circle
var pieces = 32;

// Circle's radius
var radius = 200;

// Move the origin to the center of the canvas
translate( width/2, height/2 );

// The centered circle
stroke( 0, 0, 255);
ellipse( 0, 0, radius );

// For each piece draw a line
for( i = 0; i < pieces; i++ ){

  // Rotate the point of origin
  rotate( TWO_PI / pieces );

  // Draw the red line
  stroke( 255, 0, 0 );
  line( 10, radius/2, 0. radius );

  // Optionally also draw to the opposite direction
  stroke( 0 );
  line( -10, radius/2, 0, radius );

}

さらに、変数を静的から動的に変えるとさらに面白くなります。時間の経過に合わせて変わる変数をコーディングに含めることで、ビジュアルがよりユニークに変化します。また、ここでカスタムした範囲を使うことで、適切な範囲内で変化するようにコーディングできます。

// Run the FFT analysis
fft.analyze();

// Get the values of different frequency ranges
var bass = fft.getEnergy( "bass" );
var mid = fft.getEnergy( "mid" );
var treble = fft.getEnergy( "treble" );

// Map the range of each volume with your desired number
var mapBass = map( bass, 0, 255, -100, 100 );
var mapMid = map( mid, 0, 255, -150, 150 );
var treble = fft.getEnergy( treble, 0, 255, -200, 200 );

for( i = 0; i < pieces; i++ ) {

  rotate( TWP_PI / pieces );

  // Draw the bass lines
  line( mapBass, radius/2, 0, radius );

  // Draw the mid lines
  line( mapMid, radius/2, 0, radius );

  // Draw the treble lines
  line( mapTreble, radius/2, 0, radius );

}

このコードを用いることで、さまざまな形のビジュアルを作り出すことができます。コーディングを変えてみて、自分だけの音に反応するユニークなビジュアルを作ってみましょう。