After Effects「エクスプレッション」初級ガイド

// 各パーティクルの個性を設定
const radius = random(200, 800); // 螺旋の半径

👉このパーティクルの「螺旋の半径」をランダムに決定

• random(200, 800) = 200〜800の間のランダムな数値を1つ取得
• const radius = その値を「radius（半径）」という変数に格納
• 各パーティクルごとに異なる半径になる

視覚的イメージ:

• radius = 300 → 中心から近い位置で回転（小さな円）
• radius = 700 → 中心から遠い位置で回転（大きな円）

const speed = random(0.3, 1.5); // 回転速度

👉このパーティクルの「回転速度」をランダムに決定

• random(0.3, 1.5) = 0.3〜1.5の間のランダムな数値
• 数値が大きいほど速く回転、小さいほどゆっくり回転

const verticalSpeed = random(20, 80); // 上下移動速度

👉このパーティクルの「上下に揺れる速さ」をランダムに決定

• 後で Math.sin() と組み合わせて、上下の波打つ動きを作る
• 数値が大きいほど激しく上下に揺れる

const phase = random(0, Math.PI * 2); // 初期位相（開始角度）

👉このパーティクルの「開始位置（スタート地点の角度）」をランダムに決定

• Math.PI * 2 = 360度（円1周分）をラジアン単位で表現
• random(0, Math.PI * 2) = 0〜360度の間のランダムな角度
• これにより、各パーティクルが円周上の異なる位置からスタートする

視覚的イメージ:

• phase = 0 → 右側（3時の位置）からスタート
• phase = Math.PI / 2 → 上側（12時の位置）からスタート
• phase = Math.PI → 左側（9時の位置）からスタート

なぜ必要?

• これがないと、すべてのパーティクルが同じ位置から回転を始めてしまう
• ランダムにすることで円周上に均等に散らばる

const wobble = random(0.5, 2.0); // ふらつき具合

👉このパーティクルの「ふらつく速さ」をランダムに決定

• 後でこの値を使って、小刻みに揺れる動きを作る
• 数値が大きいほど速くふらつく

// 中心点
const centerX = thisComp.width / 2;
const centerY = thisComp.height / 2;

👉画面の中心位置を計算

• thisComp.width = コンポジションの幅（1280px）
• thisComp.height = コンポジションの高さ（720px）
• / 2 = それぞれを2で割る
• 「蛍」のように値を直接書く（ハードコーディング）よりも再利用しやすいコードになる

const centerZ = random(-500, 500); // Z軸方向のランダムな中心

👉各パーティクルの「奥行き方向の中心位置」をランダムに決定

• Z軸 = 奥行き（カメラに近い・遠い）
• random(-500, 500) = -500〜500の間のランダムな値
• マイナス値 = カメラに近い、プラス値 = カメラから遠い

視覚的イメージ:

• centerZ = -500 → 手前側で回転
• centerZ = 0 → 中央の奥行きで回転
• centerZ = 500 → 奥側で回転

効果:

• 各パーティクルが異なる奥行きで回転するため、立体的な空間が生まれる

// 時間経過による角度
const angle = time * speed + phase;

👉「今この瞬間、パーティクルが円周上のどの角度にいるか」を計算

• time = コンポジション開始からの経過時間（秒）
• time * speed = 時間 × 速度 = 現在の角度
  • 時間が経つほど角度が大きくなる = 回転する
• + phase = 初期角度を加える

具体例: あるパーティクルで speed = 1.0 、 phase = 0 の場合

• time = 0秒 → angle = 0
• time = 1秒 → angle = 1（約57度回転）
• time = 2秒 → angle = 2（約115度回転）
• time = 6.28秒 → angle = 6.28（ちょうど1周）

なぜこの式?

• 時間と速度を掛け算することで「継続的な回転」が実現する
• phaseを加えることで各パーティクルが異なる位置からスタートする

// 基本的な螺旋運動
const baseX = centerX + Math.cos(angle) * radius;

👉パーティクルのX座標（横位置）の基本値を計算

• Math.cos(angle) = 角度をコサイン関数に入れる → 円周上のX座標（横位置）が-1〜1で返る
• * radius = 半径を掛ける（円の大きさを決定）
• centerX + = 中心位置を基準にする

具体例: centerX = 960, radius = 400, angle = 0のとき

• Math.cos(0) = 1
• baseX = 960 + 1 × 400 = 1360（画面右側）

