【AE】randomを使って電灯のようなちらつきを再現する方法

※randomについて理解を深めたい方、活用イメージが固まらない人はこちらの記事もご参考ください。

不透明度をランダムに変えて、電灯のような「ちらつき」を表現する

サナ

今回は実際にランダムを使ってみるんですよね。何を再現するのでしょうか

シン

今回は、不透明度をランダムに変えて、電灯のようなちらつきを表現しましょう。

電灯のようなちらつきを再現するための下準備

実践の前に、以下を用意してください。

この後の操作で使う知識も確認します。

• 「不透明度」の表示

• エクスプレッション（式）設定

今回使うエクスプレッション（式）「random」「posterizeTime」とは？

サナ

「random」「posterizeTime」それぞれの式を使うそうですが、「何をするための式」でしょうか？

シン

「random」は値にランダムさを出すための式、「posterizeTime」はその変化の細かさや速さを調整するための式です。
今回のような電灯のちらつきでは、この2つを組み合わせることで、ただ点滅するだけではない「不規則な変化」を作りやすくなります

random

randomは、指定した範囲の中からランダムな値を返すエクスプレッション（式）です。

たとえば「random(20, 100)」と書くと、20から100の範囲の中でランダムな値が返されます。（不透明度に入れた場合、「20％〜100％の間」で明るさが変化します）

今回のような電灯の表現では、明るさにばらつきがある方が自然に見えるため、randomで明るさにムラを出した方が「それっぽさ」を出せるでしょう。

なお、「どの値をランダムにしたいか」を決めるのがrandomの役割であるため、実際は不透明度以外にも使えます。

例）

• 位置に入れる⇒位置がランダムに変わる
• 回転に入れる⇒角度がランダムに変わる

posterizeTime

posterizeTimeは、エクスプレッションの値を「1秒あたり何回更新するか」を制御する式です。

たとえば「posterizeTime(8)」と書くと、その後に続く式の値の更新回数が、1秒あたり8回に制限されます。

通常、30fpsのコンポでrandomだけを使うと、毎フレームごとに値が変わるため、ちらつきが速すぎたり、変化が細かすぎたりして不自然さが出ることがあります。

そこで、posterizeTimeを前に入れることで「変化の回数」が減るため、ちらつきのリズムを調整できます。

つまり、randomが「どんな値にするか」を決める式だとすれば、posterizeTime は「その変化をどのくらいの細かさで見せるか」を調整する式です。

この2つを組み合わせることで、「明るさはランダムだけど、変化の速さは見やすく調整されたちらつき」を作れるようになります。

randomを使って電灯のような「ちらつき」を体験してみる

シン

ここからは実践です。実際に電灯のような「ちらつき」をAfter Effectsで作ってみましょう

実践編①：エクスプレッションを使ってランダムを再現する

まずは、ランダムで変化する状態を「不透明度」を操作して作ってみます。

randomの式を不透明度に反映させて、「ランダムに変化している状態」を確認してみましょう。

random(20, 100);

実践②：変化の見え方を調整する

サナ

確かに、図形が点灯しているように見えますけど、ちらつきが強すぎる気がします。
それに、もう少し変化が遅い方が私のイメージしている電灯っぽいような――

シン

randomの「範囲」が広いことで、ちらつきに強い印象を与えることがあります。
また、切り替えの「速さ」が影響していることもあるので、ここでは数値の範囲や更新の回数の調整について触れますね

数値の範囲を狭くする

randomの範囲を狭めることで、変化の幅が小さくなり、ちらつきを改善できます。

今回は「最小値を60」、「最大値を100」で試してみましょう。

random(60, 100);

random(20, 100) と比べて明るさの幅が狭くなるため、少し控えめな見え方になります。

posterizeTimeで「変化の速さ」を遅くする

random(20, 100) だけだと１フレーム毎に値が変わるため、ちらつきが目立ってしまうこともあります。

「posterizeTime」を前に入れて、変化のリズムを少しゆっくり見せてみましょう。

posterizeTime(8); random(60, 100);

この動きをさらに遅くするには、posterizeTimeの数値をさらに小さくします。

posterizeTimeの数値を8から4に変更してみましょう。

posterizeTime(4); random(60, 100);

数値を小さくすると変化がゆっくりになり、数値を大きくすると変化が細かくなります

実践③：似た動きと見比べてみる

シン

randomとwiggleの見え方の違いをチェックしてみましょう

