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

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

STEP
好きな素材を用意。

揺らがせる素材を複数、コンポジションに入れます。一個だけ入れてあとで複製でも大丈夫です。

STEP
好きなプロパティのエクスプレッション欄に以下をコピペでOK。

エクスプレッション欄の出し方はAlt&ストップウォッチマークをクリックです。
数値を1つだけ持つプロパティ用なので、位置に使う場合は『次元に分割』してからXY両方に適用してください。

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;
STEP
揺らぎ具合をヌルレイヤーの数値で一括調整できるバージョン。

コンポジションにヌルを追加。
できた名前が『ヌル 1』でなければ、エクスプレッション内『ヌル 1』表記をできたヌル名へ書き換え。
*『””』は消さないように注意してください。

ヌルにスライダー制御を5個追加。
各種パラメータ用です。これもできた名前とエクスプレッション内名を揃えてください。

素材エクスプレッションに以下をコピペでOK。

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;

■パラメータ一覧
スライダー制御:揺らぎウィグルの頻度。
スライダー制御 2;揺らぎウィグルの範囲。

*この2つはただのウィグルのパラメータと一緒です。

スライダー制御 3:大きなウィグルの範囲。単位はピクセル。
スライダー制御 4:大きなウィグルの時間周期。単位はフレーム。
スライダー制御 5:大きなウィグルの時間周期中の動き部分。単位はフレーム。

*5は時間周期(4)の中での動く尺なので、4より大きくしたら効果なしです。

使いどころ

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

解説

解説していきます。

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

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

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

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

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

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

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

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

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

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

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

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

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(周期カウンター)で出ますね。一行目のところです。

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

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

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

value + mRst + mWgl;

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

よかったらシェアしてね!
  • URLをコピーしました!