視覚的イメージ: 時間が経つと angle が増加 → cos の値が変化 → X座標が左右に動く → 円運動

const baseY = centerY + Math.sin(angle) * radius;

👉パーティクルのY座標（縦位置）の基本値を計算

• Math.sin(angle) = 角度をサイン関数に入れる → 円周上のY座標（縦位置）が-1〜1で返る
• 上記X成分と同様に円運動のY成分を計算

cos と sin の組み合わせ:

• cos(angle) がX座標を、 sin(angle) がY座標を決定
• この2つを組み合わせることで円運動が実現

const baseZ = centerZ + Math.sin(time * verticalSpeed * 0.01) * 300;

👉パーティクルのZ座標（奥行き）の基本値を計算し、上下に波打つ動きを加える

• time * verticalSpeed * 0.01 = 時間 × 速度 × 調整値
  • 時間が経つと値が増加していく
• Math.sin(...) = サイン関数に入れる
  • -1〜1の値が返ってくる（波のように上下）
• * 300 = 振幅（波の高さ）を300pxにする
• centerZ + = 中心位置を基準にする

なぜ 0.01 を掛ける?

• verticalSpeedは20〜80と大きな値なので、そのまま使うと波が速すぎる
• 0.01を掛けることで、ゆっくりした上下運動に

視覚的イメージ:

• 時間が経過 → sin の値が -1 → 0 → 1 → 0 → -1 と周期的に変化
• Z座標が前後に波打つように動く
• 螺旋のような3D的な動きが生まれる

このままでは円運動が完璧すぎますので、「不完全さ」を加えて有機的な動きにします。

// ふらつきを追加（有機的な動き）
const wobbleX = Math.sin(time * wobble) * 50;

👉X方向（横）の小刻みなふらつきを計算

• time * wobble
= 時間 × ふらつき速度
  • wobbleは各パーティクルで異なる（0.5〜2.0）
• Math.sin(...)
= -1〜1の周期的な値
• * 50
= 左右50pxの範囲でふらつく

効果:

• 基本の円運動に小さな揺れが加わる
• ロボットのような機械的な動きを避けられる

const wobbleY = Math.cos(time * wobble * 1.3) * 50;

👉Y方向（縦）の小刻みなふらつきを計算

• Math.cos
= サインではなくコサインを使用
  • XとYで異なる関数を使うことで、動きに多様性が出る
• * 1.3
= X方向とは異なる速度で揺らす
  • これにより、単純な円運動にならず、複雑な軌跡になる
• * 50
= 上下50pxの範囲でふらつく

なぜ 1.3 を掛ける?

• XとYの揺れの周期をわざとずらすため
• 同じ周期だと単純な斜めの動きになってしまう
• 異なる周期にすることで、予測不可能な動きになる

const wobbleZ = Math.sin(time * wobble * 0.7) * 100;

👉Z方向（奥行き）の小刻みなふらつきを計算

• * 0.7
= XやYとは異なる速度（さらに遅く）
• * 100
= 前後100pxの範囲でふらつく（XYより大きい振幅）

なぜZ方向は振幅が大きい?

• 奥行き方向の動きは視覚的に分かりにくいため
• 大きめの振幅にすることで3D感を強調

// 波のような大きな動き
const waveX = Math.sin(time * 0.5 + index * 0.1) * 150;

👉パーティクル全体が波のようにうねる動きを作成

• time * 0.5
= ゆっくりとした周期（wobbleより遅い）
• + index * 0.1
= レイヤー番号に応じて位相をずらす
  • レイヤー1: +0.1
  • レイヤー2: +0.2
  • レイヤー3: +0.3
• * 150
= 左右150pxの範囲で動く

効果:

• 各パーティクルが微妙に異なるタイミングで左右に動く
• 「波」が群れ全体を通過していくような表現
• 連続性のある動き

視覚的イメージ: レイヤー1が右に動き始めたとき、レイヤー2はまだ中央、レイヤー3は左にいる → 波のような連続した動きに見える

const waveY = Math.cos(time * 0.7 + index * 0.15) * 150;

👉Y方向（縦）の大きな波打つ動きを作成

• time * 0.7
= Xとは異なる速度（少し速い）
• + index * 0.15
= Xとは異なる位相差
• Math.cos
= Xとは異なる関数（多様性）

なぜXとYで速度を変える?

• 同じ速度だと斜めに動くだけになる
• 異なる速度にすることで、複雑な軌跡を描く

// 最終位置
const finalX = baseX + wobbleX + waveX;

