Audio Visualizer

かっこいいオシロスコープを作る

こんにちは!パイロットの山下ことympbycです。好きな音楽はサイケデリックトランスです。

音楽に合わせて動く映像ってカッコイイですよね! ああいうのをジェネレティブに作れたらもっとカッコいいですよね!

今日は手始めにオシロスコープを作ってみます。Web Audio APIを使って、音を鳴らしながら、アニメーションフレームごとに波形をサンプリングしてcanvasに描画します。

実は波形を出すところまでは、https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_APIにちゃんと動くコードが載っているので、こちらを見てください。

wave
Image from https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API

上記の手順に従えばこんな波形ができるんですが、これじゃあつまらないので、こいつを円形にします!

前回の記事、トーラスで学ぶアニメーションと座標系変換で作った、disc関数を使います。

function circle (r, theta) {
    return {
        x: r * Math.cos(theta), //x
        y: r * Math.sin(theta)  //y
    };
}

function disc (R,t,r,p) {
    var c = circle(R,t); //円周上の点
    return {
        x: c.x + r * Math.cos(p) * Math.cos(t),
        y: c.y + r * Math.cos(p) * Math.sin(t)
    };
}

各点の算出にうまいこと disc を使えば、

var R = 200; //円の半径
function draw () {
    window.requestAnimationFrame(draw);
    audio.analyser.getByteTimeDomainData(audio.dataArray);
    //...

    var t = 0;
    var origin = {x: W/2, y: H/2};

    for (var i = 0; i < bufferLength; i++) {
        var v = dataArray[i] / 128.0;
        var pt = disc(R, t, 100, v);  // <---- ココ. 

        if (i === 0)
            canvasCtx.moveTo(pt.x + origin.x, pt.y + origin.y);
        else
            canvasCtx.lineTo(pt.x + origin.x, pt.y + origin.y);

        t += (Math.PI * 2) / bufferLength;
    }
    canvasCtx.stroke();
}

Screen Shot 2015-05-27 at 12.19.21

こんな感じ。かっこいい!!

あとは微調整して、こちらが今回のデモになります。Tested on Firefox 35, Chrome 42 (音が鳴ります)

Sound adapted from http://www.last.fm/music/Mind+Distortion+System/_/Dark+Matter

かっこいい!!!

パラメータの調整次第で色んな印象が作れます.

Screen Shot 2015-05-28 at 15.24.58Screen Shot 2015-05-28 at 15.29.44 1Screen Shot 2015-05-28 at 15.30.23

今回は波形を表示しましたが、AnalyserNode#getByteTimeDomainDataAnalyserNode#getByteFrequencyDataなどで取れる数値の配列をもとにアニメーションを作れば、音楽に合わせて動くようなアニメーションは色々作れるはずなので、引き続き実験していきます。

Lispと宇宙と幾何学のファンです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です