Processingで音楽に連動する動画が簡単につくれた話

はじめに

音楽に合わせて動く動画を作りたいなあと思ったので調べていたところ、Processingで簡単にできてしまうことが分かったので試しに作ってみました。

Minimライブラリで音の取り込み

Minimライブラリを使って、音声シグナルを取込みます。取り込んだ波形シグナルを、FFT（高速フーリエ変換）クラスのメソッドを使って、周波数ごとのシグナルに変換します。

  Minim minim = new Minim(this);
  AudioPlayer player = minim.loadFile("music.mp3",512);

  // フーリエ変換のインスタンスを生成
  FFT fft = new FFT(player.bufferSize(), player.sampleRate());

  // FFTで波形から周波数のスペクトルに変換
  fft.forward(player.mix);
  // ステレオ音声の左右チャネルを分けたい場合は
  // fft.forward(player.left);
  // fft.forward(player.right);

  // スペクトルのサイズを取得
  int specSize =  fft.specSize();
　// i番目の周波数帯の音量を取得
  float volume = fft.getBand(int i);

FFTがしていることは、ざっくりと下のようなイメージです。音声を、音の高さ（周波数帯）ごとに分解して、音量（振幅）のスペクトルに変換しています。

音声シグナルに合わせて動くように描画

変換した音声シグナルに合わせて動くようにProcessingで描画すれば、簡単に連動する動画ができてしまいます。

Processingで動画作成～音楽に合わせてillumination pic.twitter.com/NfiGMhnWlV

— Dminor (@Dminor_) 2016年12月24日

Processingソースは下のように書くだけです！とっても簡単。

import ddf.minim.analysis.*;
import ddf.minim.*;

Minim minim;
AudioPlayer player;
PImage img;
FFT fft;
int specSize;
float volume;

void setup(){
  size(800, 600);
  
  minim = new Minim(this);
  player = minim.loadFile("music.mp3",512);
  // フーリエ変換のインスタンスを生成
  fft = new FFT(player.bufferSize(), player.sampleRate());
  player.play();
}

void draw(){
  background(0);
  stroke(#FFFFFF);
  img = loadImage("illumination_img.png");
  image(img, 0, 0, width, height);
  
  // FFTで波形から周波数のスペクトルに変換
  fft.forward(player.mix);
  specSize =  fft.specSize();

  for(int i = 0; i < specSize; i++){
    // イルミネーションを描画
    float h = map(i, 0, specSize, 0, 360);
    volume = fft.getBand(i);
    int ellipse_width = (int)((int)volume * (h/8));

    if(h >= 0 && h <= 360 && ellipse_width >=10){
      int x = (int)random(0,800);
      for(int w = ellipse_width; w > 0; w -= 2){
        fill(#FFFFFF,30);
        ellipse(x, h+510, w,w);
      }  
    }  
        
    // 周波数帯の最大値を画面幅にマッピング
    float w = map(i, 0, specSize, 0, width);
    // 各周波数帯の音量をlineとして描画
    line(w, height, w, height - volume * 5);      
  }
}

  
void stop(){
  player.close();
  minim.stop();
  super.stop();
}

終わりに

ProcessingのMinimライブラリを使えば、音楽に連動する動画が簡単につくれることが分かりました。Processingは、Processing.jsとしてjavascriptに移植されていて、HTML5と組み合わせることで、AdobeのAfter Effects上で気軽に扱えるようです（Processing for AE）。映画やテレビ番組の映像加工にも利用されるAfter Effectsと組み合わせることで、更にリッチな動画がつくれそうです。

参考サイト

http://yoppa.org/cuc_proga11/2961.html
http://tasoco.hatenablog.com/entry/2015/04/03/092912