ここでは三角関数を使った周期的なモーションの実装方法を学んでいきましょう。

上下振幅のモーション

三角関数のMath.sin()は周期的なモーションを作るのに便利な関数です。引数にはラジアンを渡せば、-1.0から+1.0までのいずれかの結果(戻り値)を得ることができます。つまり、この範囲に収まる数値を得るのに三角関数が役立つということです。具体的な例として、次のサンプルではボールが上下に移動するモーションを実装しています。

上下の移動を実現しているコードは次の部分です。tickイベントの処理で上下移動するようにy座標を変化さえています。

var angle = 0;

// 時間経過
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
  ball.y = 100 + Math.sin(angle) * 50;
  angle += 0.1;
}

三角関数のMath.sin(angle)が-1.0から+1.0までの値になるので、50を掛け算して-50.0から+50.0までの値となるようにしています。ここに中心座標となる100を加えることで、結果的には50〜150のY座標を得ています。三角関数の引数となるangleは時間経過で0.1ずつ増加しますが、このことによって50〜150の範囲にy座標がスムーズに変化するようになります。

汎用的にするために、コードに直接書いている数値を変数に変えてみましょう。変数名が役割を示しているので見通しがよくなったのではないでしょうか。

var centerY = 100;
var range = 50;
var angle = 0;
var speed = 0.1;

// 時間経過
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
  ball.y = centerY + Math.sin(angle) * range;
  angle += speed;
}

以降は、このテンプレートにそってコードを解説していきます。

サイズの振幅

三角関数による周期的なモーションはY座標のみならず、他のプロパティーに対しても適用することができます。次の例では、スケールに対して三角関数を利用しています。

これを実現している主なコードは次の通りです。適用するのはscaleXとscaleYプロパティーの2つです。水平と垂直の両方のスケールを変化させることで、拡大・縮小するモーションとなっています。

var angle = 0;
var centerScale = 1.0;
var range = 0.5;
var speed = 0.05;

// 時間経過
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
  // スケールを変化
  ball.scaleX = ball.scaleY
              = centerScale + Math.sin(angle) * range;
  angle += speed;
}

2つの角度を利用する

プロパティーごとに異なる角度で制御してみましょう。

XとY座標それぞれにことなる三角関数の角度を適用するため、変数を増やして制御しています。

var angleX = 0;
var angleY = 0;
var centerX = 320;
var centerY = 100;
var range = 50;
var speedX = 0.08;
var speedY = 0.12;

// 時間経過
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
  ball.x = centerX + Math.sin(angleX) * range;
  ball.y = centerY + Math.sin(angleY) * range;
  angleX += speedX;
  angleY += speedY;
}

speedXとspeedYに異なるスピードを設定しているので、X方向とY方向の動き方に変化を加えることができました。

振幅のある移動

振幅しながら横に移動するモーションを作ってみましょう。

これを実現している主なコードは次の通りです。

var angle = 0;
var centerY = 100;
var range = 50;
var xSpeed = 1;
var ySpeed = 0.05;

// 時間経過
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
  ball.x += xSpeed;
  ball.y = centerY + Math.sin(angle) * range;
  angle += ySpeed;

  // (省略)
}

X座標のpxは単純増加させ、Y座標のpyは三角関数によって求めた値を使っています。

三角波を描く

サインカーブ(三角波)を三角関数を使って描いてみましょう。

これを実現している主なコードは次の通りです。

var angleY = 0;
var centerY = 100;
var range = 50;
var speedX = 1;
var speedY = 0.05;

var px = 0;

shape.graphics
     .setStrokeStyle(1)
     .beginStroke("DarkRed")
     .moveTo(0, centerY);

// 時間経過
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
  // X座標の計算
  px += speedX;
  // Y座標の計算
  var py = centerY + Math.sin(angleY) * range;
  angleY += speedY;
  // 線を描画
  shape.graphics.lineTo(px, py);
}

X座標のpxは単純増加させ、Y座標のpyは三角関数によって求めた値を使っています。

円運動

円周上をうごくモーションを作ってみましょう。

これを実現している主なコードは次の通りです。今まではMath.sin()関数のみでしたが、今回はMath.cos()関数も使っています。

var angle = 0;
var centerX = 320;
var centerY = 100;
var radius = 80;
var speed = 0.05;

// 時間経過
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
  ball.x = centerX + Math.cos(angle) * radius;
  ball.y = centerY + Math.sin(angle) * radius;
  angle += speed;

  stage.update(); // 画面更新
}

X座標の計算にはMath.cos()関数を、Y座標の計算にはMath.sin()関数を使っています。重要なことはそれぞれの関数に与えている引数は同じangleを使っているということです。

楕円運動

楕円の円周上をうごくモーションを作ってみましょう。

これを実現している主なコードは次の通りです。

var angle = 0;
var centerX = 320;
var centerY = 100;
var radiusX = 200;
var radiusY = 80;
var speed = 0.05;

// 時間経過
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
  ball.x = centerX + Math.cos(angle) * radiusX;
  ball.y = centerY + Math.sin(angle) * radiusY;
  angle += speed;

  stage.update(); // 画面更新
}

X座標の計算にはradiusXを、Y座標の計算にはradiusXを使っています。X方向の半径と、Y方向の半径を異なる数値にするだけで、楕円円周が実現できます。

前の記事へ