このシリーズではアニメーションのためのプログラムを日本語に置き換えて解説します。
プログラムとして書かれた数式を日本語にすることで言語の仕様に依存しない「なぜそのように動くか？」という理解の一助となればと思います。
※私がWeb制作を生業にするフロントエンドエンジニアなのでプログラムの箇所はPixiJSで記述しています。
プログラムを日本語に。
円運動は以下のような書き方で実装出来ます。
実際のプログラムと見比べて、理屈を読み解いていきます。
円運動の半径 ＝ 200
速度 ＝ 3
角度 ＝ 0
アニメーションさせるためのループ処理{
角度 += 速度
オブジェクトのX座標 ＝ 円運動の半径 * 三角関数sin（角度 * 円周率 / 180）
オブジェクトの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 radius = 200;
const speed = 3;
let angle = 0;
app.ticker.add((delta) => {
angle += speed;
obj.x = radius * Math.sin(angle * Math.PI / 180);
obj.y = radius * Math.cos(angle * Math.PI / 180);
});
これを上から順番に日本語にするとこうなります。
オブジェクト名 = オブジェクトの入れ物を作成
オブジェクト.色の塗りつぶし（白,透明度）
オブジェクト.角丸の四角を作成（x座標, y座標, 横幅, 縦幅, 角丸サイズ）
オブジェクト.色の塗りつぶし終了
オブジェクト.中心点x = オブジェクトの幅の半分
オブジェクト.中心点y = オブジェクトの高さの半分
円運動の半径 ＝ 200
速度 ＝ 3
角度 ＝ 0
アニメーションさせるためのループ処理{
角度 += 速度
オブジェクトのX座標 ＝ 円運動の半径 * 三角関数sin（角度 * 円周率 / 180）
オブジェクトのY座標 ＝ 円運動の半径 * 三角関数cos（角度 * 円周率 / 180）
}
ループを繰り返す度に角度の初期値に速度の値を足していく事でオブジェクトの速度を制御します。
オブジェクトの座標についてはラディアンに変換した角度を三角関数に入れることで円の起動上の値を算出します。
アニメーションとして変化を付けるなら速度や半径を変化させたり、オブジェクトの数を増やすといろんな表現が実現出来ると思います。ローディング画面なんかは良く円運動を使ってますよね。
