Adobe AfterEffects での物理演算第二弾記事です。今回は、物を投げた時の運動である、放物運動（斜方投射）について処理を作成してみました。
風や空気抵抗などの様々な要因は考えず、シンプルに二次曲線を描く方法で実現していきます。
AfterEffectsには、エクスプレッションという、Javascriptのエンジンを使ったプログラミングができるようになっています。 このエクスプレッションを使うことで、様々な計算やアニメーションを自動化し、制作を最大限に効率化[…]
実現イメージ
以下の動画のように放物線を描く動きを作ります。
処理イメージ
x軸方向は一定速度、y軸方向は自由落下の公式を使って位置を計算します。放物線の頂点時刻がt=0となるように計算で補正します。
事前準備
① 新規コンポジションを作成（1920×1080）
② シェイプレイヤーを作成し、「楕円形」と「塗り」を追加し、レイヤー名を「layer0001」にします。
これで準備OKです。
処理内容
放物運動後の位置を取得する関数を作成しました。
AfterEffectsのエクスプレッション内で、時間計算など、同じ処理を何度もする場合もあると思います。 そんな時は、関数を使うと記述量を大幅に減らせる可能性があります。 この関数の使い方についてご紹介します。 関数と[…]
以下のコードを「layer0001」の位置のエクスプレッションにコピペします。
//c 2021 COLORCODE-AE
//放物運動後の位置を返す
function getProjectileMotionPosition(anTopPosition, nTopTime, n1mPx, nSpeed){
var nG = 9.8;
var nT = time - nTopTime;
var nAddX = nSpeed * nT;
var nAddY = nG * n1mPx * Math.pow(nT, 2);
return add(anTopPosition, [nAddX, nAddY]);
}
//関数を使う
var anTopPosition = [960, 100];
var nTopTime = 1;
var n1mPx = 100;
var nSpeed = 500;
getProjectileMotionPosition(anTopPosition, nTopTime, n1mPx, nSpeed);これで完成です。再生すると、赤い円が放物線を描く動作をすると思います。
処理説明
今回作成した関数「getProjectileMotionPosition」を使うことで、放物運動の位置を取得します。
関数の使い方
関数「getProjectileMotionPosition」には引数が4つあります。
- anTopPosition・・・放物線の頂点位置
- nTopTime・・・放物線の頂点時刻（秒）
- n1mPx・・・1mを表す画面内サイズ（ピクセル） ※重力計算に使用
- nSpeed・・・1秒あたりのx方向の移動量（ピクセル）
①と②で放物線頂点の位置と座標を指定します。③は今回は100pxにしていますが、10pxにすれば落下速度が1/10になります。④はマイナスの値を指定するとx方向の移動が逆になります。
関数説明
関数「getProjectileMotionPosition」では以下の処理をしています。
- 放物線頂点が時刻0となるよう補正
- x方向は時刻に比例して等速直線運動
- y方向は自由落下同様に二次曲線計算
- 頂点座標に移動量を加える
まとめ
今回は使いやすくするために、放物線の頂点座標と時刻を指定できる処理にしました。
速度や重力を調整することで色々なアニメーションが作れますのでお試しください。
