AfterEffects〈雰囲気〉数理モデル表現学概論
- 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. © 2018 eau. / La Mer Artworks
ところでみなさん
2
映像,作ってますか? 映像制作はいいぞ.なぜか?
映像の再生中は観る側を自分の世界に引き込めるからな.
「Pursing My True Self (Shinichi Osawa Remix)」
ペルソナ4 ダンシング・オールナイト (‘15/4)
- 4. © 2018 eau. / La Mer Artworks
映像制作=「新しい世界を作る」
3
己のvirtualな世界を,レイヤーとタイムラインでモデリング
➢ オブジェクト・配置・モーション・カメラ……すべては制作者の所存
- 5. © 2018 eau. / La Mer Artworks
世界には,それに従う法則がある
4
制作者は,基本的に直感で現実と同じ物理法則を決める.
たまに物理法則を逸脱すると「気持ちいい」(=非現実の快感)
v.s.
REAL
VIRTUAL
- 6. © 2018 eau. / La Mer Artworks
世界の法則をうまく表現するには
5
先人たちは,さまざまな法則を数式で表してきた.
➢ 数式で法則を一般化して表現する=「数理モデル化」
𝐹 = 𝑚𝑎
一般化
(帰納)
数理モデル
運動
B
A
D
C
…
- 7. © 2018 eau. / La Mer Artworks
数式で表現できると何が嬉しいの?
6
再現・量産・改造を,効率的に一括で行える.
例) あらゆる「物体が動く」が1個の式で書けたら……
➢「力」や「物の重さ」を入力するだけで大量の物体を動かせる.
𝐹 = 𝑚𝑎
具体化
(演繹)
数理モデル 運動
B
A
D
C
…
- 8. © 2018 eau. / La Mer Artworks
AEのプリセットとモデル
7
AEのエフェクトやプリセットもある種の「数理モデル」の集合
➢ 物体に対する「動きや効果」をパッケージングして使いやすくしている.
具体化
(演繹)
+
- 9. © 2018 eau. / La Mer Artworks
本講義の目的
8
オブジェクトの配置やモーションの背後に潜む「数理モデル」
をふわっと理解する.
1. 配置やモーションを決める際に,その解釈や意味づけを
より正確に行える.
2. エクスプレッションにモデルを組み込むことにより,
効率よく一括で制御を行える.
なんで?
- 10. © 2018 eau. / La Mer Artworks
本講義の内容
9
1. 速度グラフと物体にかかる力 [9分]
2. 振動する物体 [3分]
3. 複数の物体を規則的に配置する [6分]
4. 複数の物体を決めた法則に従い動かす [3分]
単一物体制御論
複数物体制御論
はじめに [イマココ,3分]
おわりに [1分]
- 12. © 2018 eau. / La Mer Artworks
本講義の内容
11
1. 速度グラフと物体にかかる力
⚫ 値・速度グラフ,加速度
⚫ 運動方程式,さまざまな力の表現(摩擦力,空気抵抗,引力,斥力)
⚫ イージーイーズ,シグモイド関数
⚫ 実例
2. 振動する物体
3. 複数の物体を規則的に配置する
4. 複数の物体を決めた法則に従い動かす
単一物体制御論
複数物体制御論
はじめに
おわりに
- 13. © 2018 eau. / La Mer Artworks
例: イージーイーズイン
12
シュッと動くモーションさせたい…イージーイーズイン使うか.
あ^~~気持ちいいんじゃ^^~~~
等速運動
イージー
イーズイン
操作:
キーフレームを右クリック
> キーフレーム補助
> イージーイーズイン
.aep:_Chapter_01/1-1/A_LinearMotion
.aep:_Chapter_01/1-1/B_EasyEaseIn
- 14. © 2018 eau. / La Mer Artworks
イージーイーズイン
13
いい感じにしてくれるのはわかるんだけど,
何やってるんだろう……速度グラフでも見てみるか.
操作:
グラフエディタボタンをクリック
速度
時間
- 15. © 2018 eau. / La Mer Artworks
値グラフ,速度グラフ
14
各フレームにおけるプロパティの値・速度を決めるグラフ
➢ 速度グラフには更に大事な情報が隠されている!
速度グラフ
値グラフ
(位置)
- 16. © 2018 eau. / La Mer Artworks
加速度=速度グラフの接線の傾き
15
各点で接線をひいたときの傾きの大きさで,物体がどれほど
加速しているかわかる.
• 傾きが左上がり=「物体が加速している」
• 傾きが水平 =「物体は等速で進む」
• 傾きが右下がり=「物体が減速している」
加速 等速 減速
緩 急 緩 緩 急 緩
- 17. © 2018 eau. / La Mer Artworks
加速度
16
物体が動力を持つと仮定すると,アクセル・ブレーキに相当
アクセルを
踏む
ふんわり
離す
等速 徐々に
ブレーキ
ちょっと
踏み込む
ふんわり
離す
.aep:_Chapter_01/1-1/C_AccelBrake
- 18. © 2018 eau. / La Mer Artworks
運動方程式
17
• 傾きが左上がり=「加速」=「動きと同じ向きに力が働く」
• 傾きが水平 =「等速」=「力は働いていない」
• 傾きが右下がり=「減速」=「動きと逆向きに力が働く」
𝐹 = 𝑚𝑎 加速度は,物体にかかる力に比例
➢ 加速度で,「物体にかかる力」を表現できる.
引っ張られ続ける~~~ 平和…… なんか抵抗で進みづらい~~~
- 19. © 2018 eau. / La Mer Artworks
等速で動かす
18
物体に何も力が働かないなら,等速で動く.
➢ 氷の上をビー玉が滑るかのようなイメージ
瞬間的に
力が働く
あとはそのまま
滑るだけ
.aep:_Chapter_01/1-1/A_LinearMotion
- 20. © 2018 eau. / La Mer Artworks
摩擦力を加える
19
摩擦力は,動く方向と逆向きで一定に
働く.
➢ 速度グラフは,一定の傾きを保って
減速する.
進行方向
常に同じ傾き
𝐹 = 𝜇𝑁
摩擦力
- 21. © 2018 eau. / La Mer Artworks
摩擦力を加える
20
進行方向
常に同じ傾き
𝐹 = 𝜇𝑁
摩擦力
上:等速運動
下:摩擦力あり
.aep:_Chapter_01/1-1/A_LinearMotion
.aep:_Chapter_01/1-1/D_Friction
- 22. © 2018 eau. / La Mer Artworks
空気抵抗を加える
21
空気抵抗は,動く方向と逆向きに,
速さに比例して働く.(という近似)
➢ 物体が速く動いている時ほど,
大きく減速する速度グラフ
➢ 経験的に,強めにかけると「気持ちいい」
進行方向
高速移動
→ 傾き大
低速移動
→ 傾き小
一定の傾きに収束
→ 摩擦のみ
𝐹 = 𝑘𝑣
摩擦力
空気抵抗
- 23. © 2018 eau. / La Mer Artworks
空気抵抗を加える
22
進行方向
高速移動
→ 傾き大
低速移動
→ 傾き小
𝐹 = 𝑘𝑣
摩擦力
空気抵抗
上:摩擦力のみ
下:摩擦力+空気抵抗
一定の傾きに収束
→ 摩擦のみ
.aep:_Chapter_01/1-1/D_Friction
.aep:_Chapter_01/1-1/E_Resistance
- 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. © 2018 eau. / La Mer Artworks
引力
24
引力は,物体間の距離が近いほど
急激に大きく引き寄せられる.
➢ 速度グラフは,引き寄せられる方向
へと徐々に加速する.
最初は
じわじわ
最後の上がり幅は
盛る!!
𝐹 = 𝑘
𝑞1 𝑞2
𝑟2
- 26. © 2018 eau. / La Mer Artworks
引力
25
最初は
じわじわ
最後の上がり幅は
盛る!!
N S
𝐹 = 𝑘
𝑞1 𝑞2
𝑟2
.aep:_Chapter_01/1-1/F_Attractive
- 27. © 2018 eau. / La Mer Artworks
斥力/反発力=引力の逆
26
斥力は,物体間の距離が近いほど
大きく反発する.
➢ 速度グラフは,反発する方向へと
急峻に傾き,徐々に緩くなる.
➢ 摩擦や空気抵抗と組み合わせるとそれっぽい.
斥力で
一気に反発
摩擦力と斥力が
つりあう
摩擦力で
一定の傾きに減速
𝐹 = −𝑘
𝑞1 𝑞2
𝑟2
- 28. © 2018 eau. / La Mer Artworks
斥力/反発力+摩擦
27
斥力で
一気に反発
摩擦力と斥力が
つりあう
摩擦力で
一定の傾きに減速
N S
𝐹 = −𝑘
𝑞1 𝑞2
𝑟2
.aep:_Chapter_01/1-1/G_Repulsive
- 29. © 2018 eau. / La Mer Artworks
イージーイーズインの「解釈」
28
イージーイーズインも似たような形をしている.
➢ このバーチャル世界では,始点に反発する磁石がある法則
斥力で
やや反発
摩擦力と斥力が
つりあう
摩擦力で
一定の傾きに減速
VIRTUAL
N S
c.f.) 斥力+摩擦
イージーイーズイン
- 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. © 2018 eau. / La Mer Artworks
イージーイーズ
30
人間の自然な制御に比べて,ややハードランディング
最初から
アクセル
がん踏み
最後も
ブレーキ
がん踏み
.aep:_Chapter_01/1-3/A_EasyEase_vanilla
- 32. © 2018 eau. / La Mer Artworks
より現実的なイージーイーズ
31
始点と終点は加速度をゼロに近づけたほうが,現実に即する.
さらに,メリハリがついて気持ちいい.
➢ ふんわりとアクセル・ブレーキを踏むイメージ
バニラ
イージー
イーズ
修正後
イージー
イーズ
徐々に
加速
アクセルを離し,
ブレーキを踏み始める
ブレーキを
ゆっくり離す
.aep:_Chapter_01/1-3/A_EasyEase_vanilla
.aep:_Chapter_01/1-3/B_EasyEase_modified
- 33. © 2018 eau. / La Mer Artworks
現実的なイージーイーズのモデル
32
現実的なイージーイーズは,
シグモイド関数と呼ばれる関数
に形が似ている.
➢ エクスプレッションで実装してみる.
d𝜎 𝑡
d𝑡
=
𝑎𝑒−𝑎𝑡
1 + 𝑒−𝑎𝑡 2
= 𝑎𝜎(𝑡)(1 − 𝜎(𝑡))
位置:
速度=位置の1階時間微分:
𝜎(𝑡) =
1
1 + 𝑒−𝑎𝑡
≈
𝜎(𝑡) =
1
1 + 𝑒−𝑎𝑡
≈
d𝜎 𝑡
d𝑡
=
𝑎𝑒−𝑎𝑡
1 + 𝑒−𝑎𝑡 2
AE上の
グラフ
イメージ
シグモイド
関数の
グラフ
シグモイド関数
値グラフ(位置) 速度グラフ(位置の1階時間微分)
- 34. © 2018 eau. / La Mer Artworks
(参考)
エクスプレッションについて
33
プロパティをスクリプトで制御することができる.
詳細は以下の過去資料を参照
https://vimeo.com/59285177
- 35. © 2018 eau. / La Mer Artworks
(参考)
スライダー制御エフェクトについて
34
エクスプレッション内のパラメータを制御することができる.
詳細は以下の過去資料を参照
https://vimeo.com/98264395
- 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. © 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. © 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. © 2018 eau. / La Mer Artworks
本講義の内容
38
1. 速度グラフと物体にかかる力
2. 振動する物体
⚫ 単振動,減衰振動,オリジナル振動
3. 複数の物体を規則的に配置する
4. 複数の物体を決めた法則に従い動かす
単一物体制御論
複数物体制御論
はじめに
おわりに
- 40. © 2018 eau. / La Mer Artworks
単振動
ある点を基準に,そこからの距離に比例
して力がかかる.
➢ 中心を行ったり来たりする動き(振動)
➢ 周期的な運動:ばね,振り子,ブランコ 等
𝑥 = 𝐴 sin(𝜔𝑡 + 𝜙)
位置:
値グラフ
(位置)
: 三角関数
.aep:_Chapter_02/2-1/A_simple_harmonic
- 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. © 2018 eau. / La Mer Artworks
実例:単振動と浮力
41
水に浮かぶ物体を指で押し込んで離した後の動きは,
(空気抵抗がなければ)単振動に従うことが知られている.
重力:一定
浮力:沈んでいる部分の体積に比例する
物体にかかる力の合計
- 43. © 2018 eau. / La Mer Artworks
実例:単振動と浮力
42
水に浮かぶ物体(舟)から撮るカメラのy座標に
単振動を仕込むとリアリティが出る.
物体にかかる力の合計
「river」
PENGUINS PROJECT (‘13/4)
.aep:_Chapter_02/2-2
- 44. © 2018 eau. / La Mer Artworks
減衰振動
43
𝑥 = 𝐴𝒆−𝜸𝒕 sin(𝜔𝑡 + 𝜙)
位置:
単振動は永遠に止まらない設定
➢ 現実には,空気抵抗によって徐々に減衰し,
やがて止まる(=減衰振動).
➢ 単振動の振れ幅を徐々に0に近づける.
進行方向 進行方向
空気抵抗による
減衰値グラフ
(位置)
.aep:_Chapter_02/2-1/B_damped_oscillation
- 45. © 2018 eau. / La Mer Artworks
減衰振動
44
𝑥 = 𝐴𝒆−𝜸𝒕 sin(𝜔𝑡 + 𝜙)
位置:
空気抵抗による
減衰値グラフ
(位置)
単振動 減衰振動
最初に急激な力が加わっている場合に
リアリティが増す.
.aep:_Chapter_02/2-3/
- 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. © 2018 eau. / La Mer Artworks
オリジナル振動を作る
46
𝑥 = 𝐴𝒇(𝒕) sin(𝜔𝑡 + 𝜙)
位置: 単振動に別のグラフを掛け算すると,
オリジナル振動を定義できる.
➢ 掛けるグラフはスライダーで制御
単振動 オリジナル振動
×
×
×
=
=
=
好みの値グラフ 𝑓(𝑡)
𝑓(𝑡)
: 数学では
包絡線と
呼ばれる
- 48. © 2018 eau. / La Mer Artworks
オリジナル振動
47
𝑥 = 𝐴𝒇(𝒕) sin(𝜔𝑡 + 𝜙)
位置: 単振動に別のグラフを掛け算すると,
オリジナル振動を定義できる.
➢ 掛けるグラフはスライダーで制御
オリジナル振動
.aep:_Chapter_02/2-4/
- 49. © 2018 eau. / La Mer Artworks
疲れたあなたに
48
NewtonやAEオフ謹製KeyframeMasterを買うのも大いに
アリだぞ!
➢ ただ,裏で何が起こっているか知ると,狙った効果を一発で出せる
(本講義の目的).
- 50. © 2018 eau. / La Mer Artworks
本講義の内容
49
1. 速度グラフと物体にかかる力
2. 振動する物体
3. 複数の物体を規則的に配置する
⚫ 円,螺旋
⚫ さまざまな関数と図形
4. 複数の物体を決めた法則に従い動かす
単一物体制御論
複数物体制御論
はじめに
おわりに
- 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 2018 eau. / La Mer Artworks
世の中には様々な図形がある
63
図形を数式で表現できれば,AE上でその形状に配置できる.
➢ 数式の中身は踏み込まず,書かれた通りにエクスプレッション化
正葉曲線
リサージュ曲線
内サイクロイド
𝑟 = sin
𝑛
𝑑
𝜃
ቊ
𝑥 = 𝐴 sin(𝑎𝜃 + 𝛿)
𝑦 = 𝐵 sin(𝑏𝜃)
𝑥 = 𝑟𝑐 − 𝑟 𝑚 cos 𝜃 + 𝑟 𝑚cos(
𝑟𝑐 − 𝑟 𝑚
𝑟 𝑚
𝜃)
𝑦 = 𝑟𝑐 − 𝑟 𝑚 sin 𝜃 − 𝑟 𝑚sin(
𝑟𝑐 − 𝑟 𝑚
𝑟 𝑚
𝜃)
- 65. © 2018 eau. / La Mer Artworks
様々な図形をエクスプレションで実装
64
aepを参考資料で配布する予定
➢ ぜひいろいろ遊んでみてください.
正葉曲線 リサージュ曲線 内サイクロイド
.aep:_Chapter_03/3-6/ .aep:_Chapter_03/3-7/ .aep:_Chapter_03/3-8/
- 66. © 2018 eau. / La Mer Artworks
本講義の内容
65
1. 速度グラフと物体にかかる力
2. 振動する物体
3. 複数の物体を規則的に配置する
4. 複数の物体を決めた法則に従い動かす
単一物体制御論
複数物体制御論
はじめに
おわりに
- 67. © 2018 eau. / La Mer Artworks
ある点を基準として物体を飛ばす
66
頭の中でイメージしてみる.
基準点
- 68. © 2018 eau. / La Mer Artworks
ある点を基準として物体を飛ばす
67
基準点からの距離を計算する.
➢ 点からの距離によって動くスピードが変わるようにしたい.
var dist = length(基準点, 物体の初期位置)
- 69. © 2018 eau. / La Mer Artworks
ある点を基準として物体を飛ばす
68
全体のモーションのイメージを考える.
実際の物理と同じように,だんだんゆっくりさせたい…
- 70. © 2018 eau. / La Mer Artworks
ある点を基準として物体を飛ばす
69
全体のモーションのイメージを考える.
外に磁石があるように,どんどん加速させたい…
- 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. © 2018 eau. / La Mer Artworks
できた!
71
あまり試行錯誤せずに,手付けでは難しいモーションを
表現することができた!!
➢ 脳内で「モデル化」することのメリット
.aep:_Chapter_04/4-1/
- 73. © 2018 eau. / La Mer Artworks
本講義の内容
72
1. 速度グラフと物体にかかる力
2. 振動する物体
3. 複数の物体を規則的に配置する
4. 複数の物体を決めた法則に従い動かす
単一物体制御論
複数物体制御論
はじめに
おわりに
- 74. © 2018 eau. / La Mer Artworks
本講義の目的:再掲
73
オブジェクトの配置やモーションの背後に潜む「モデル」を
ふわっと理解する.
1. 配置やモーションを決める際に,その解釈や意味づけを
より正確に行える.
2. エクスプレッションにモデルを組み込むことにより,
効率よく一括で制御を行える.
なんで?
- 75. © 2018 eau. / La Mer Artworks
次に読むとよい本など
74
自然なエフェクト表現にも原理はたくさん隠れている.
➢ 今回の資料を念頭に置くとイメージしやすいと思います.
- 76. © 2018 eau. / La Mer Artworks
「数理モデルで表現」することは
75
もちろんAEだけの話ではない!!
➢ ゲームプログラミング,webサイト,インタラクティブアプリ……
この講義が様々な場面でお役に立てれば幸いです.
- 77. © 2018 eau. / La Mer Artworks
本当にお疲れさまでした.
ご質問,コメント等は
mail : info@lamer-e.tv
twitter : @silencieuse まで.
良き映像ライフを!
76
- 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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