Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 86

AfterEffects〈雰囲気〉数理モデル表現学概論

3

Share

Download to read offline

2018/6/30開催 AEオフ2018での発表資料です。
AEオフ2018: https://atnd.org/events/97664

スライドで用いられるaep(CC13以上)およびpdf版は、以下のURLよりダウンロードいただけます。
http://bit.ly/2A40Zbd

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

AfterEffects〈雰囲気〉数理モデル表現学概論

  1. 1. AfterEffects 〈雰囲気〉数理モデル表現学概論 eau. 2018/6/30 AEオフ2018 niconico: mylist/28276645 twitter: @silencieuse
  2. 2. © 2018 eau. / La Mer Artworks お前は誰だ 1 eau. niconico: mylist/28276645 Twitter: @silencieuse ‘06/6 ’12/6 • Music Videoをバリバリ作ってた時代もあった. • 最近は企業で人工知能に画像や映像を生成させる 研究をしています. 「ice」 whoo (‘11/9) 「深海のリトルクライ」 feat. 土岐麻子 sasakure.UK (‘12/3) 「idと人類模型」 feat. lasah sasakure.UK (‘14/2) 「月に照らされ、 風に揺れる華」 華風月 (‘17/4) Flash・動画板@2ch でMotion Graphics制作 ボカロMVをはじめとした 商用MVをバリバリ制作 VR/AR系 研究室 :光学シースルー型 HMDに関する 某企業 研究職 主な作品 / 敬称略
  3. 3. © 2018 eau. / La Mer Artworks ところでみなさん 2 映像,作ってますか? 映像制作はいいぞ.なぜか? 映像の再生中は観る側を自分の世界に引き込めるからな. 「Pursing My True Self (Shinichi Osawa Remix)」 ペルソナ4 ダンシング・オールナイト (‘15/4)
  4. 4. © 2018 eau. / La Mer Artworks 映像制作=「新しい世界を作る」 3 己のvirtualな世界を,レイヤーとタイムラインでモデリング ➢ オブジェクト・配置・モーション・カメラ……すべては制作者の所存
  5. 5. © 2018 eau. / La Mer Artworks 世界には,それに従う法則がある 4 制作者は,基本的に直感で現実と同じ物理法則を決める. たまに物理法則を逸脱すると「気持ちいい」(=非現実の快感) v.s. REAL VIRTUAL
  6. 6. © 2018 eau. / La Mer Artworks 世界の法則をうまく表現するには 5 先人たちは,さまざまな法則を数式で表してきた. ➢ 数式で法則を一般化して表現する=「数理モデル化」 𝐹 = 𝑚𝑎 一般化 (帰納) 数理モデル 運動 B A D C …
  7. 7. © 2018 eau. / La Mer Artworks 数式で表現できると何が嬉しいの? 6 再現・量産・改造を,効率的に一括で行える. 例) あらゆる「物体が動く」が1個の式で書けたら…… ➢「力」や「物の重さ」を入力するだけで大量の物体を動かせる. 𝐹 = 𝑚𝑎 具体化 (演繹) 数理モデル 運動 B A D C …
  8. 8. © 2018 eau. / La Mer Artworks AEのプリセットとモデル 7 AEのエフェクトやプリセットもある種の「数理モデル」の集合 ➢ 物体に対する「動きや効果」をパッケージングして使いやすくしている. 具体化 (演繹) +
  9. 9. © 2018 eau. / La Mer Artworks 本講義の目的 8 オブジェクトの配置やモーションの背後に潜む「数理モデル」 をふわっと理解する. 1. 配置やモーションを決める際に,その解釈や意味づけを より正確に行える. 2. エクスプレッションにモデルを組み込むことにより, 効率よく一括で制御を行える. なんで?
  10. 10. © 2018 eau. / La Mer Artworks 本講義の内容 9 1. 速度グラフと物体にかかる力 [9分] 2. 振動する物体 [3分] 3. 複数の物体を規則的に配置する [6分] 4. 複数の物体を決めた法則に従い動かす [3分] 単一物体制御論 複数物体制御論 はじめに [イマココ,3分] おわりに [1分]
  11. 11. AfterEffects 〈雰囲気〉数理モデル表現学概論 • 数式はたまに出てきますが,飾りなので 気にしなくていいです(参考資料です) • エクスプレッションは, まずコードを写しましょう. • 大切なのは雰囲気!イメージ!!
  12. 12. © 2018 eau. / La Mer Artworks 本講義の内容 11 1. 速度グラフと物体にかかる力 ⚫ 値・速度グラフ,加速度 ⚫ 運動方程式,さまざまな力の表現(摩擦力,空気抵抗,引力,斥力) ⚫ イージーイーズ,シグモイド関数 ⚫ 実例 2. 振動する物体 3. 複数の物体を規則的に配置する 4. 複数の物体を決めた法則に従い動かす 単一物体制御論 複数物体制御論 はじめに おわりに
  13. 13. © 2018 eau. / La Mer Artworks 例: イージーイーズイン 12 シュッと動くモーションさせたい…イージーイーズイン使うか. あ^~~気持ちいいんじゃ^^~~~ 等速運動 イージー イーズイン 操作: キーフレームを右クリック > キーフレーム補助 > イージーイーズイン .aep:_Chapter_01/1-1/A_LinearMotion .aep:_Chapter_01/1-1/B_EasyEaseIn
  14. 14. © 2018 eau. / La Mer Artworks イージーイーズイン 13 いい感じにしてくれるのはわかるんだけど, 何やってるんだろう……速度グラフでも見てみるか. 操作: グラフエディタボタンをクリック 速度 時間
  15. 15. © 2018 eau. / La Mer Artworks 値グラフ,速度グラフ 14 各フレームにおけるプロパティの値・速度を決めるグラフ ➢ 速度グラフには更に大事な情報が隠されている! 速度グラフ 値グラフ (位置)
  16. 16. © 2018 eau. / La Mer Artworks 加速度=速度グラフの接線の傾き 15 各点で接線をひいたときの傾きの大きさで,物体がどれほど 加速しているかわかる. • 傾きが左上がり=「物体が加速している」 • 傾きが水平 =「物体は等速で進む」 • 傾きが右下がり=「物体が減速している」 加速 等速 減速 緩 急 緩 緩 急 緩
  17. 17. © 2018 eau. / La Mer Artworks 加速度 16 物体が動力を持つと仮定すると,アクセル・ブレーキに相当 アクセルを 踏む ふんわり 離す 等速 徐々に ブレーキ ちょっと 踏み込む ふんわり 離す .aep:_Chapter_01/1-1/C_AccelBrake
  18. 18. © 2018 eau. / La Mer Artworks 運動方程式 17 • 傾きが左上がり=「加速」=「動きと同じ向きに力が働く」 • 傾きが水平 =「等速」=「力は働いていない」 • 傾きが右下がり=「減速」=「動きと逆向きに力が働く」 𝐹 = 𝑚𝑎 加速度は,物体にかかる力に比例 ➢ 加速度で,「物体にかかる力」を表現できる. 引っ張られ続ける~~~ 平和…… なんか抵抗で進みづらい~~~
  19. 19. © 2018 eau. / La Mer Artworks 等速で動かす 18 物体に何も力が働かないなら,等速で動く. ➢ 氷の上をビー玉が滑るかのようなイメージ 瞬間的に 力が働く あとはそのまま 滑るだけ .aep:_Chapter_01/1-1/A_LinearMotion
  20. 20. © 2018 eau. / La Mer Artworks 摩擦力を加える 19 摩擦力は,動く方向と逆向きで一定に 働く. ➢ 速度グラフは,一定の傾きを保って 減速する. 進行方向 常に同じ傾き 𝐹 = 𝜇𝑁 摩擦力
  21. 21. © 2018 eau. / La Mer Artworks 摩擦力を加える 20 進行方向 常に同じ傾き 𝐹 = 𝜇𝑁 摩擦力 上:等速運動 下:摩擦力あり .aep:_Chapter_01/1-1/A_LinearMotion .aep:_Chapter_01/1-1/D_Friction
  22. 22. © 2018 eau. / La Mer Artworks 空気抵抗を加える 21 空気抵抗は,動く方向と逆向きに, 速さに比例して働く.(という近似) ➢ 物体が速く動いている時ほど, 大きく減速する速度グラフ ➢ 経験的に,強めにかけると「気持ちいい」 進行方向 高速移動 → 傾き大 低速移動 → 傾き小 一定の傾きに収束 → 摩擦のみ 𝐹 = 𝑘𝑣 摩擦力 空気抵抗
  23. 23. © 2018 eau. / La Mer Artworks 空気抵抗を加える 22 進行方向 高速移動 → 傾き大 低速移動 → 傾き小 𝐹 = 𝑘𝑣 摩擦力 空気抵抗 上:摩擦力のみ 下:摩擦力+空気抵抗 一定の傾きに収束 → 摩擦のみ .aep:_Chapter_01/1-1/D_Friction .aep:_Chapter_01/1-1/E_Resistance
  24. 24. © 2018 eau. / La Mer Artworks 現実の力学 v.s. イージーイーズイン 23 現実とは何かちょっと違う……が気持ちいい. これがバーチャル物理ワールドなんだよなあ. ➢ もうちょっと「仮想的な力」を深掘りして想像してみる. v.s. REAL VIRTUAL .aep:_Chapter_01/1-1/E_Resistance .aep:_Chapter_01/1-1/B_EasyEaseIn
  25. 25. © 2018 eau. / La Mer Artworks 引力 24 引力は,物体間の距離が近いほど 急激に大きく引き寄せられる. ➢ 速度グラフは,引き寄せられる方向 へと徐々に加速する. 最初は じわじわ 最後の上がり幅は 盛る!! 𝐹 = 𝑘 𝑞1 𝑞2 𝑟2
  26. 26. © 2018 eau. / La Mer Artworks 引力 25 最初は じわじわ 最後の上がり幅は 盛る!! N S 𝐹 = 𝑘 𝑞1 𝑞2 𝑟2 .aep:_Chapter_01/1-1/F_Attractive
  27. 27. © 2018 eau. / La Mer Artworks 斥力/反発力=引力の逆 26 斥力は,物体間の距離が近いほど 大きく反発する. ➢ 速度グラフは,反発する方向へと 急峻に傾き,徐々に緩くなる. ➢ 摩擦や空気抵抗と組み合わせるとそれっぽい. 斥力で 一気に反発 摩擦力と斥力が つりあう 摩擦力で 一定の傾きに減速 𝐹 = −𝑘 𝑞1 𝑞2 𝑟2
  28. 28. © 2018 eau. / La Mer Artworks 斥力/反発力+摩擦 27 斥力で 一気に反発 摩擦力と斥力が つりあう 摩擦力で 一定の傾きに減速 N S 𝐹 = −𝑘 𝑞1 𝑞2 𝑟2 .aep:_Chapter_01/1-1/G_Repulsive
  29. 29. © 2018 eau. / La Mer Artworks イージーイーズインの「解釈」 28 イージーイーズインも似たような形をしている. ➢ このバーチャル世界では,始点に反発する磁石がある法則 斥力で やや反発 摩擦力と斥力が つりあう 摩擦力で 一定の傾きに減速 VIRTUAL N S c.f.) 斥力+摩擦 イージーイーズイン
  30. 30. © 2018 eau. / La Mer Artworks イージーイーズイン応用 29 S S N S イージー イーズイン =斥力+摩擦 斥力+引力 斥力+摩擦 +空気抵抗 イージーイーズインに引力や空気抵抗の効果を加える. .aep:_Chapter_01/1-2/A_EasyEaseIn_vanilla .aep:_Chapter_01/1-2/B_EasyEaseIn_attractive .aep:_Chapter_01/1-2/C_EasyEaseIn_with_resistance
  31. 31. © 2018 eau. / La Mer Artworks イージーイーズ 30 人間の自然な制御に比べて,ややハードランディング 最初から アクセル がん踏み 最後も ブレーキ がん踏み .aep:_Chapter_01/1-3/A_EasyEase_vanilla
  32. 32. © 2018 eau. / La Mer Artworks より現実的なイージーイーズ 31 始点と終点は加速度をゼロに近づけたほうが,現実に即する. さらに,メリハリがついて気持ちいい. ➢ ふんわりとアクセル・ブレーキを踏むイメージ バニラ イージー イーズ 修正後 イージー イーズ 徐々に 加速 アクセルを離し, ブレーキを踏み始める ブレーキを ゆっくり離す .aep:_Chapter_01/1-3/A_EasyEase_vanilla .aep:_Chapter_01/1-3/B_EasyEase_modified
  33. 33. © 2018 eau. / La Mer Artworks 現実的なイージーイーズのモデル 32 現実的なイージーイーズは, シグモイド関数と呼ばれる関数 に形が似ている. ➢ エクスプレッションで実装してみる. d𝜎 𝑡 d𝑡 = 𝑎𝑒−𝑎𝑡 1 + 𝑒−𝑎𝑡 2 = 𝑎𝜎(𝑡)(1 − 𝜎(𝑡)) 位置: 速度=位置の1階時間微分: 𝜎(𝑡) = 1 1 + 𝑒−𝑎𝑡 ≈ 𝜎(𝑡) = 1 1 + 𝑒−𝑎𝑡 ≈ d𝜎 𝑡 d𝑡 = 𝑎𝑒−𝑎𝑡 1 + 𝑒−𝑎𝑡 2 AE上の グラフ イメージ シグモイド 関数の グラフ シグモイド関数 値グラフ(位置) 速度グラフ(位置の1階時間微分)
  34. 34. © 2018 eau. / La Mer Artworks (参考) エクスプレッションについて 33 プロパティをスクリプトで制御することができる. 詳細は以下の過去資料を参照 https://vimeo.com/59285177
  35. 35. © 2018 eau. / La Mer Artworks (参考) スライダー制御エフェクトについて 34 エクスプレッション内のパラメータを制御することができる. 詳細は以下の過去資料を参照 https://vimeo.com/98264395
  36. 36. © 2018 eau. / La Mer Artworks (参考) シグモイド関数のエクスプレッション 35 // 動きの激しさを決める変数 var a = 5.0 // デュレーションは-2.0~2.0の範囲を取るように正規化 // 今回はstart:0s, end:2sの2秒間のモーション var start_time = 0.0 var end_time = 2.0 var t = (time – start) * (2.0 – (-2.0)) / (end_time - start_time) – 2.0 // シグモイド関数本体:0.0~1.0の範囲をとる var sigmoid = 1.0 / (1.0 + Math.exp(-a * t)) // 移動したい距離分(ここではx方向に1000)だけsigmoidに掛け算 var dist_x = 1000.0 var x = dist_x * sigmoid content("楕円形 1").transform.position + [x, 0] 太字のところだけ注目.あとは深く考えずにコピペしましょう. ➢ 時間の都合で詳しくは説明しません.雰囲気だけ. この範囲だけ 使う 𝜎(𝑡) = 1 1 + 𝑒−𝑎𝑡 この式を 書き下しているだけ
  37. 37. © 2018 eau. / La Mer Artworks (参考) シグモイド関数のエクスプレッション 36 // 動きの激しさを決める変数 var a = 5.0 // デュレーションは-2.0~2.0の範囲を取るように正規化 // 今回はstart:0s, end:2sの2秒間のモーション var start_time = 0.0 var end_time = 2.0 var t = (time – start) * (2.0 – (-2.0)) / (end_time - start_time) – 2.0 // シグモイド関数本体:0.0~1.0の範囲をとる var sigmoid = 1.0 / (1.0 + Math.exp(-a * t)) // 移動したい距離分(ここではx方向に1000)だけsigmoidに掛け算 var dist_x = 1000.0 var x = dist_x * sigmoid content("楕円形 1").transform.position + [x, 0] 太字のところだけ注目.あとは深く考えずにコピペしましょう. ➢ 時間の都合で詳しくは説明しません.雰囲気だけ. この範囲だけ 使う 𝜎(𝑡) = 1 1 + 𝑒−𝑎𝑡 この式を 書き下しているだけ 公開資料版で改良しました. APPENDIX参照
  38. 38. © 2018 eau. / La Mer Artworks シグモイド関数:加減速のパラメータa 37 𝜎(𝑡) = 1 1 + 𝑒−𝑎𝑡 係数a(≧0)を大きくするほど 急激な加減速を行う. a=3 a=6 a=9 a=12 a=15 速度グラフ v=σ’(t) .aep:_Chapter_01/1-4
  39. 39. © 2018 eau. / La Mer Artworks 本講義の内容 38 1. 速度グラフと物体にかかる力 2. 振動する物体 ⚫ 単振動,減衰振動,オリジナル振動 3. 複数の物体を規則的に配置する 4. 複数の物体を決めた法則に従い動かす 単一物体制御論 複数物体制御論 はじめに おわりに
  40. 40. © 2018 eau. / La Mer Artworks 単振動 ある点を基準に,そこからの距離に比例 して力がかかる. ➢ 中心を行ったり来たりする動き(振動) ➢ 周期的な運動:ばね,振り子,ブランコ 等 𝑥 = 𝐴 sin(𝜔𝑡 + 𝜙) 位置: 値グラフ (位置) : 三角関数 .aep:_Chapter_02/2-1/A_simple_harmonic
  41. 41. © 2018 eau. / La Mer Artworks (参考) 単振動のエクスプレッション 40 // 揺れ幅を決める (振幅) var ampl = 500 // 動く速度を決める (周波数) var omega = 2.0 // 始点をどこからにするか決める (位相) var phase = 0.3 content("楕円形 1").transform.position + [ampl * Math.sin(omega*time+phase), 0] 太字のところだけ注目.あとは深く考えずにコピペしましょう. ➢ 時間の都合で詳しくは説明しません.雰囲気だけ. 𝑥 = 𝐴 sin(𝜔𝑡 + 𝜙) .aep:_Chapter_02/2-1/A_simple_harmonic
  42. 42. © 2018 eau. / La Mer Artworks 実例:単振動と浮力 41 水に浮かぶ物体を指で押し込んで離した後の動きは, (空気抵抗がなければ)単振動に従うことが知られている. 重力:一定 浮力:沈んでいる部分の体積に比例する 物体にかかる力の合計
  43. 43. © 2018 eau. / La Mer Artworks 実例:単振動と浮力 42 水に浮かぶ物体(舟)から撮るカメラのy座標に 単振動を仕込むとリアリティが出る. 物体にかかる力の合計 「river」 PENGUINS PROJECT (‘13/4) .aep:_Chapter_02/2-2
  44. 44. © 2018 eau. / La Mer Artworks 減衰振動 43 𝑥 = 𝐴𝒆−𝜸𝒕 sin(𝜔𝑡 + 𝜙) 位置: 単振動は永遠に止まらない設定 ➢ 現実には,空気抵抗によって徐々に減衰し, やがて止まる(=減衰振動). ➢ 単振動の振れ幅を徐々に0に近づける. 進行方向 進行方向 空気抵抗による 減衰値グラフ (位置) .aep:_Chapter_02/2-1/B_damped_oscillation
  45. 45. © 2018 eau. / La Mer Artworks 減衰振動 44 𝑥 = 𝐴𝒆−𝜸𝒕 sin(𝜔𝑡 + 𝜙) 位置: 空気抵抗による 減衰値グラフ (位置) 単振動 減衰振動 最初に急激な力が加わっている場合に リアリティが増す. .aep:_Chapter_02/2-3/
  46. 46. © 2018 eau. / La Mer Artworks (参考) 減衰振動のエクスプレッション 45 // 揺れ幅を決める (振幅) var ampl = 500 // 動く速度を決める (周波数) var omega = 2.0 // 始点をどこからにするか決める (位相) var phase = 0.3 // 減衰の大きさを決めるパラメータ var gamma = 0.8 content("楕円形 1").transform.position + [ampl * Math.exp(-gamma*time) * Math.sin(omega*time+phase), 0] 減衰を表現する項を掛け算するだけ. ➢ 時間の都合で詳しくは説明しません.雰囲気だけ. 𝑥 = 𝐴𝑒−𝛾𝑡 sin(𝜔𝑡 + 𝜙) ここが追加 されただけ .aep:_Chapter_02/2-1/B_damped_oscillation
  47. 47. © 2018 eau. / La Mer Artworks オリジナル振動を作る 46 𝑥 = 𝐴𝒇(𝒕) sin(𝜔𝑡 + 𝜙) 位置: 単振動に別のグラフを掛け算すると, オリジナル振動を定義できる. ➢ 掛けるグラフはスライダーで制御 単振動 オリジナル振動 × × × = = = 好みの値グラフ 𝑓(𝑡) 𝑓(𝑡) : 数学では 包絡線と 呼ばれる
  48. 48. © 2018 eau. / La Mer Artworks オリジナル振動 47 𝑥 = 𝐴𝒇(𝒕) sin(𝜔𝑡 + 𝜙) 位置: 単振動に別のグラフを掛け算すると, オリジナル振動を定義できる. ➢ 掛けるグラフはスライダーで制御 オリジナル振動 .aep:_Chapter_02/2-4/
  49. 49. © 2018 eau. / La Mer Artworks 疲れたあなたに 48 NewtonやAEオフ謹製KeyframeMasterを買うのも大いに アリだぞ! ➢ ただ,裏で何が起こっているか知ると,狙った効果を一発で出せる (本講義の目的).
  50. 50. © 2018 eau. / La Mer Artworks 本講義の内容 49 1. 速度グラフと物体にかかる力 2. 振動する物体 3. 複数の物体を規則的に配置する ⚫ 円,螺旋 ⚫ さまざまな関数と図形 4. 複数の物体を決めた法則に従い動かす 単一物体制御論 複数物体制御論 はじめに おわりに
  51. 51. © 2018 eau. / La Mer Artworks 円状に物体を配置 50 半径𝑟 角度𝜃 ቊ 𝑥 = 𝑟 cos 𝜃 𝑦 = 𝑟 sin 𝜃 半径と角度を決めれば,左式より円状に 物体を配置できる. ➢ 今回はレイヤー番号を使い,角度を等間隔に分割 var center = [960, 540] // 円の中心 var r = 500 // 円の半径 // 各物体の角度 (ここではレイヤー番号=indexを指定) var theta = index / Math.PI transform.position = center + r * [Math.cos(theta), Math.sin(theta)] ቊ 𝑥 = 𝑟 cos 𝜃 𝑦 = 𝑟 sin 𝜃 .aep:_Chapter_03/3-1/
  52. 52. © 2018 eau. / La Mer Artworks 複数の物体を並べる際のコツ 51 半径𝑟 角度𝜃 ቊ 𝑥 = 𝑟 cos 𝜃 𝑦 = 𝑟 sin 𝜃 配置全てをコントロールするヌルレイヤー を用意する. ➢ 全物体に共通のパラメータ (円ならば半径,中心)を紐付ける. var center = [960, 540] // 円の中心 var r = 500 // 円の半径 // 各物体の角度 (ここではレイヤー番号=indexを指定) var theta = index / Math.PI transform.position = center + r * [Math.cos(theta), Math.sin(theta)]
  53. 53. © 2018 eau. / La Mer Artworks ヌルレイヤーで制御する:位置 52 半径𝑟 角度𝜃 ቊ 𝑥 = 𝑟 cos 𝜃 𝑦 = 𝑟 sin 𝜃 円の中心をヌルレイヤーの位置に紐づける. // 円の中心 var center = thisComp.layer("circle_controller").transform.position var r = 500 // 円の半径 // 各物体の角度 (ここではレイヤー番号=indexを指定) var theta = index / Math.PI transform.position = center + r * [Math.cos(theta), Math.sin(theta)]
  54. 54. © 2018 eau. / La Mer Artworks ヌルレイヤーで制御する:位置 53 半径𝑟 角度𝜃 ቊ 𝑥 = 𝑟 cos 𝜃 𝑦 = 𝑟 sin 𝜃 円の中心をヌルレイヤーの位置に紐づける. // 円の中心 var center = thisComp.layer("circle_controller").transform.position var r = 500 // 円の半径 // 各物体の角度 (ここではレイヤー番号=indexを指定) var theta = index / Math.PI transform.position = center + r * [Math.cos(theta), Math.sin(theta)]
  55. 55. © 2018 eau. / La Mer Artworks ヌルレイヤーで制御する:位置 54 半径𝑟 角度𝜃 ቊ 𝑥 = 𝑟 cos 𝜃 𝑦 = 𝑟 sin 𝜃 ヌルレイヤーの位置に応じて中心が動く. // 円の中心 var center = thisComp.layer("circle_controller").transform.position var r = 500 // 円の半径 // 各物体の角度 (ここではレイヤー番号=indexを指定) var theta = index / Math.PI transform.position = center + r * [Math.cos(theta), Math.sin(theta)] .aep:_Chapter_03/3-1/
  56. 56. © 2018 eau. / La Mer Artworks ヌルレイヤーで制御する:半径 55 半径𝑟 角度𝜃 ቊ 𝑥 = 𝑟 cos 𝜃 𝑦 = 𝑟 sin 𝜃 ヌルレイヤーにスライダーを用意し, 半径に紐づける. // 円の中心 var center = thisComp.layer("circle_controller").transform.position // 円の半径 var r = thisComp.layer("circle_controller").effect("radius")("スライダー") // 各物体の角度 (ここではレイヤー番号=indexを指定) var theta = index / Math.PI transform.position = center + r * [Math.cos(theta), Math.sin(theta)]
  57. 57. © 2018 eau. / La Mer Artworks ヌルレイヤーで制御する:半径 56 半径𝑟 角度𝜃 ቊ 𝑥 = 𝑟 cos 𝜃 𝑦 = 𝑟 sin 𝜃 ヌルレイヤーのスライダーに応じて 半径が変化する. // 円の中心 var center = thisComp.layer("circle_controller").transform.position // 円の半径 var r = thisComp.layer("circle_controller").effect("radius")("スライダー") // 各物体の角度 (ここではレイヤー番号=indexを指定) var theta = index / Math.PI transform.position = center + r * [Math.cos(theta), Math.sin(theta)] .aep:_Chapter_03/3-1/
  58. 58. © 2018 eau. / La Mer Artworks ヌルレイヤーで制御する:角度 57 半径𝑟 角度𝜃 ቊ 𝑥 = 𝑟 cos 𝜃 𝑦 = 𝑟 sin 𝜃 各物体の角度をまとめて制御するための スライダーもヌルレイヤーに追加 ➢ 物体の角度に掛け合わせる. // 円の中心 var center = thisComp.layer("circle_controller").transform.position // 円の半径 var r = thisComp.layer("circle_controller").effect("radius")("スライダー") // 各物体の角度 (ここではレイヤー番号=indexを指定) var theta = index / Math.PI * thisComp.layer("circle_controller").effect("rotateEasing")("スライダー") transform.position = center + r * [Math.cos(theta), Math.sin(theta)]
  59. 59. © 2018 eau. / La Mer Artworks ヌルレイヤーで制御する:角度 58 半径𝑟 角度𝜃 ቊ 𝑥 = 𝑟 cos 𝜃 𝑦 = 𝑟 sin 𝜃 物体の角度の動きを スライダーで効率的に一括制御できる. // 円の中心 var center = thisComp.layer("circle_controller").transform.position // 円の半径 var r = thisComp.layer("circle_controller").effect("radius")("スライダー") // 各物体の角度 (ここではレイヤー番号=indexを指定) var theta = index / Math.PI * thisComp.layer("circle_controller").effect("rotateEasing")("スライダー") transform.position = center + r * [Math.cos(theta), Math.sin(theta)] .aep:_Chapter_03/3-2/
  60. 60. © 2018 eau. / La Mer Artworks ヌルレイヤーで制御する:組み合わせ 59 半径𝑟 角度𝜃 ቊ 𝑥 = 𝑟 cos 𝜃 𝑦 = 𝑟 sin 𝜃 物体の半径に減衰振動を適用した例 // 円の中心 var center = thisComp.layer("circle_controller").transform.position // 円の半径 var r = thisComp.layer("circle_controller").effect("radius")("スライダー") // 各物体の角度 (ここではレイヤー番号=indexを指定) var theta = index / Math.PI * thisComp.layer("circle_controller").effect("rotateEasing")("スライダー") transform.position = center + r * [Math.cos(theta), Math.sin(theta)] .aep:_Chapter_03/3-3/
  61. 61. © 2018 eau. / La Mer Artworks 螺旋状に物体を配置 60 円を3Dレイヤーに拡張 z方向に等間隔に配置すれば螺旋になる. var r = thisComp.layer("cylinder_controller").effect("radius")("スライダー") var center = thisComp.layer("cylinder_controller").transform.position // 物体配置の間隔 var interval = index * 5 var theta = index / Math.PI * thisComp.layer("cylinder_controller").effect("rotateEasing")("スライダー") transform.position = center + [r * Math.cos(theta),r * Math.sin(theta), interval] .aep:_Chapter_03/3-4/ 間隔𝑑
  62. 62. © 2018 eau. / La Mer Artworks 螺旋状に物体を配置:間隔 61 全体を制御できるパラメータは どんどんスライダー制御にまとめる. var r = thisComp.layer("cylinder_controller").effect("radius")("スライダー") var center = thisComp.layer("cylinder_controller").transform.position // 物体配置の間隔 var interval = index * thisComp.layer("cylinder_controller").effect("rotateEasing")("スライダー") var theta = index / Math.PI * thisComp.layer("cylinder_controller").effect("rotateEasing")("スライダー") transform.position = center + [r * Math.cos(theta),r * Math.sin(theta), interval] 間隔𝑑
  63. 63. © 2018 eau. / La Mer Artworks 螺旋状に物体を配置:間隔 62 間隔に減衰振動を適用した例 var r = thisComp.layer("cylinder_controller").effect("radius")("スライダー") var center = thisComp.layer("cylinder_controller").transform.position // 物体配置の間隔 var interval = index * thisComp.layer(“cylinder_controller").effect("rotateEasing")("スライダー") var theta = index / Math.PI * thisComp.layer("cylinder_controller").effect("rotateEasing")("スライダー") transform.position = center + [r * Math.cos(theta),r * Math.sin(theta), interval] .aep:_Chapter_03/3-5/ 間隔𝑑
  64. 64. © 2018 eau. / La Mer Artworks 世の中には様々な図形がある 63 図形を数式で表現できれば,AE上でその形状に配置できる. ➢ 数式の中身は踏み込まず,書かれた通りにエクスプレッション化 正葉曲線 リサージュ曲線 内サイクロイド 𝑟 = sin 𝑛 𝑑 𝜃 ቊ 𝑥 = 𝐴 sin(𝑎𝜃 + 𝛿) 𝑦 = 𝐵 sin(𝑏𝜃) 𝑥 = 𝑟𝑐 − 𝑟 𝑚 cos 𝜃 + 𝑟 𝑚cos( 𝑟𝑐 − 𝑟 𝑚 𝑟 𝑚 𝜃) 𝑦 = 𝑟𝑐 − 𝑟 𝑚 sin 𝜃 − 𝑟 𝑚sin( 𝑟𝑐 − 𝑟 𝑚 𝑟 𝑚 𝜃)
  65. 65. © 2018 eau. / La Mer Artworks 様々な図形をエクスプレションで実装 64 aepを参考資料で配布する予定 ➢ ぜひいろいろ遊んでみてください. 正葉曲線 リサージュ曲線 内サイクロイド .aep:_Chapter_03/3-6/ .aep:_Chapter_03/3-7/ .aep:_Chapter_03/3-8/
  66. 66. © 2018 eau. / La Mer Artworks 本講義の内容 65 1. 速度グラフと物体にかかる力 2. 振動する物体 3. 複数の物体を規則的に配置する 4. 複数の物体を決めた法則に従い動かす 単一物体制御論 複数物体制御論 はじめに おわりに
  67. 67. © 2018 eau. / La Mer Artworks ある点を基準として物体を飛ばす 66 頭の中でイメージしてみる. 基準点
  68. 68. © 2018 eau. / La Mer Artworks ある点を基準として物体を飛ばす 67 基準点からの距離を計算する. ➢ 点からの距離によって動くスピードが変わるようにしたい. var dist = length(基準点, 物体の初期位置)
  69. 69. © 2018 eau. / La Mer Artworks ある点を基準として物体を飛ばす 68 全体のモーションのイメージを考える. 実際の物理と同じように,だんだんゆっくりさせたい…
  70. 70. © 2018 eau. / La Mer Artworks ある点を基準として物体を飛ばす 69 全体のモーションのイメージを考える. 外に磁石があるように,どんどん加速させたい…
  71. 71. © 2018 eau. / La Mer Artworks ある点を基準として物体を飛ばす 70 頭の中でイメージした法則を落とし込む. ➢ 位置だけでなく,回転などもスライダーに紐づけ一括操作 seedRandom(1, true) var center = thisComp.layer(“objects_controller").transform.position var dist = length(center - transform.position) * 0.1 var radian = thisComp.layer(“objects_controller").effect(“motion_ratio")("スライ ダー") var r = random(0, radian) * dist var theta = random(0, 360) transform.position + [r*Math.cos(theta), r*Math.sin(theta)] seedRandom(1, true) var rand_x = random(1, 40) var rand_y = random(1, 40) var rand_z = random(1, 40) transform.orientation + [rand_x, rand_y, rand_z] * thisComp.layer("exp_controller").effect(“motion_ratio")("スライ ダー") 位置 方向 シ ェ イ プ レ イ ヤ ー 制 御 レ イ ヤ ー ( ヌ ル )
  72. 72. © 2018 eau. / La Mer Artworks できた! 71 あまり試行錯誤せずに,手付けでは難しいモーションを 表現することができた!! ➢ 脳内で「モデル化」することのメリット .aep:_Chapter_04/4-1/
  73. 73. © 2018 eau. / La Mer Artworks 本講義の内容 72 1. 速度グラフと物体にかかる力 2. 振動する物体 3. 複数の物体を規則的に配置する 4. 複数の物体を決めた法則に従い動かす 単一物体制御論 複数物体制御論 はじめに おわりに
  74. 74. © 2018 eau. / La Mer Artworks 本講義の目的:再掲 73 オブジェクトの配置やモーションの背後に潜む「モデル」を ふわっと理解する. 1. 配置やモーションを決める際に,その解釈や意味づけを より正確に行える. 2. エクスプレッションにモデルを組み込むことにより, 効率よく一括で制御を行える. なんで?
  75. 75. © 2018 eau. / La Mer Artworks 次に読むとよい本など 74 自然なエフェクト表現にも原理はたくさん隠れている. ➢ 今回の資料を念頭に置くとイメージしやすいと思います.
  76. 76. © 2018 eau. / La Mer Artworks 「数理モデルで表現」することは 75 もちろんAEだけの話ではない!! ➢ ゲームプログラミング,webサイト,インタラクティブアプリ…… この講義が様々な場面でお役に立てれば幸いです.
  77. 77. © 2018 eau. / La Mer Artworks 本当にお疲れさまでした. ご質問,コメント等は mail : info@lamer-e.tv twitter : @silencieuse まで. 良き映像ライフを! 76
  78. 78. © 2018 eau. / La Mer Artworks APPENDIX 77
  79. 79. © 2018 eau. / La Mer Artworks (公開資料版追記 .aep:_Chapter_01/1-4) 公開版シグモイド関数エクスプレッションの解説 78 汎用性と動きの正確性を考慮し,発表版から改良しました. ➢ 関数を運動に変換する設計思想について,次ページから解説 時間正規化: 任意の時間長での モーションに対応 位置正規化: 始点と終点が ユーザ設定に一致 するよう改良 変数定義 var a = effect("a")("スライダー") var duration = thisComp.layer("SigmoidController").effect("duration")("スライダー") var max_x = thisComp.layer("SigmoidController").effect("max_x")("スライダー") var min_t = thisComp.layer("SigmoidController").effect("sigmoid_min_t")("スライダー") var max_t = thisComp.layer("SigmoidController").effect("sigmoid_max_t")("スライダー") var start_time = inPoint var end_time = start_time+duration var t = (time - start_time) * (max_t - min_t) / duration + min_t var sigma = 1. / (1. + Math.exp(-a*t)) var max_sigma = 1. / (1 + Math.exp(-a * max_t)) var min_sigma = 1. / (1 + Math.exp(-a * min_t)) var normed_sigma = (sigma - min_sigma) / (max_sigma - min_sigma) var x = max_x * normed_sigma if (time < end_time) content("楕円形 1").transform.position + [x, 0] else content("楕円形 1").transform.position + [max_x, 0] 終点で止める
  80. 80. © 2018 eau. / La Mer Artworks (公開資料版追記 .aep:_Chapter_01/1-4) 公開版シグモイド関数:変数定義(1) 79 // 動きの激しさを決める変数 var a = effect("a")("スライダー") // 運動時間 var duration = thisComp.layer("SigmoidController").effect("duration")("スライダー") // x方向にどれだけ動くか? var max_x = thisComp.layer("SigmoidController").effect("max_x")("スライダー") // シグモイド関数のどの範囲を取るか? var min_t = thisComp.layer("SigmoidController").effect("sigmoid_min_t")("スライダー") var max_t = thisComp.layer("SigmoidController").effect("sigmoid_max_t")("スライダー") max_x: どれほどの距離だけx方向に進むか? x=0 x=max_x duration: どれほどの時間で運動するか?t=0.0[sec] t=duration [sec]
  81. 81. © 2018 eau. / La Mer Artworks (公開資料版追記 .aep:_Chapter_01/1-4) 公開版シグモイド関数:変数定義(2) 80 // 動きの激しさを決める変数 var a = effect("a")("スライダー") // 運動時間 var duration = thisComp.layer("SigmoidController").effect("duration")("スライダー") // x方向にどれだけ動くか? var max_x = thisComp.layer("SigmoidController").effect("max_x")("スライダー") // シグモイド関数のどの範囲を取るか? var min_t = thisComp.layer("SigmoidController").effect("sigmoid_min_t")("スライダー") var max_t = thisComp.layer("SigmoidController").effect("sigmoid_max_t")("スライダー") t=0.0[sec] t=duration [sec] sigmoid_min_t=-2.0 sigmoid_max_t=2.0 sigmoid_min/max_t: シグモイド関数のどの範囲を取るか?
  82. 82. © 2018 eau. / La Mer Artworks (公開資料版追記 .aep:_Chapter_01/1-4) 公開版シグモイド関数:変数定義(2) 例 81 t=0.0[sec] t=duration [sec] min_t=-2.0 max_t=2.0 sigmoid_min/max_t: シグモイド関数のどの範囲を取るか? min_t=-1.0 max_t=4.0 min_t=0.0 max_t=1.5 例) 速度グラフ
  83. 83. © 2018 eau. / La Mer Artworks (公開資料版追記 .aep:_Chapter_01/1-4) 公開版シグモイド関数:変数定義(2) 例 82 min_t=-2.0 max_t=2.0 min_t=-1.0 max_t=4.0 min_t=0.0 max_t=1.5 速度グラフ値グラフ 例) t=0.0[sec] t=duration [sec]sigmoid_min/max_t: シグモイド関数のどの範囲を取るか?
  84. 84. © 2018 eau. / La Mer Artworks (公開資料版追記 .aep:_Chapter_01/1-4) 公開版シグモイド関数:時間正規化 83 var start_time = inPoint var end_time = start_time+duration var t = (time - start_time) * (max_t - min_t) / duration + min_t t= 𝑇min[sec] t= 𝑇max [sec] sigmoid_min_t= 𝑡min 運動の開始~終了の時間と,シグモイド関数の範囲を対応付け ➢ 右式で時間の正規化を行う. 𝑡 = 𝑇 − 𝑇min 𝑇max − 𝑇min 𝑡max − 𝑡min + 𝑡min sigmoid_max_t= 𝑡max 現時刻 𝑇 [sec] 関数上の時刻 𝑡
  85. 85. © 2018 eau. / La Mer Artworks (公開資料版追記 .aep:_Chapter_01/1-4) 公開版シグモイド関数:位置正規化(1) 84 理想は,0.0~1.0の範囲で 物体を動かしたい. 𝑡min 𝑡max 𝑡 理想 現実 𝜎 = 0.0 𝜎 = 1.0 𝜎max𝜎min 現実は,シグモイド関数の範囲 を区切っているため,ぴったり 0.0~1.0になることはない. ➢ 始点と終点が,元々想定して いた位置からズレてしまう.
  86. 86. © 2018 eau. / La Mer Artworks (公開資料版追記 .aep:_Chapter_01/1-4) 公開版シグモイド関数:位置正規化(2) 85 𝑡min 𝑡max 𝑡 理想 現実 𝜎 = 0.0 𝜎 = 1.0 𝜎max𝜎min 𝜎norm = 𝜎 − 𝜎min 𝜎max − 𝜎min var sigma = 1. / (1. + Math.exp(-a*t)) var max_sigma = 1. / (1 + Math.exp(-a * max_t)) var min_sigma = 1. / (1 + Math.exp(-a * min_t)) var normed_sigma = (sigma - min_sigma) / (max_sigma - min_sigma) var x = max_x * normed_sigma ズレを直すために,0.0~1.0の 範囲への正規化を行う. ➢ 𝑡minの時の関数の値:𝜎min, 𝑡maxの時の関数の値:𝜎maxを計算 ➢ 以下の式で値の正規化を行う 𝜎 𝜎 = 𝜎norm

×