random()・seedRandom()｜シェイプを複製してランダムなドット背景を作る

丸を1つ作り、複製していくだけで、位置と大きさがばらつくドット背景。random() と seedRandom() を使うと、ドットを1つずつ手で動かさずに、背景のベースを作れます。

今回は再生しても配置が変わらない背景を制作します。基本のドット背景から、文字を載せるタイトル背景、カードを散らした背景へ展開。粒の数・大きさ・配置パターンを変える方法も紹介します。

この記事で使用したAEプロジェクトを無料ダウンロードできます。ダウンロードは記事の最後から。

まずは完成形：複製でドットを増やす

この動画では複製後のレイヤーを用意し、不透明度のホールドキーで表示数を切り替えています。式が時間に合わせて新しいシェイプを生成するわけではありません。実際の制作では、式を入れたシェイプレイヤーをCommand／Ctrl＋Dで増やします。

ドットの重なりや偏りもランダム配置の一部です。等間隔に並べる機能や、ほかのドットを避ける機能は含みません。ざっくり背景を作ってから、数や配置パターンを調整する使い方に向いています。

random()とseedRandom()の役割

書き方	役割
random(30, 100)	30〜100の範囲から数値を選ぶ
seedRandom(1, true)	ランダム値のパターンを設定し、時刻で変わらないようにする
seed	パターンを変えるための数値。今回の基本値は1
true	現在時刻を乱数の種に含めない指定

random() だけでは、時間によって値が変わります。背景を固定したい今回は、先に seedRandom(seed, true) を書きます。trueは「ランダムをやめる」指定ではなく、「時間で変えない」指定です。

AEの乱数には、レイヤー固有の識別情報とプロパティも関係します。同じseedでも、複製したレイヤーや別プロパティがすべて同じ数値になるわけではありません。今回のコードはレイヤー番号のindexを使わず、複製したレイヤーごとの差を利用します。

コピー用コード1：位置をランダムにする

シェイプレイヤー全体の「トランスフォーム」→「位置」へ貼り付けます。シェイプ内のグループの「位置」ではありません。

var seed = 1;
seedRandom(seed, true);
var pad = 80;
[random(pad, thisComp.width - pad),
 random(pad, thisComp.height - pad)];

pad はドットの中心が入る範囲の余白です。1280×720なら、Xは80〜1200、Yは80〜640の範囲になります。端からドットの輪郭までを測る余白ではありません。ドットを大きくする場合は、半径も考えてpadを増やしてください。

コピー用コード2：大きさをばらつかせる

同じレイヤーの「スケール」へ貼り付けます。

var seed = 1;
seedRandom(seed + 1000, true);
var s = random(30, 100);
[s, s];

1つのランダム値sをXとYの両方に使うので、丸の縦横比が保たれます。random(30, 100) の単位は、ここではスケールの％です。元の直径が80pxなら、30〜100％で直径24〜80pxになります。

seed + 1000 は、スケール側のパターンを調整するためのオフセットです。位置とスケールは別のプロパティなので、同じseedを書いたとしても同じ数値になるという意味ではありません。

基本の作り方：1つに式を入れて、レイヤーを複製する

項目	今回の条件
制作環境	After Effects 26.5×89／macOS／JavaScriptエクスプレッションエンジン
コンポジション	1280×720／30fps／6秒／8bpc
シェイプ	楕円80×80px／塗りあり／線なし
トランスフォーム	2D／親とリンクなし／位置の次元分割なし
アンカー	レイヤーのアンカーポイントと楕円の中心を同じ位置に揃える
追加プラグイン	不要

1. 1280×720のコンポジションを作り、「レイヤー」→「新規」→「シェイプレイヤー」で空のシェイプを作ります。
2. コンテンツの「追加」から「楕円」と「塗り」を追加。楕円のサイズを［80, 80］、楕円パスの位置を［0, 0］にします。
3. レイヤー全体のアンカーポイントを［0, 0］に揃えます。グループを使う場合はグループの位置・アンカーも0、スケール100％、回転0度にします。
4. レイヤー全体の「位置」のストップウォッチをOption／Alt＋クリックし、位置用コードを貼り付けます。
5. 同じレイヤーの「スケール」へ、大きさ用コードを貼り付けます。位置とスケールのキーは不要です。
6. レイヤーを選んでCommand／Ctrl＋Dで複製します。シェイプ内のリピーターや楕円パスだけの複製ではなく、レイヤー全体を複製します。
7. 12〜24個ほどに増やし、再生しても位置と大きさが変わらないことを確認します。

配布プロジェクトではDOTS_BASICがドット本体のコンポジションです。記事の基本動画では、見出しを置くため、そのコンポジションを65％で表示しています。コードの範囲はDOTS_BASIC内の1280×720を基準にしています。

配置パターンを変える：seedだけを調整

違う配置を試したいときは、位置用コードの var seed = 1; を2や3へ変えます。大きさのパターンも変えたければ、スケール用コードのseedも変更します。位置だけを変えたい場合は、スケールのseedはそのままにしてください。

この比較は位置とスケールの両方のseedを揃えて変えています。比較用ソースではCTRLのSeedを0・2・4秒で切り替え、各時点を固定して並べています。普段の固定背景では、Seedへ時間変化のキーを入れる必要はありません。

