この記事では、「複製した図形に違うランダムを出す方法」を「seedRandom(index, true)」の実践形式でお伝えします。

この記事でできること

✅複製したレイヤーに個体差のあるランダムを再現できる
✅seedRandom(index, true)の使い方がわかる
✅「index」の意味と、レイヤー順との関係がわかる

※randomについて理解を深めたい方はこちらの記事もご参考ください。

Contents
  1. 複製した図形が「同じ動き」になる問題を解決する
  2. 今回使うエクスプレッション（式）「seedRandom」とは？
  3. seedRandom(index, true)を使って個体差をつける
  4. 複製レイヤーのランダム表現のトラブル対処法 3選
  5. ここまでのまとめ：複製した図形に個体差をつける
  6. おわりに～複製した図形に個体差を出してみよう～

複製した図形が「同じ動き」になる問題を解決する

シン
シン
今回は、複製したレイヤーに「個体差」をつけてよりランダムさを演出するための実践方法をお伝えします。その解決策として用いる式は「seedRandom」です
今回のゴールは……

 

「複製した円に、

 それぞれ違うランダムを出させる」

 

下準備

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

  • コンポ（1920×1080 / 30fps / 4秒）
  • 楕円形ツールで円を1つ作成する（塗りは白や明るい色を採用）
  • アンカーを中央配置にすると、後の操作で役立つ
    短縮キー：Ctrl+Alt+Home（Mac:⌘+Option+Home）
  • ノイズもしくは色付きの平面を背景に追加すると見えやすくなる

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

「不透明度」の表示

  1. 対象レイヤーを選択します
  2. Tキーを押すと不透明度が表示されます
    ※レイヤーから直接探してもOK

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

  1. 対象プロパティのストップウォッチを「Alt（Win）／Option（Mac）を押しながらクリック」
  2. エクスプレッション（式）を入力

レイヤーの複製

  1. 円を作成したシェイプレイヤーを選択
  2. 「Ctrl+D（Mac:⌘+D）」を押すと複製される
あわせて読みたい

【AE】モーション周期表９族「ランダム（random）」を再現する

※「random」の考え方や使いどころについては、理解ページでも解説しています。式の使い方だけ知りたい方はこのまま進んでください。

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

サナ
サナ
前回習った「random」を使ったあとに、その図形を複製してみました。ただ、変化の仕方が揃ってしまっているので、ここにもランダム性を持たせたいんですよね――
シン
シン
では、今回はランダムの出方を制御する式である「seedRandom」を使って、その悩みを解決しましょう。
複数レイヤーに同じ式を入れても、レイヤーごとに違う値が出やすくなりますよ

seedRandomは「ランダムの出方を制御する式」

  • 複数のレイヤーに同じ式を入れたとき、レイヤーごとに違うランダム値を出しやすくするために使う式
    ※今回は、不透明度に入れて複製レイヤーに個体差を出します

「seedRandom(index, true)」 は、タイムライン上のレイヤー番号（index）をもとに、ランダムの出方を変える式です。

複数のレイヤーに同じ式（例：random(20, 100);）を入れると、すべてが同じタイミングで同じ値になりやすくなります。

そこに「seedRandom」を加えることで、レイヤーごとに異なる出方になりやすくなります。

seedRandomで使う「index」の意味

「index」はタイムライン上のレイヤー番号を指します。

レイヤーの順番を入れ替えるとindex値も変わるため、見た目が変わる場合があります。

seedRandomで使う「true」の意味

「true」は、randomの式が時間に沿って変化し続ける状態を維持するための指定です。

この場所にtrueの代わりとして「false」が使えます。

「false」を使う場合、逆に変化が止まってしまうため、今回はtrueを使います。

（復習）seedRandomと一緒に使う式「random」について

  • 指定した範囲の中からランダムな値を返す式
  • 今回は不透明度に入れて、明るさにばらつきを出します

random(20, 100) のように書くと、20〜100の範囲でランダムな値が返されます。

今回はseedRandomと組み合わせて使います。

あわせて読みたい

【AE】モーション周期表９族「ランダム（random）」を再現する
（※randomの使い方が分からない・学び直したい方はこちらの記事で復習しましょう）

seedRandom(index, true)を使って個体差をつける

シン
シン
ここからは実践です。
まず「同じ動きになる状態」を確認してから、seedRandomで個体差をつけていきましょう

実践編①：円にrandomを入れてから複製する

まずは、円の不透明度にrandomを入れてから、レイヤーを５つほど複製します。

「動きがどうなるか」を確認してみましょう。

  1. 作成した円のシェイプレイヤーを選択する
  2. 不透明度を表示させる（短縮キー：T）
  3. エクスプレッションを開く（ストップウォッチマークをAlt《Option》＋クリック）
  4. 式「random」を入力する
  5. レイヤーを複製して円を5個にする（短縮キー：Ctrl《⌘》＋D）
  6. 各レイヤーを横一列になるよう配置する
