Math.sin()を手に馴染ませる

前回紹介したMath.sin()関数は、10数年前からAfter Effectsに実装されているものの、少なくとも私は、たまに使っては忘れ‥‥を繰り返し、すぐにsinとcosの関係性を忘れます。毎日のように使っていれば覚えたまま忘れないんでしょうけど、中々に出番の少ない関数なので、必要になるたびに記憶から掘り出す始末です。

ちょっと余談ですが、円運動というのは、真正面から見て等速に動いていても、横から見るといわゆる「両端詰め」の動きに見えます。アニメではよく両端詰めの動きが出てきますが、そうした多くの動きは関節(や接合部)を基点とした円運動の変形でもあります。もちろん、すべての動きがそうであるわけではないですが、例えば、力を抜いた腕がフラフラ動くのは、変形した円運動の典型と言えます。円が変形すれば楕円や8の字になり、そこにエネルギーの加速減速が加味されれば、いわゆるリアクションをたっぷり含んだキャラの動きが出来上がります。‥‥アニメーターの方なら、思い当たるのではないでしょうか。

After Effectsでは、そうした円運動をプログラム文で表現することができます。エクスプレッションという「プチ・プログラム」をレイヤーの位置や回転や不透明度に適用することで、規則的(不規則な動きも表現できますが、とりあえず)な動きをキーフレーム無しで表現することが可能です。

例えば、レイヤーの位置に、

value+[time*100,0];

‥‥と書き込めば、1秒あたり100ピクセル、右に向かってレイヤーが移動する動きを作れます。

この機能を利用して、Math.sin()、Math.cos()、そして円周率のMath.PIを用いれば、様々な円運動を作り出せます。以下は、基本的なバリエーションです。


*1080p60で再生すると、滑らかな2K60pの動きを見れます。
*半径を「486px」にしているのは、画面内に収まりつつ、54px(1080/2/10=54)間隔のグリッドに綺麗に接するためです。

X軸とY軸のそれぞれの動きが組み合わさると円の軌道へと変化する様子は、ビジュアルで見れば、なるほど‥‥と感覚的に納得できるのではないでしょうか。円運動なんて、映像制作に全く関係ない人でも、日常で見慣れているありふれた要素ですが、その成り立ちを明確に認識しているのは、まさにプロの映像制作者の特質と言えます。

上図のMath.sin(),cos()の使い方を覚えておけば、After Effectsにおいて規則的な円運動で困ることは無くなります。‥‥と、自分の忘備録代わりに書いておこう。

ちなみに、頭脳パズル的な考えで、8の字の動きもエクスプレッションで表現してみました。8の字を描くためには、どのような軌跡を辿れば良いのか、プログラム文でパズルを解いてみます。



簡単なのは、左側の上下に軌道が偏った8の字のタイプです。意外に難しかったのは、右側の正円2つを組み合わせたタイプで、上下の往復を表現するのに手間取りました。

こうした円運動の動きは、ランプの点滅などにも応用できますし、自分流のwiggle(揺れ)を作る元ネタにもできます。

素材待ちの暇つぶしに、どうぞ。


calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
30      
<< April 2017 >>

selected entries

categories

archives

links

profile

search this site.

others

mobile

qrcode

powered

無料ブログ作成サービス JUGEM