jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.1.23

速度(velocity)を理解して、canvasアニメに応用する

Category:
Canvas
Physics

前回、5分で覚えるcanvasアニメーションの基礎という記事を書き、canvasアニメ(パラパラマンガ)の大枠を作成するところまでを解説しました。

今回はその続き、「パラパラマンガの各コマをどうやって描画すれば、モノが動いているようにみえるのか」について、「速度」を使って解説していきたいと思います。

速度の理解と、canvasへの応用

まず、速度の定義は以下のとおり。

速度(そくど、英: velocity)は、単位時間当たりの物体の位置の変化量である。

速度 - Wikipedia

ブラウザに表示されているオブジェクトを動かす場合にも、速度を使用すればいろいろと応用が効きます。

前回のcanvasアニメの枠組に当てはめて言い換えると、
canvas上のオブジェクトが、設定したfpsに応じた1コマ分の時間で、何px移動するのか。
この値=そのオブジェクトの速度、ということになります。
これを計算して1コマごとにオブジェクトの座標を更新して描画してあげれば、その物体は「動いているように見える」ということです。

シンプルなコードで済む「等速運動」を用いて、速度を利用したアニメーションを再現してみます。

See the Pen motion of uniform velocity by ykob (@ykob) on CodePen.

等速運動に直接関係するクラスの定義は以下のとおりです。

// オブジェクトのクラスを定義
var motionObj = function(x, y) {
  this.x = x;
  this.y = y;
  this.v = 300 / fps; // これが速度。fpsで割ることで、1秒間に進む速度として定義する。
};

// オブジェクトの移動を制御するメソッドを定義
motionObj.prototype.move = function (){
  this.x += this.v; // 前のコマのx座標に速度を足す=速度分だけオブジェクトが動いたことになる。
  if (this.x > width) {
    this.x = 0;
  }
};

// オブジェクトのカタチを描画するメソッドを定義
motionObj.prototype.render = function (){
  ctx.beginPath();
  ctx.arc(this.x, this.y, 20, 0, 360 * Math.PI/180, false);
  ctx.fill();
  ctx.closePath();
};

// インスタンスを生成
var obj = new motionObj(0, height / 2);

// requestAnimationFrameのループ処理内部でインタンスの移動と描画を実行
var render = function() {
  ctx.clearRect(0, 0, width, height);
  obj.move(); // ここで、生成されたインスタンスの移動制御メソッドを実行する。
  obj.render(); // 移動した座標にオブジェクトを描画する。
};

速度は英語で書くと「velocity」となり、変数名vで扱われることが多いようです。
物理の式でもvと記載されるようなので、速度とcanvasアニメの関連付けが意識できるようになれば、等速運動よりも複雑な式をそのまま引用してcanvasアニメに反映させることも比較的容易になります。

ですので、まずは物理の式自体は簡単なものを利用し、速度自体の使い方をマスターするように心がけてください。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.