👉すべての動きを合成して、最終的なX座標を決定

• baseX
= 基本の円運動（大きな動き）
• + wobbleX
= 小刻みなふらつき（中くらいの動き）
• + waveX
= 全体の波（大きな動き）
• これら3つを足し合わせる

重ね合わせの原理: 複数の動きを足し算することで、複雑な動きを生成可能

視覚的イメージ:

1. まず大きな円を描く（base）
2. その円の軌道上で小刻みに揺れる（wobble）
3. さらに全体が波のように動く（wave） → 予測不可能な美しい軌跡

const finalY = baseY + wobbleY + waveY;
const finalZ = baseZ + wobbleZ;

👉同様にすべての動きを合成して最終的なY、Z座標を決定

なぜwaveZがない?

• Z方向（奥行き）は、baseとwobbleだけで十分な3D感が出る
• waveを加えると動きが複雑すぎて分かりにくくなる可能性がある

[finalX, finalY, finalZ];

👉計算した3D座標を配列として返す

• 【x, y, z】
 = 3D位置を表す配列
• この値が「位置」プロパティに適用される
• After Effectsがこの座標にパーティクルを配置する

配列の意味:

• 0番目（finalX）= X座標（横）
• 1番目（finalY）= Y座標（縦）
• 2番目（finalZ）= Z座標（奥行き）

// 滑らかなパルス（正弦波）
const pulse = Math.sin(time * pulseSpeed + offset);

• time * pulseSpeed = 時間に速度を掛けて、連続的に増加する値を作る
• + offset = 各パーティクルの開始タイミングをずらす
• Math.sin(...) = -1〜1の範囲で周期的に変化する値を取得

const normalizedPulse = (pulse + 1) / 2; // 0-1の範囲に正規化

• pulse + 1 = -1〜1の範囲を 0〜2に変換
• / 2 = 0〜2を 0〜1に正規化

なぜ正規化（値の整形）が必要?

• Math.sin() の結果は-1〜1だが、不透明度の計算には0〜1の範囲が便利
• 後の計算で使いやすくするため

// 明るさの変化
const opacity = minOpacity + (maxOpacity - minOpacity) * normalizedPulse;

• (maxOpacity - minOpacity) = 明るさの変化幅を計算
  • 例: max=100, min=20 なら、変化幅=80
• * normalizedPulse = 0〜1の値を変化幅に掛ける
  • normalizedPulse=0 のとき → 変化量=0
  • normalizedPulse=1 のとき → 変化量=80
• minOpacity + = 最小値を基準に加算

計算例: minOpacity=20, maxOpacity=100, normalizedPulse=0.5 の場合

• 変化幅 = 100 - 20 = 80
• 変化量 = 80 × 0.5 = 40
• 最終的な不透明度 = 20 + 40 = 60

👉不透明度が minOpacity と maxOpacity の間を滑らかに行き来する

// カメラからの距離によるフェード（奥行き感）
const pos = thisLayer.transform.position;

• 位置エクスプレッションで計算された最終的な3D座標を取得

const distance = Math.abs(pos[2] - centerZ);

• pos【2】 = 現在のZ座標
  • 正の値 = カメラから遠い
  • 負の値 = カメラに近い
• Math.abs(...) = 絶対値を取得（マイナスをプラスに変換）
• どちら側に離れても距離として扱う

距離例:

• pos【2】 = -300 → distance = 300（カメラに近い）
• pos【2】 = 0 → distance = 0（基準位置）
• pos【2】 = 500 → distance = 500（カメラから遠い）

const distanceFade = Math.max(0, 1 - distance / 1000);

• distance / 1000 = 距離を1000で割って正規化
  • distance = 0 → 0 / 1000 = 0
  • distance = 500 → 500 / 1000 = 0.5
  • distance = 1000 → 1000 / 1000 = 1.0
• 1 - ... = 反転（近いほど大きく、遠いほど小さく）
  • distance = 0 → 1 - 0 = 1.0（最も明るい）
  • distance = 500 → 1 - 0.5 = 0.5（半分の明るさ）
  • distance = 1000 → 1 - 1.0 = 0（消える）
• Math.max(0, ...) = 負の値を0にクランプ
  • 数値が0未満であれば0に置き換え、0以上であれば元の値のままにする
  • distance > 1000 の場合も0を維持

なぜ 1000 で割る?

• 1000px以上離れたパーティクルを完全に消すため
• この値を変えることでフェードの範囲を調整可能
  • 小さくする（例: 500）→ 早く消える
  • 大きくする（例: 2000）→ 遠くまで見える