wiggle(4, 30);

この式では、値が「1秒あたり4回のペース」で、「基準値を中心に上下へ30程度の範囲」でランダムに変化します。

ここでの「4」は時間の長さではなく、1秒の間にどれくらい細かく揺れるかを表す数値です。
また、「30」は揺れの大きさを表しています。

たとえば不透明度を70％に設定している場合は、70％を基準に前後30程度の範囲でランダムに変化します。

イメージとしては、40％〜100％付近で不規則に動く形です。

ただし、毎回きれいに最大値や最小値まで動くわけではありません。

その範囲の中で、上がったり下がったりしながらランダムに値が変わります。

そのため、必ず端まで動いてから反転するとは限りません。

なお、wiggle は一定時間の動きを繰り返す式ではありません。

そのため、「4秒後に元の値に戻る」といった決まりもありません。

設定している間は、その時々で新しいランダムな揺れが続いていきます。

補足：同じランダムっぽい動きでも、「中の動き」に特徴がでる

posterizeTime(4); wiggle(4, 30);

「posterizeTime」の式と組み合わせると、値の更新回数が制限されます。

wiggle単体では、値がなめらかに揺れ続けるような「流れのある変化」になりやすいです。

ここに更新回数の制限を加えることで「動きにカクつき」が生まれ、「randomに近い印象の見た目」が出来上がります。

ただし、大本の動きはwiggleなので、完全に同じではありません。

randomよりも、「揺れの流れが少し残ったようなカクつき方」になります。

この微妙な違いを使い分けるのも、表現の面白さのひとつです。

サナ

一見同じような動きでも、randomとは少し違って、wiggleの方は「動きに流れがある」ように見えますね

シン

とはいえ、自分もよくやってしまうのですが、この微妙な違いまで考え始めると手が止まりやすくなります。
最初のうちは、「ランダムっぽく見せたいならrandomを使う」と決めてしまうのも一つの手ではないでしょうか

不透明度のランダム表現のトラブル対処法 3選

ケース1：式がエラーになる

サナ

式を入れたのに、エラーが出ました。

シン

まずはスペルと記号を確認しましょう。ここが一番多いです。

参考①：複数の式がある場合

式を並べるときは、セミコロン（;）で区切る必要があります。区切りがないとエラーになります。

posterizeTime(8) random(20, 100)

posterizeTime(8); random(20, 100);

改行でもエラーがでなくなります

連続して式を入力するケースもあるので、セミコロン（;）を癖付けましょう。

ケース2：スペルを確認してもエラーのまま

サナ

スペルも確かめたけど、エラーがきえないんですけど――

シン

もしかして、randomの後にposterizeTimeを入れていませんか？

今回使った式「posterizeTime」は、後ろに書いた式の更新のしかたを調整する式なので、randomなどの式と組み合わせて使います。

使うときは、posterizeTime(8); random(60, 100); のように、組み合わせる式の前に書きます。

もしスペルミスがないのにエラーが出る場合は、式の順番や書き方も確認してみましょう。

ケース３：ちらつきが強すぎる

サナ

動きが強すぎて、見づらいです

シン

randomの範囲が広いと、値がバラつきやすいので、ちかつきが強く感じることがあります。random単体で使った場合特有の更新の細かさも影響しているかもしれません

調整するときは、原因の大きさから逆算して1要素ずつの調整がおすすめです。

ちらつきの最も大きな要因は「明るさの振れ幅」にあります。

まずはrandomの範囲を確認して、微調整が必要であれば、posterizeTimeや背景の明るさの順番に微調整しましょう。

ここまでのまとめ：電灯のような「ちらつき」を表現する

今回は、不透明度をランダムに変えることで、電灯のような「ちらつき」を再現しました。

random(20, 100);

posterizeTime(8); random(60, 100);

おわりに～不透明度のランダム表現を実際に試してみよう～

サナ

これで、私もランダムっぽい動きを使えそうです

シン

ここまでできたらランダムを実践でつかえると思いますよ。よりランダムっぽい動きを使えるようにしたい方は、次の記事を読んで理解を深めてみてはいかがでしょうか

randomは、1つの題材で実際に試してみると理解しやすい式です。

まずは基本の形を再現し、そのあとで数値を少しずつ変えながら違いを確認してみてください。

使っていくうちに、randomの見せ方が少しずつ磨かれていくでしょう。

それでは、また次の記事でお会いしましょう。