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

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

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

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

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

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();
}

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

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

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

かっこいい！！！

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

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