実践①：まず1つの円に式を入れて、レイヤーを複製する
random(20, 100);

※このままコピペしてください（コピーすると自動で半角になります）

※1つの円に式を入れてから複製することで、「すべてのレイヤーに同じ式が入った状態」になります。

実践②：seedRandomを追加して個体差を出す

サナ
サナ
やっぱり、同じような光り方をしていて不自然に見えます
シン
シン
では、randomの前に「seedRandom(index, true);」を追加してみましょう。

この式を追加することで、円の光り方に変化が出るはずです

  1. エクスプレッションを書き換える
  2. randomの前に seedRandom(index, true); を追加する
実践②：seedRandomを追加して個体差を出す
seedRandom(index, true); random(20, 100);

※このままコピペしてください（コピーすると自動で半角になります）

※各レイヤーのindex値をもとにランダムの出方が変わるため、複製したレイヤーでも、それぞれ違うタイミングで動きやすくなります。

実践③：indexの働きを確認する

サナ
サナ
式を入れたら光り方が変わりましたね。ちなみに、「index」って具体的に何をしているんでしょうか？
シン
シン
indexはタイムライン上のレイヤー番号です。
試しにレイヤーの順番を変えてみると、動きの出方が変わるのが確認できますよ

seedRandom(index, true) を入れたあと、タイムライン上でレイヤーの順番を入れ替えてみましょう。

index値はレイヤー番号を示しています。

レイヤー順を変えるとindex値が変わるため、seedRandomが参照する値も変わり、ランダムの出方が変わります。

seedRandom(index, true) を使っているときは、レイヤーの順番を変えると見た目も変わります。（レイヤー番号で管理しているため）

レイアウトが決まったら、レイヤー順を固定しておきましょう。

複製レイヤーのランダム表現のトラブル対処法 3選

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

サナ
サナ
式を入れたのに、エラーが出ました。
シン
シン
まずはスペルと記号を確認しましょう。式エラーの多くは、ここが原因です
  1. seedRandomのスペルが合っているか確認する（大文字・小文字にも注意）
  2. カッコが正しく閉じているか確認する
  3. 全角のカッコやカンマが入っていないか確認する

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

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

よくあるエラー例（セミコロンなし）
seedRandom(index, true) random(20, 100)

※式と式の間にセミコロン（;）がないとエラーになります。

正しい書き方
seedRandom(index, true); random(20, 100);

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

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

サナ
サナ
スペルも確かめたけど、エラーが消えないんですけど――
シン
シン
では、seedRandomをrandomの後に書いていないかを確認してください
  • 式の入力順序が正しいかを確認する

seedRandomは後ろに続く式のランダムの出方を制御する式なので、randomなどの式の前に書きます。

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

ケース3：レイヤー順を変えたら見た目が変わった

サナ
サナ
同じ式なのに、レイヤーを動かしたら見た目が変わりました。
シン
シン
seedRandom(index, true) は、タイムライン上のレイヤー番号（index）をもとにランダムの出方を決めているため、順番が変わると結果も変わります
  1. index はレイヤー番号なので、順番を変えると結果も変わると知っておく
  2. 見た目を固定したい時は、レイヤー順を動かさないようにする

これはエラーではなく、seedRandom の仕様によるものなので、レイアウトが決まったら、レイヤー順を変えないようにしましょう。

ここまでのまとめ：複製した図形に個体差をつける

今回は、seedRandom(index, true) を使って、複製したレイヤーにそれぞれ違うランダムを出しました。

  • 「seedRandom(index, true)」で複製レイヤーに個体差を出せる
  • 「index」はタイムライン上のレイヤー番号と連動している
  • レイヤー順を変えると結果も変わる
復習①：今回の基本の式
seedRandom(index, true); random(20, 100);

※個体差のあるランダムを出したいときに使ってみましょう

応用：「posterizeTime」の式とあわせて使う場合
seedRandom(index, true); posterizeTime(8); random(20, 100);

※エクスプレッションは基本的に上の式から順番に反映されます。seedRandomはrandomがどのように出るかの前提条件なので、randomを実行する前に機能していないと意味がありません。
そのため、posterizeTimeよりも前に置く必要があります。

おわりに～複製した図形に個体差を出してみよう～

サナ
サナ
これで、複製した図形をバラバラに動かせるようになりました！
シン
シン
ここまでできたら、複数の要素を使った演出も大丈夫です。回転やスケールにも同じように使えるので、ぜひ試してみてください
あわせて読みたい

今回の形をそのまま再現できたら、ぜひ回転やスケールに入れたときの違いも試してみてください。

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