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

Cool viz

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つのステップに分けられます。

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

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

Base viz
出典: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 );

}

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

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

33,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 33,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