このシリーズではアニメーションのためのプログラムを日本語に置き換えて解説します。
プログラムとして書かれた数式を日本語にすることで言語の仕様に依存しない「なぜそのように動くか？」という理解の一助となればと思います。
※私がWeb制作を生業にするフロントエンドエンジニアなのでプログラムの箇所はPixiJSで記述しています。
プログラムを日本語に。
オブジェクトがランダムな軌道で移動するプログラムを日本語で書くと、以下のような書き方になります。
角度 ＝ 270
速さ ＝ 0.5
ラディアン ＝ 0
X軸の移動量 ＝ 0
Y軸の移動量 ＝ 0
アニメーションさせるためのループ処理{
条件分岐（ランダム関数 * 2 ＜ 1 ）{
角度 += 3.6
} 条件と異なれば {
角度 -= 3.6
}
ラディアン ＝ 角度 * 円周率 / 180
X軸の移動量 = 三角関数cos（ラディアン） * 速さ
Y軸の移動量 = 三角関数sin（ラディアン） * 速さ
オブジェクトのX座標 +＝ X軸の移動量
オブジェクトのY座標 +＝ Y軸の移動量
}
これを実際のプログラムで書くとこうなります。
※アニメーションに関係ない記述に関しては一部割愛しています。
// 動かすオブジェクトを定義
let obj = new PIXI.Graphics();
obj.beginFill(0xFFFFFF, 1);
obj.drawRoundedRect(0, 0, 100, 100, 16);
obj.endFill();
obj.x = 400;
obj.y = 400;
let angle = 270;
let speed = 0.5;
let radian = 0;
let vx = 0;
let vy = 0;
app.ticker.add((delta) => {
if(Math.random() * 2 < 1) {
angle += 3.6;
} else {
angle -= 3.6;
};
radian = angle * Math.PI / 180;
vx = Math.cos(radian) * speed;
vy = Math.sin(radian) * speed;
obj.x += vx;
obj.y += vy;
});
これを上から順番に日本語にするとこうなります。
オブジェクト名 = オブジェクトの入れ物を作成
オブジェクト.色の塗りつぶし（白,透明度）
オブジェクト.角丸の四角を作成（x座標, y座標, 横幅, 縦幅, 角丸サイズ）
オブジェクト.色の塗りつぶし終了
オブジェクト.x = 描画エリアの中心点
オブジェクト.y = 描画エリアの中心点
角度 ＝ 270
速さ ＝ 0.5
ラディアン ＝ 0
X軸の移動量 ＝ 0
Y軸の移動量 ＝ 0
アニメーションさせるためのループ処理{
条件分岐（ランダム関数 * 2 ＜ 1 ）{
角度 += 3.6
} 条件と異なれば {
角度 -= 3.6
}
ラディアン ＝ 角度 * 円周率 / 180
X軸の移動量 = 三角関数cos（ラディアン） * 速さ
Y軸の移動量 = 三角関数sin（ラディアン） * 速さ
オブジェクトのX座標 +＝ X軸の移動量
オブジェクトのY座標 +＝ Y軸の移動量
}
このプログラムの肝は「次に移動する角度のプラスマイナスをランダムに決める」というところです。角度だけをランダムにする事によって、X座標とY座標をランダムした場合のように振動するような動作にならず浮遊するような地続きの動きが実装出来ます。
このサンプルのように1つだとなんだか味気ないですが、この動きをパーティクルに当てはめればホタルや雪のようなアニメーションを実装する事が出来ます。
表現によっては重力や風といった特定のベクトルの値を加減させるとよりリアリティが増した動きになるでしょう。
