このシリーズではアニメーションのためのプログラムを日本語に置き換えて解説します。
プログラムとして書かれた数式を日本語にすることで言語の仕様に依存しない「なぜそのように動くか？」という理解の一助となればと思います。
※私がWeb制作を生業にするフロントエンドエンジニアなのでプログラムの箇所はPixiJSで記述しています。
プログラムを日本語に。
オブジェクトが渦巻き軌道でアニメーションするプログラムを日本語で書くと、以下のような書き方で実装出来ます。
渦巻きの半径 ＝ 10
速度 ＝ 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;
let radius = 10;
const speed = 3;
let angle = 0;
app.ticker.add((delta) => {
angle += speed;
radius++;
obj.x = radius * Math.sin(angle * Math.PI / 180);
obj.y = radius * Math.cos(angle * Math.PI / 180);
if(radius > 500){
adius = 10;
}
});
これを上から順番に日本語にするとこうなります。
オブジェクト名 = オブジェクトの入れ物を作成
オブジェクト.色の塗りつぶし（白,透明度）
オブジェクト.角丸の四角を作成（x座標, y座標, 横幅, 縦幅, 角丸サイズ）
オブジェクト.色の塗りつぶし終了
オブジェクト.中心点x = オブジェクトの幅の半分
オブジェクト.中心点y = オブジェクトの高さの半分
渦巻きの半径 ＝ 10
速度 ＝ 3
角度 ＝ 0
アニメーションさせるためのループ処理{
角度 += 速度
渦巻きの半径++
オブジェクトのX座標 ＝ 渦巻きの半径 * 三角関数sin（角度 * 円周率 / 180）
オブジェクトのY座標 ＝ 渦巻きの半径 * 三角関数cos（角度 * 円周率 / 180）
条件分岐（ 渦巻きの半径 < 500 ）{
渦巻きの半径 = 10
}
}
以前、円運動の記事を見た事がある方はデジャブを感じるかもしれません。ほぼ円運動と同じ記述で、違うのは円の半径をループ処理の度に大きくしていくという一点のみです。
こちらのサンプルプログラムではだんだん大きくなっていく渦巻きですが、これを小さくする場合は軌道の半径をマイナスしていけば良いのです。
軌道の半径に入れる値によって、有名なアルキメデスの螺旋や対数螺旋なんかを作ることが出来ます。
ただ渦巻き状のアニメーションを使う場面は多くは無いかもしれません。
複数の動きを組み合わせたモーショングラフィックスの中でパーティクルを渦巻き状に動かして賑やかな背景にしたり、内向きの渦巻きでオブジェクトが吸い込まれていく様を表すとかetc…。
