このシリーズではアニメーションのためのプログラムを日本語に置き換えて解説します。
プログラムとして書かれた数式を日本語にすることで言語の仕様に依存しない「なぜそのように動くか？」という理解の一助となればと思います。
※私がWeb制作を生業にするフロントエンドエンジニアなのでプログラムの箇所はPixiJSで記述しています。
プログラムを日本語に。
波形運動は日本語で書くと、以下のような書き方で実装出来ます。
実際のプログラムと見比べて、理屈を読み解いていきましょう。
振幅の値 ＝ 100
速度 ＝ 6
フレーム ＝ 0
アニメーションさせるためのループ処理{
フレーム +＝ 速度
オブジェクトのX座標 +＝ 速度
オブジェクトのY座標 +＝ 振幅の値 * 三角関数cos（フレーム * 円周率 / 180)
}
これを実際のプログラムで書くとこうです。
※アニメーションに関係ない記述に関しては一部割愛しています。
// 動かすオブジェクトを定義
let obj = new PIXI.Graphics();
obj.beginFill(0xFFFFFF, 1);
obj.drawRoundedRect(0, 0, 100, 100, 16);
obj.endFill();
obj.pivot.x = 50;
obj.pivot.y = 50;
const amplitude = 100; // 振幅の値
const speed = 6; // 速度
let frame = 0; // フレーム
app.ticker.add((delta) => {
frame += speed;
obj.x += speed;
obj.y = amplitude * Math.cos(frame * Math.PI / 180);
if(obj.x > app.screen.width+obj.width/2){
obj.x = obj.width * -1;
}
});
これを上から順番に日本語にするとこうなります。
オブジェクト名 = オブジェクトの入れ物を作成
オブジェクト.色の塗りつぶし（白,透明度）
オブジェクト.角丸の四角を作成（x座標, y座標, 横幅, 縦幅, 角丸サイズ）
オブジェクト.色の塗りつぶし終了
オブジェクト.中心点x = オブジェクトの幅の半分
オブジェクト.中心点y = オブジェクトの高さの半分
振幅の値 ＝ 100
速度 ＝ 6
フレーム ＝ 0
アニメーションさせるためのループ処理{
フレーム +＝ 速度
オブジェクトのX座標 +＝ 速度
オブジェクトのY座標 +＝ 振幅の値 * 三角関数cos（フレーム * 円周率 / 180)
条件分岐（ オブジェクトのX座標 ＞ 描画領域の幅 + オブジェクトの幅 / 2 ）{
オブジェクトのX座標 ＝ オブジェクトの横幅 * -1
}
}
波形運動は一定速度で移動するX軸と、上下移動を繰り返すY軸を実装すれば実装出来ます。
X軸の移動は単純な加算の繰り返しです。
Y軸の上下運動は、フレームの値を三角関数で処理することで連続して繰り返す値を獲得しています。その繰り返す値に対して値をかける事によって振幅の幅を決めています。
波形運動を使うシーンとしては、パーティクルやランダムノイズと併用して風や粒子の流れ表現したりする際でしょうか。
単体よりも多数のオブジェクト、またはパスを構成するポイントに対して使うと面白いことが出来るかと思います。
