【エクスプレッション】動いたり止まったりするwiggle

ゆらぎつつ、一定時間で移動を繰り返すウィグルのエクスプレッションです。

var mWgl = wiggle( 1 , 100 ) - value;

var mRndRng = 500;
var mDur = framesToTime(60);
var mMoveDur = framesToTime(30);
if( mMoveDur > mDur ){ mMoveDur = mDur; }

var mPosT = Math.floor( time / mDur );
seedRandom( mPosT , true );
valA = random( -mRndRng , mRndRng );
seedRandom( mPosT + 1 , true );
valB = random( -mRndRng , mRndRng );

var mTimeForE = mPosT * mDur;
var mRst = ease( time , mTimeForE , mTimeForE + mMoveDur , valA , valB );
mRst + value + mWgl;

var mCtlLyr = thisComp.layer("ヌル 1");
var mSldr1 = mCtlLyr.effect("スライダー制御")("スライダー");
var mSldr2 = mCtlLyr.effect("スライダー制御 2")("スライダー");
var mSldr3 = mCtlLyr.effect("スライダー制御 3")("スライダー");
var mSldr4 = mCtlLyr.effect("スライダー制御 4")("スライダー");
var mSldr5 = mCtlLyr.effect("スライダー制御 5")("スライダー");

var mWglPpty1 = mSldr1
var mWglPpty2 = mSldr2;
var mWgl = wiggle( mWglPpty1 , mWglPpty2 ) - value;

var mRndRng = mSldr3;
var mDur = framesToTime(mSldr4);
var mMoveDur = framesToTime(mSldr5);
if( mMoveDur > mDur ){ mMoveDur = mDur; }

var mPosT = Math.floor( time / mDur );
seedRandom( mPosT , true );
valA = random( -mRndRng , mRndRng );
seedRandom( mPosT + 1 , true );
valB = random( -mRndRng , mRndRng );

var mTimeForE = mPosT * mDur;
var mRst = ease( time , mTimeForE , mTimeForE + mMoveDur , valA , valB );
mRst + value + mWgl;

使いどころ

エクスプレッションのウィグルをもっと有機的な動きにできないもんか、と思い立ち、作ってみました。案外、パラメータが自動で変わり続けるHUD表現なんかに使えますね！

解説

解説していきます。

まずは微妙なゆらぎ用のウィグルです。
ウィグルは自動でvalueを足した数値が返ってきますが、ウィグルで変化した分の数値だけ欲しいので、valueを引いておきます。

var mWgl = wiggle( 1 , 100 ) - value;

上記のウィグルとは別の、動いたり止まったりする用のウィグルを作っていきます。
ウィグルとはいうものの、wiggle()は使わず、random()を使います。

まずは各種、必要な数値を変数に入れていきます。
mRndRng　random()の数値の範囲。
mDur　周期の尺。「動いて止まってひと呼吸を１セットとして、そのセットを何秒にするか」です。

mMoveDur　周期のうち、動いている尺。

動き尺が周期尺よりも長くなるのは意味不なので、一応、if文で動き尺のほうが長くならないようにしています（数値を直接入れず、スライダー制御に置き換えた場合に効力を発揮します）。

var mRndRng = 500;
var mDur = 2;
var mMoveDur = 0.5;
if( mMoveDur > mDur ){ mMoveDur = mDur; }

タイムを周期で割って小数点切り捨てすることにより、周期ごとに『１』ずつ増える変数ができます。

var mPosT = Math.floor( time / mDur );

シードランダムのシードにその『周期ごとに１増える変数mPosT』を入れ、第２引数（timeless）をtrueにすれば、（１フレームごとではなく）周期ごとに変化するランダム値（valA）を得られます。
ランダムの数値範囲は前に決めておいたmRndRngを使っています。
【イメージ】ガタガタの歯みたいなグラフになります。

seedRandom( mPosT , true );
valA = random( -mRndRng , mRndRng );

さらに、その『周期ごとに１増える変数mPosT』に＋１したものをシードとすれば、周期１つ分、後ろのランダム値（valB）を得られます。
【イメージ】ガタガタの歯を、歯１つ分前倒ししたグラフになります。

seedRandom( mPosT + 1 , true );
valB = random( -mRndRng , mRndRng );

ここからはわかりやすいよう、位置プロパティで説明します。
これで、『今いる場所』valAと『次に行く場所』valB、両方を同時間に参照することが可能となったわけです。あとは「次にvalBへカクンと行くのはもうわかっているわけだから、一足先にスムーズに移行しちゃおうぜ」という処理を加えればいいですね。

これにはイーズメソッドを使います。ease( a , b , c , d , e )と書き、日本語訳すると「aの値がb~cのとき、結果の値をd~eにしますよ（あと、動きはスムーズにします）」というものです。

やりたいのは『タイム』が『周期開始時』～『そこから動き尺ぶんだけ後の時間』のとき、『今いる場所（valA）』～『次に行く場所（valB）』にしたい、ということですね。これをイーズメソッドに当てはめています。

『周期開始時』をmPosTにしたくなりますが、mPosTは単位が時間じゃない周期カウンターなので使えません。周期が始まる時間はmDur（周期尺）×mPosT（周期カウンター）で出ますね。一行目のところです。

これで動いたり止まったりするウィグルの完成です。
【イメージ】ぴったり重なり合ったガタガタグラフ。その歯の１つ１つについて、最初はグラフA、最後はグラフBを採用するが、移行はスムーズにする、という感じ。歯間の移行時にグラフBからAへ切り替わるが、次の歯のグラフAは前の歯のグラフBと高さが同じなので、移行もピッタリ問題なし。

var mTimeForE = mPosT * mDur;
var mRst = ease( time , mTimeForE , mTimeForE + mMoveDur , valA , valB );

最後に、元々の数値valueに『動いたり止まったりするウィグル』と『ゆらぎウィグル』を足して完成です。

value + mRst + mWgl;

以上です！
時間軸を含む解説ってムズいですね…。