BUNCHO METHOD コードを楽しむプログラミング情報メディア

【レッスン#10】 「タイマー処理」を学ぶプログラミング教材

プログラミング教材#10では一定時間ごとに指定した処理を実行する方法を学びます。これによりアニメーション表現などができるようになります。

プログラミング教材#10の概要

プログラミング教材#10のサンプルコード①

See the Pen 教材#10-1 by programmingbird (@programmingbird) on CodePen.

実行結果については説明不要ですね。左上から右下へ向かって大きな黒い円が勝手に流れていくアニメーションです。「トリガー」にあたるのは今まで出てきたボタンでもマウスでもなく、一定時間ごとに決まった処理を実行するタイマーです。これをJavaScriptコードでどうやって作るのかを解説します。

プログラミング教材#10 サンプルコード①の解説

JavaScript // 変数の準備

var x = -100;
var y = -100;

描く円の座標用に変数x,yを用意し、初期値として-100をセットしています。-100にしている理由は、後ほど半径100の円を描くのでスタート時にちょうど円が画面の外に隠れるようにしています。

JavaScript //「トリガー」の設定

setInterval(loop, 1000 / 120);

これが今回の主役コードです。

setInterval(◯, △);
⇒ △ミリ秒ごとに関数◯を実行せよ、という命令。

ミリ秒は1000分の1秒。サンプルコード①で1000/120(つまり1000÷120)としているのは、1秒(1000ミリ秒)に120回実行したいから。もちろんここに1000÷120の答えである8.333を書いてもよいのですが、アニメーションでよく使われる「フレームレート」(1秒間に◯コマ表示するという意味)を読み取りやすくするためあえて計算式のまま描いています。120の部分を60にすれば1秒間に表示される回数が半分になるのでその分アニメーションはゆっくりになります。自分の好みのスピードに調節してみてください。

JavaScript //「アクション」の設定

function loop() {
   context.clearRect(0, 0, 300, 300);
   context.beginPath();
   context.arc(x, y, 100, 0, Math.PI * 2);
   context.fill();
   x += 1;
   y += 1;
   if (x > 400) {
      x = -100;
      y = -100;
   }
}

画面をクリアして、中心が(x,y)で半径100pxの塗りつぶし円を描く、部分まではすぐわかりますね。

次のx += 1;y += 1;はこの処理が実行されるごとにx座標とy座標を1ずつ増やすという処理で、結果的に円が右下に移動していくことがわかります。

最後のif文は、xが400をこえてしまったらxもyもスタート時と同じ-100にリセットしなさい、ということです。

マウスカーソルを追いかけてくる円

プログラミング教材#10のサンプルコード②

See the Pen 教材#10-2 by programmingbird (@programmingbird) on CodePen.

タイマー処理と、前回プログラミング教材#9 マウスイベントで学んだマウスの動きをトリガーにする方法を組み合わせることで、円がマウスカーソルを追いかけてくるサンプルを作りました。ちょっとかわいい動きになっていますね。

プログラミング教材#10 サンプルコード②の解説

JavaScript // 変数の準備

var x = 0;
var y = 0;
var mx = 0;
var my = 0;

サンプルコード①に加えて、マウスカーソルの現在位置を表す座標用として変数mx,myを用意しておきます。

JavaScript //「トリガー」の設定

canvas.addEventListener("mousemove", mouseMove, false);
setInterval(loop, 1000 / 120);

1行目は前回プログラミング教材#9 マウスイベントと同じマウスの動きをトリガーにした設定。2行目はサンプルコード①と同じタイマーをトリガーにした設定。2つのトリガーを仕掛けています。

JavaScript //「アクション」の設定

function mouseMove(e) {
   mx = e.offsetX;
   my = e.offsetY;
}

前回と同じマウスの動きのトリガーによりマウスがちょっとでも動いたら実行されるアクションです。マウスが動くたびにmx,myにマウスカーソルの最新の座標がセットされます。

function loop() {
   context.clearRect(0, 0, 300, 300);
   context.beginPath();
   context.arc(x, y, 10, 0, Math.PI * 2);
   context.fill();
   x += (mx - x) * 0.1;
   y += (my - y) * 0.1;
}

これがタイマーのトリガーで一定時間ごとに実行されるアクションです。ポイントは最後の2行。xの増分を+1ではなく、(mx - x) * 0.1としています。mx-xは直前に描いた円の中心の座標とマウスカーソルの最新の座標の差分。そこに0.1をかけることで、差分の1/10にあたる距離だけ円をマウスカーソルに近づけています。y座標についても同様です。このシンプルな処理により円がマウスカーソルにちょっと遅れて必死で追いかけてくるようなかわいい動きが実現できているのです。