【enchant.js】正弦波の書き方【やっぱり関係ない】

前回は円を扱いましたので、今回は正弦波を描画してみましょう。
正弦波ってどんな図形かというと、『あずまんが大王』のOPの1:10あたりでやってる動きですｗ

冗談はさておき、正弦波の描く図形は「波」です。
これがなぜ円と関係してくるのでしょうか。
円を描く時のy軸に注目して下さい。
y軸の動きは、まず下方向へと動き、下限に達すると上方向の動きとなります。そしてまた上限に達すると下方向の動きへと転じ、最後に元いた座標に戻ります。
さて、ここでx軸の動きをプラス方向へと限定してみましょう。x軸の本当の動きは、y軸と同じで上限・下限の行ったり来たりですが、これを一方向へと限定することで波の図形を描くことが出来るようになるのです。
そんなこんなで、今回のコードぉおおお！

重要な部分をピックアップしてみましょう。

        var width = 320;
        var swing = 50; // 振り幅
        var cycle = width / 3; // 周期
        var velocity = (Math.PI * 2) / cycle; // 角速度

width は正弦波を描く横の長さです。こいつを160としたら、画面の中ほどまでしか波が描画されません。
swing はy軸の上限下限の振り幅ですね。これを160としたら、画面の上下いっぱいの波を描きます。
cycle は周期です。上のコードでは、width の中に3つの周期を描くとしています。
velocity は角速度です。時間（x軸の位置）によって描画角度がどう変わるかを表したものです。角速度のお蔭で線がギザギザにならず、きれいな曲線を描いてくれるんですね。

        ctx.translate(0,160);
        for (var i = 0; i < width; i++) {
            var x0 = i;
            var y0 = swing * Math.sin(velocity*x0) * -1; // -1で符号反転
            var x1 = i + 1;
            var y1 = swing * Math.sin(velocity*x1) * -1; // -1で符号反転
            ctx.beginPath();
            ctx.moveTo(x0,y0);
            ctx.lineTo(x1,y1);
            ctx.stroke();
        }

まず translate で描画の原点を変更します。
あとはx軸がiの座標とi+1の座標を求めつないでいくだけです。

さて、やっぱりこうきたらアニメーションもさせてみましょう。

今回も同様、width いっぱいに図形を描画しても処理を止めてませんので延々と波を描き続けます。
Spriteの幅をもっと大きく取って、正弦波が半ばまで描かれたらSpriteを左にスライドさせていくって処理も面白いと思います。
では！