同じコンポジション・レイヤー・プロパティでseedを戻せば、そのパターンを再現できます。一方、別レイヤーへ同じseedを入れただけで、同じ見た目を再現できるとは限りません。良い配置ができたら、プロジェクトごと残しておくと安心です。

粒の大きさを変える：最大スケールだけを調整

スケールの範囲	元の直径80pxでの範囲	背景の印象
30〜40％	24〜32px	小粒で控えめ
30〜70％	24〜56px	大きさの差が程よく出る
30〜100％	24〜80px	大きい粒も混ざる

変更するのは var s = random(30, 100); の右側の数値です。XとYへ別々のrandomを使うと楕円になるため、円のまま使うときは [s, s] を維持してください。

実践1：文字を載せるドット背景

設定	値
コンポジション	02_TITLE_BACKGROUND
ドット本体	DOTS_TITLE_BACKGROUND／42個／元の直径80px
位置・スケール	seed 1／余白80px／スケール30〜100％
色・不透明度	濃紺の背景に青緑のドット／各ドット32％
動きを付ける部分	背景プリコンポーズの不透明度0〜100％を0〜0.8秒で変更
文字の読みやすさ	中央へ背景と同色のパネルを置き、その上へ文字を配置

基本のドットを42個へ増やし、色と不透明度を落とします。次に背景をプリコンポーズし、その上へタイトルを置きます。文字とドットが重なる場合は、今回のように背景と同色のパネルで文字の周りを整理できます。

フェードインは、プリコンポーズした背景の不透明度キーで付けています。randomの値を動かしているわけではありません。静止画の背景としても使えますし、全体をフェードさせて動画の導入にも使えます。

実践2：カードを複製して散らす

ドットをカードや図形へ変えたいときも、位置とスケールの考え方は同じです。今回のカードは180×110pxで作ったプリコンポーズを使い、アンカーポイントを中心へ揃えています。

設定	値
コンポジション	03_SCATTER_CARDS／本体はCARD_SCATTER
カード	180×110px／同じデザインを12枚
位置の余白	pad = 120
スケール	random(70, 100)
回転	random(-18, 18)
注意	カード同士の重なりは自動では避けない

基本の位置コードのpadを120、スケールの範囲を70〜100へ変更します。さらに、レイヤー全体の「回転」へ次の式を入れます。

seedRandom(2001, true);
random(-18, 18);

回転の単位は度です。カードの中心がアンカーなら、その中心を基準に少しずつ傾きます。形が大きいほど端からはみ出しやすくなるため、今回の余白はカードの大きさと回転範囲に合わせて広げています。ほかの寸法でも必ず収まる値ではありません。

カード内の文字や模様は、元のCARD_ARTWORKを直せば全カードへ反映されます。ただし、位置や角度の式は外側の各カードレイヤーに入っています。後から全カードの値を揃えて変更するなら、共通のコントローラーを使う構成へ発展させると便利です。

複製するときの注意点と、手作業との使い分け

やりたいこと・症状	確認すること
同じ場所へ重なってしまう	レイヤー全体を複製しているか確認。1レイヤー内のリピーターは、今回のレイヤー単位の式と別の仕組み
再生するとドットがちらつく	seedRandomの第2引数がtrueになっているか、seedに時間変化が入っていないか確認
ドットが楕円になる	スケールを1つの値sから［s, s］で返しているか、親や外側のスケールが縦横同じか確認
粒が端から切れる	padは中心の余白。ドットの半径・カードの回転と大きさを考慮して広げる
位置がずれる	親なしの2D、位置の次元分割なし、アンカーとシェイプ中心を揃えた状態で試す
seedを同じにしたのに別レイヤーと同じにならない	レイヤー固有の識別情報とプロパティも乱数に関係します。同じ数値だけで別レイヤーの見た目は保証されません
複製した後も1つずつ細かく置きたい	ランダム配置は下地づくりに向く。ロゴや文字を避ける厳密なレイアウトは、配置ルールを加えるか手で整える
ドット同士を重ねたくない	今回の式には衝突回避がありません。数やサイズを抑えるか、グリッドを基準にばらつかせる別の構成を使う

背景を素早く作りたい場面では、複製ごとに位置・大きさを手入力しなくて済むのが利点です。一方で、数個の図形を意図した場所へ置くなら手作業の方が早いこともあります。まずは24個程度で試し、粒の数と大きさを少しずつ調整してください。

randomとseedRandomの値・時刻の扱いは、Adobeのエクスプレッション言語リファレンスでも確認できます。動かし続ける揺れを作るwiggleとは役割を分けて使うと、狙った背景に整えやすくなります。

作例プロジェクトをダウンロード

ドットの複製デモ、タイトル背景、カードの散らし、seedと最大スケールの比較を収録。固定背景の位置・スケールにはキーを打たず、表示数やフェードだけを別のキーで演出しています。

項目	内容
版・容量	v1.0／87,797バイト（約86KiB）
内容	編集可能AEP、expressions.txt、はじめに.txt
制作環境	After Effects 26.5×89／JavaScript／1280×720／30fps
フォント	Hiragino Sans W6／Arial Bold。フォント本体は同梱していません
利用条件	学習・個人制作で利用と改変可。商用利用は個別相談

商用利用はお問い合わせページからご相談ください。ほかのコードと作例はAEエクスプレッション集へ。