opacity * distanceFade;

• パルス効果で計算した不透明度に距離フェード係数を掛ける
• 掛け算なので、どちらかが0なら結果も0

計算例: opacity=80, pos[2]=600 の場合

• distance = 600
• distanceFade = 1 - 600/1000 = 0.4
• 最終不透明度 = 80 × 0.4 = 32

結果:

• 基準位置（Z=0）付近のパーティクルは本来の明るさで光る
• 遠ざかるほど暗くなり、1000px以上離れると完全に消える
• これにより、3D空間の奥行き感が強調される

明滅を激しくする

• pulseSpeed の範囲を大きく（例: 2〜8）

明滅を穏やかにする

• pulseSpeed の範囲を小さく（例: 0.5〜2）

常に明るいパーティクルを増やす

• minOpacity を大きく（例: 50〜70）
• maxOpacity も大きく（例: 80〜100）

// カメラに近いほど大きく、遠いほど小さく
const scale = baseScale * (perspective / (perspective - pos[2]));

👉Z座標に基づいて遠近法に従ったスケール値を計算

遠近法の式

scale = baseScale × (perspective ÷ (perspective - Z座標))

この式は、実世界のカメラの遠近法を数学的にシミュレートしています。

式の各要素:

1. perspective - pos【2】   = カメラとオブジェクトの「有効距離」
   • -500（カメラに近い）→ 1000 - (-500) = 1500
   • 0（基準位置）→ 1000 - 0 = 1000
   • 500（カメラから遠い）→ 1000 - 500 = 500
2. perspective / (perspective - pos【2】) = スケール係数
   • 有効距離が大きい → 係数が小さい → 縮小
   • 有効距離が小さい → 係数が大きい → 拡大
3. baseScale * = 基本サイズに係数を掛ける

// パルスによる微細な拡大縮小
const pulseAmount = Math.sin(time * 3) * 0.1 + 1;
[scale * pulseAmount, scale * pulseAmount];

👉遠近法による基本スケールに、時間経過による微細な拡大縮小を加える

pulseAmount の計算

• time * 3 = 時間を3倍速で増加
  • 比較的速いペースでパルスが変化
  • 3 は速度調整値（大きいほど速く脈打つ）
• Math.sin(time * 3) = -1〜1の範囲で周期的に変化
  • time = 0 → sin = 0
  • 時間経過で -1 → 0 → 1 → 0 → -1 と繰り返す
• * 0.1 = 振幅を0.1に制限
  • -0.1 〜 0.1 の範囲に変換
  • 小さな値なので微細な変化になる
• + 1 = 基準値を1.0にする
  • 0.9 〜 1.1 の範囲に変換
  • 1.0 = 元のサイズ
  • 0.9 = 10%縮小
  • 1.1 = 10%拡大

pulseAmount の変化例:

• time = 0秒 → sin(0) = 0 → pulseAmount = 0×0.1 + 1 = 1.0
• time = 0.26秒 → sin(0.78) ≈ 0.7 → pulseAmount ≈ 1.07
• time = 0.52秒 → sin(1.57) ≈ 1.0 → pulseAmount = 1.1
• time = 1.05秒 → sin(3.14) ≈ 0 → pulseAmount = 1.0

最終スケールの適用

[scale * pulseAmount, scale * pulseAmount];

• scale * pulseAmount = 遠近法スケール × パルス係数
• 配列【 X, Y 】として返す（X方向とY方向に同じスケールを適用）
• Z方向のスケールは指定しない（2D形状のため）

計算例:

遠近法で scale = 150 の場合

• pulseAmount = 0.9 → 最終スケール = 150 × 0.9 = 135
• pulseAmount = 1.0 → 最終スケール = 150 × 1.0 = 150
• pulseAmount = 1.1 → 最終スケール = 150 × 1.1 = 165

結果: 基本サイズ（150）を中心に、135〜165の範囲でゆっくりと拡大縮小を繰り返す

視覚的効果:

• 完全に静止したサイズだと「貼り付けた画像」のように見える
• 微細な拡大縮小により、「呼吸している」印象を与える
• 不透明度のパルスと組み合わさり、より有機的な表現になる

パルスの特徴:

• すべてのパーティクルが同じタイミングで拡大縮小
• 不透明度と異なり、 seedRandom() を使わない
• 全体が統一的に「呼吸」することで、群れとしての一体感が生まれる