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

AfterEffects
〈雰囲気〉数理モデル表現学概論
eau.
2018/6/30 AEオフ2018
niconico: mylist/28276645
twitter: @silencieuse

© 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に関する
某企業
研究職
主な作品 / 敬称略

ところでみなさん
2
映像，作ってますか？映像制作はいいぞ．なぜか？
映像の再生中は観る側を自分の世界に引き込めるからな．
「Pursing My True Self (Shinichi Osawa Remix)」
ペルソナ4 ダンシング・オールナイト (‘15/4)

映像制作＝「新しい世界を作る」
3
己のvirtualな世界を，レイヤーとタイムラインでモデリング
➢ オブジェクト・配置・モーション・カメラ……すべては制作者の所存

世界には，それに従う法則がある
4
制作者は，基本的に直感で現実と同じ物理法則を決める．
たまに物理法則を逸脱すると「気持ちいい」(＝非現実の快感)
v.s.
REAL
VIRTUAL

世界の法則をうまく表現するには
5
先人たちは，さまざまな法則を数式で表してきた．
➢ 数式で法則を一般化して表現する＝「数理モデル化」
𝐹 = 𝑚𝑎
一般化
(帰納)
数理モデル
運動
B
A
D
C
…

数式で表現できると何が嬉しいの？
6
再現・量産・改造を，効率的に一括で行える．
例) あらゆる「物体が動く」が1個の式で書けたら……
➢「力」や「物の重さ」を入力するだけで大量の物体を動かせる．
𝐹 = 𝑚𝑎
具体化
(演繹)
数理モデル運動
B
A
D
C
…

AEのプリセットとモデル
7
AEのエフェクトやプリセットもある種の「数理モデル」の集合
➢ 物体に対する「動きや効果」をパッケージングして使いやすくしている．
具体化
(演繹)
+

本講義の目的
8
オブジェクトの配置やモーションの背後に潜む「数理モデル」
をふわっと理解する．
1. 配置やモーションを決める際に，その解釈や意味づけを
より正確に行える．
2. エクスプレッションにモデルを組み込むことにより，
効率よく一括で制御を行える．
なんで？

本講義の内容
9
1. 速度グラフと物体にかかる力 [9分]
2. 振動する物体 [3分]
3. 複数の物体を規則的に配置する [6分]
4. 複数の物体を決めた法則に従い動かす [3分]
単一物体制御論
複数物体制御論
はじめに [イマココ，3分]
おわりに [1分]

AfterEffects
〈雰囲気〉数理モデル表現学概論
• 数式はたまに出てきますが，飾りなので
気にしなくていいです（参考資料です）
• エクスプレッションは，
まずコードを写しましょう．
• 大切なのは雰囲気！イメージ！！

本講義の内容
11
1. 速度グラフと物体にかかる力
⚫ 値・速度グラフ，加速度
⚫ 運動方程式，さまざまな力の表現（摩擦力，空気抵抗，引力，斥力）
⚫ イージーイーズ，シグモイド関数
⚫ 実例
2. 振動する物体
3. 複数の物体を規則的に配置する
4. 複数の物体を決めた法則に従い動かす
はじめに
おわりに

例: イージーイーズイン
12
シュッと動くモーションさせたい…イージーイーズイン使うか．
あ^～～気持ちいいんじゃ^^～～～
等速運動
イージー
イーズイン
操作：
キーフレームを右クリック
> キーフレーム補助
> イージーイーズイン
.aep:_Chapter_01/1-1/A_LinearMotion
.aep:_Chapter_01/1-1/B_EasyEaseIn

イージーイーズイン
13
いい感じにしてくれるのはわかるんだけど，
何やってるんだろう……速度グラフでも見てみるか．
操作：
グラフエディタボタンをクリック
速度
時間

値グラフ，速度グラフ
14
各フレームにおけるプロパティの値・速度を決めるグラフ
➢ 速度グラフには更に大事な情報が隠されている！
速度グラフ
値グラフ
（位置）

加速度＝速度グラフの接線の傾き
15
各点で接線をひいたときの傾きの大きさで，物体がどれほど
加速しているかわかる．
• 傾きが左上がり＝「物体が加速している」
• 傾きが水平＝「物体は等速で進む」
• 傾きが右下がり＝「物体が減速している」
加速等速減速
緩急緩緩急緩

加速度
16
物体が動力を持つと仮定すると，アクセル・ブレーキに相当
アクセルを
踏む
ふんわり
離す
等速徐々に
ブレーキ
ちょっと
踏み込む
ふんわり
離す
.aep:_Chapter_01/1-1/C_AccelBrake

運動方程式
17
• 傾きが左上がり＝「加速」＝「動きと同じ向きに力が働く」
• 傾きが水平＝「等速」＝「力は働いていない」
• 傾きが右下がり＝「減速」＝「動きと逆向きに力が働く」
𝐹 = 𝑚𝑎 加速度は，物体にかかる力に比例
➢ 加速度で，「物体にかかる力」を表現できる．
引っ張られ続ける～～～平和…… なんか抵抗で進みづらい～～～

等速で動かす
18
物体に何も力が働かないなら，等速で動く．
➢ 氷の上をビー玉が滑るかのようなイメージ
瞬間的に
力が働く
あとはそのまま
滑るだけ

摩擦力を加える
19
摩擦力は，動く方向と逆向きで一定に
働く．
➢ 速度グラフは，一定の傾きを保って
減速する．
進行方向
常に同じ傾き
𝐹 = 𝜇𝑁
摩擦力

摩擦力を加える
20
進行方向
常に同じ傾き
𝐹 = 𝜇𝑁
摩擦力
上：等速運動
下：摩擦力あり
.aep:_Chapter_01/1-1/D_Friction

空気抵抗を加える
21
空気抵抗は，動く方向と逆向きに，
速さに比例して働く．(という近似)
➢ 物体が速く動いている時ほど，
大きく減速する速度グラフ
➢ 経験的に，強めにかけると「気持ちいい」
進行方向
高速移動
→ 傾き大
低速移動
→ 傾き小
一定の傾きに収束
→ 摩擦のみ
𝐹 = 𝑘𝑣
摩擦力
空気抵抗

空気抵抗を加える
22
進行方向
高速移動
→ 傾き大
低速移動
→ 傾き小
𝐹 = 𝑘𝑣
摩擦力
空気抵抗
上：摩擦力のみ
下：摩擦力＋空気抵抗
一定の傾きに収束
→ 摩擦のみ
.aep:_Chapter_01/1-1/D_Friction
.aep:_Chapter_01/1-1/E_Resistance

現実の力学 v.s. イージーイーズイン
23
現実とは何かちょっと違う……が気持ちいい．
これがバーチャル物理ワールドなんだよなあ．
➢ もうちょっと「仮想的な力」を深掘りして想像してみる．
v.s.
REAL
VIRTUAL
.aep:_Chapter_01/1-1/E_Resistance
.aep:_Chapter_01/1-1/B_EasyEaseIn

引力
24
引力は，物体間の距離が近いほど
急激に大きく引き寄せられる．
➢ 速度グラフは，引き寄せられる方向
へと徐々に加速する．
最初は
じわじわ
最後の上がり幅は
盛る！！
𝐹 = 𝑘
𝑞1 𝑞2
𝑟2

引力
25
最初は
じわじわ
最後の上がり幅は
盛る！！
N S
𝐹 = 𝑘
𝑞1 𝑞2
𝑟2
.aep:_Chapter_01/1-1/F_Attractive

斥力/反発力＝引力の逆
26
斥力は，物体間の距離が近いほど
大きく反発する．
➢ 速度グラフは，反発する方向へと
急峻に傾き，徐々に緩くなる．
➢ 摩擦や空気抵抗と組み合わせるとそれっぽい．
斥力で
一気に反発
摩擦力と斥力が
つりあう
摩擦力で
一定の傾きに減速
𝐹 = −𝑘
𝑞1 𝑞2
𝑟2

斥力/反発力＋摩擦
27
斥力で
一気に反発
つりあう
摩擦力で
N S
𝐹 = −𝑘
𝑞1 𝑞2
𝑟2
.aep:_Chapter_01/1-1/G_Repulsive

イージーイーズインの「解釈」
28
イージーイーズインも似たような形をしている．
➢ このバーチャル世界では，始点に反発する磁石がある法則
斥力で
やや反発
つりあう
摩擦力で
VIRTUAL
N S
c.f.) 斥力＋摩擦
イージーイーズイン

イージーイーズイン応用
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

イージーイーズ
30
人間の自然な制御に比べて，ややハードランディング
最初から
アクセル
がん踏み
最後も
ブレーキ
がん踏み
.aep:_Chapter_01/1-3/A_EasyEase_vanilla

より現実的なイージーイーズ
31
始点と終点は加速度をゼロに近づけたほうが，現実に即する．
さらに，メリハリがついて気持ちいい．
➢ ふんわりとアクセル・ブレーキを踏むイメージ
バニラ
イージー
イーズ
修正後
イージー
イーズ
徐々に
加速
アクセルを離し，
ブレーキを踏み始める
ブレーキを
ゆっくり離す
.aep:_Chapter_01/1-3/A_EasyEase_vanilla
.aep:_Chapter_01/1-3/B_EasyEase_modified

現実的なイージーイーズのモデル
32
現実的なイージーイーズは，
シグモイド関数と呼ばれる関数
に形が似ている．
➢ エクスプレッションで実装してみる．
d𝜎 𝑡
d𝑡
=
𝑎𝑒−𝑎𝑡
1 + 𝑒−𝑎𝑡 2
= 𝑎𝜎(𝑡)(1 − 𝜎(𝑡))
位置:
速度=位置の1階時間微分:
𝜎(𝑡) =
1
1 + 𝑒−𝑎𝑡
≈
𝜎(𝑡) =
1
1 + 𝑒−𝑎𝑡
≈
d𝜎 𝑡
d𝑡
=
𝑎𝑒−𝑎𝑡
1 + 𝑒−𝑎𝑡 2
AE上の
グラフ
イメージ
シグモイド
関数の
グラフ
シグモイド関数
値グラフ（位置）速度グラフ（位置の1階時間微分）

(参考)
エクスプレッションについて
33
プロパティをスクリプトで制御することができる．
詳細は以下の過去資料を参照
https://vimeo.com/59285177

(参考)
スライダー制御エフェクトについて
34
エクスプレッション内のパラメータを制御することができる．
詳細は以下の過去資料を参照
https://vimeo.com/98264395

(参考)
シグモイド関数のエクスプレッション
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 + 𝑒−𝑎𝑡
この式を
書き下しているだけ

(参考)
シグモイド関数のエクスプレッション
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
この範囲だけ
使う
𝜎(𝑡) =
1
1 + 𝑒−𝑎𝑡
この式を
書き下しているだけ
公開資料版で改良しました．
APPENDIX参照

シグモイド関数：加減速のパラメータa
37
𝜎(𝑡) =
1
1 + 𝑒−𝑎𝑡
係数a(≧0)を大きくするほど
急激な加減速を行う．
a=3
a=6
a=9
a=12
a=15
速度グラフ v=σ’(t)
.aep:_Chapter_01/1-4

本講義の内容
38
⚫ 単振動，減衰振動，オリジナル振動
はじめに
おわりに

単振動
ある点を基準に，そこからの距離に比例
して力がかかる．
➢ 中心を行ったり来たりする動き（振動）
➢ 周期的な運動：ばね，振り子，ブランコ等
𝑥 = 𝐴 sin(𝜔𝑡 + 𝜙)
位置:
値グラフ
(位置)
: 三角関数
.aep:_Chapter_02/2-1/A_simple_harmonic

(参考)
単振動のエクスプレッション
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

実例：単振動と浮力
41
水に浮かぶ物体を指で押し込んで離した後の動きは，
(空気抵抗がなければ)単振動に従うことが知られている．
重力：一定
浮力：沈んでいる部分の体積に比例する
物体にかかる力の合計

実例：単振動と浮力
42
水に浮かぶ物体（舟）から撮るカメラのy座標に
単振動を仕込むとリアリティが出る．
物体にかかる力の合計
「river」
PENGUINS PROJECT (‘13/4)
.aep:_Chapter_02/2-2

減衰振動
43
𝑥 = 𝐴𝒆−𝜸𝒕 sin(𝜔𝑡 + 𝜙)
位置:
単振動は永遠に止まらない設定
➢ 現実には，空気抵抗によって徐々に減衰し，
やがて止まる(＝減衰振動)．
➢ 単振動の振れ幅を徐々に0に近づける．
進行方向進行方向
空気抵抗による
減衰値グラフ
(位置)
.aep:_Chapter_02/2-1/B_damped_oscillation

減衰振動
44
𝑥 = 𝐴𝒆−𝜸𝒕 sin(𝜔𝑡 + 𝜙)
位置:
空気抵抗による
減衰値グラフ
(位置)
単振動減衰振動
最初に急激な力が加わっている場合に
リアリティが増す．
.aep:_Chapter_02/2-3/

(参考)
減衰振動のエクスプレッション
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

オリジナル振動を作る
46
𝑥 = 𝐴𝒇(𝒕) sin(𝜔𝑡 + 𝜙)
位置: 単振動に別のグラフを掛け算すると，
オリジナル振動を定義できる．
➢ 掛けるグラフはスライダーで制御
単振動オリジナル振動
×
×
×
=
=
=
好みの値グラフ 𝑓(𝑡)
𝑓(𝑡)
: 数学では
包絡線と
呼ばれる

オリジナル振動
47
𝑥 = 𝐴𝒇(𝒕) sin(𝜔𝑡 + 𝜙)
位置: 単振動に別のグラフを掛け算すると，
オリジナル振動を定義できる．
➢ 掛けるグラフはスライダーで制御
オリジナル振動

疲れたあなたに
48
NewtonやAEオフ謹製KeyframeMasterを買うのも大いに
アリだぞ！
➢ ただ，裏で何が起こっているか知ると，狙った効果を一発で出せる
（本講義の目的）．

本講義の内容
49
⚫ 円，螺旋
⚫ さまざまな関数と図形
はじめに
おわりに

円状に物体を配置
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)]
ቊ

複数の物体を並べる際のコツ
51
半径𝑟
角度𝜃
ቊ
配置全てをコントロールするヌルレイヤー
を用意する．
➢ 全物体に共通のパラメータ
(円ならば半径，中心)を紐付ける．
var center = [960, 540] // 円の中心

ヌルレイヤーで制御する：位置
52
半径𝑟
角度𝜃
ቊ
円の中心をヌルレイヤーの位置に紐づける．
// 円の中心
var center = thisComp.layer("circle_controller").transform.position

53
半径𝑟
角度𝜃
ቊ
円の中心をヌルレイヤーの位置に紐づける．
// 円の中心

54
半径𝑟
角度𝜃
ቊ
ヌルレイヤーの位置に応じて中心が動く．
// 円の中心

ヌルレイヤーで制御する：半径
55
半径𝑟
角度𝜃
ቊ
ヌルレイヤーにスライダーを用意し，
半径に紐づける．
// 円の中心
// 円の半径
var r = thisComp.layer("circle_controller").effect("radius")("スライダー")

ヌルレイヤーで制御する：半径
56
半径𝑟
角度𝜃
ቊ
ヌルレイヤーのスライダーに応じて
半径が変化する．
// 円の中心
// 円の半径

ヌルレイヤーで制御する：角度
57
半径𝑟
角度𝜃
ቊ
各物体の角度をまとめて制御するための
スライダーもヌルレイヤーに追加
➢ 物体の角度に掛け合わせる．
// 円の中心
// 円の半径
* thisComp.layer("circle_controller").effect("rotateEasing")("スライダー")

ヌルレイヤーで制御する：角度
58
半径𝑟
角度𝜃
ቊ
物体の角度の動きを
スライダーで効率的に一括制御できる．
// 円の中心
// 円の半径

ヌルレイヤーで制御する：組み合わせ
59
半径𝑟
角度𝜃
ቊ
物体の半径に減衰振動を適用した例
// 円の中心
// 円の半径

螺旋状に物体を配置
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]
間隔𝑑

螺旋状に物体を配置：間隔
61
全体を制御できるパラメータは
どんどんスライダー制御にまとめる．
var interval = index
* thisComp.layer("cylinder_controller").effect("rotateEasing")("スライダー")
間隔𝑑

螺旋状に物体を配置：間隔
62
間隔に減衰振動を適用した例
var interval = index
* thisComp.layer(“cylinder_controller").effect("rotateEasing")("スライダー")
間隔𝑑

世の中には様々な図形がある
63
図形を数式で表現できれば，AE上でその形状に配置できる．
➢ 数式の中身は踏み込まず，書かれた通りにエクスプレッション化
正葉曲線
リサージュ曲線
内サイクロイド
𝑟 = sin
𝑛
𝑑
𝜃
ቊ
𝑥 = 𝐴 sin(𝑎𝜃 + 𝛿)
𝑦 = 𝐵 sin(𝑏𝜃)
𝑥 = 𝑟𝑐 − 𝑟 𝑚 cos 𝜃 + 𝑟 𝑚cos(
𝑟𝑐 − 𝑟 𝑚
𝑟 𝑚
𝜃)
𝑦 = 𝑟𝑐 − 𝑟 𝑚 sin 𝜃 − 𝑟 𝑚sin(
𝑟𝑐 − 𝑟 𝑚
𝑟 𝑚
𝜃)

様々な図形をエクスプレションで実装
64
aepを参考資料で配布する予定
➢ ぜひいろいろ遊んでみてください．
正葉曲線リサージュ曲線内サイクロイド
.aep:_Chapter_03/3-6/ .aep:_Chapter_03/3-7/ .aep:_Chapter_03/3-8/

本講義の内容
65
はじめに
おわりに

ある点を基準として物体を飛ばす
66
頭の中でイメージしてみる．
基準点

67
基準点からの距離を計算する．
➢ 点からの距離によって動くスピードが変わるようにしたい．
var dist = length(基準点, 物体の初期位置)

68
全体のモーションのイメージを考える．
実際の物理と同じように，だんだんゆっくりさせたい…

69
全体のモーションのイメージを考える．
外に磁石があるように，どんどん加速させたい…

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")("スライ
ダー")
位置
方向
シ
ェ
イ
プ
レ
イ
ヤ
ー
制
御
レ
イ
ヤ
ー
（
ヌ
ル
）

できた！
71
あまり試行錯誤せずに，手付けでは難しいモーションを
表現することができた！！
➢ 脳内で「モデル化」することのメリット

本講義の内容
72
はじめに
おわりに

本講義の目的：再掲
73
オブジェクトの配置やモーションの背後に潜む「モデル」を
ふわっと理解する．
1. 配置やモーションを決める際に，その解釈や意味づけを
より正確に行える．
2. エクスプレッションにモデルを組み込むことにより，
効率よく一括で制御を行える．
なんで？

次に読むとよい本など
74
自然なエフェクト表現にも原理はたくさん隠れている．
➢ 今回の資料を念頭に置くとイメージしやすいと思います．

「数理モデルで表現」することは
75
もちろんAEだけの話ではない！！
➢ ゲームプログラミング，webサイト，インタラクティブアプリ……
この講義が様々な場面でお役に立てれば幸いです．

本当にお疲れさまでした．
ご質問，コメント等は
mail : info@lamer-e.tv
twitter : @silencieuse まで．
良き映像ライフを！
76

APPENDIX
77

(公開資料版追記 .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)
else
content("楕円形 1").transform.position + [max_x, 0]
終点で止める

公開版シグモイド関数：変数定義(1)
79
// 運動時間
// x方向にどれだけ動くか？
// シグモイド関数のどの範囲を取るか？
max_x: どれほどの距離だけx方向に進むか？
x=0 x=max_x
duration: どれほどの時間で運動するか？t=0.0[sec] t=duration [sec]

公開版シグモイド関数：変数定義(2)
80
// 運動時間
// x方向にどれだけ動くか？
// シグモイド関数のどの範囲を取るか？
t=0.0[sec] t=duration [sec]
sigmoid_min_t=-2.0 sigmoid_max_t=2.0
sigmoid_min/max_t:
シグモイド関数のどの範囲を取るか？

公開版シグモイド関数：変数定義(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
例）速度グラフ

公開版シグモイド関数：変数定義(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:

公開版シグモイド関数：時間正規化
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]
関数上の時刻 𝑡

公開版シグモイド関数：位置正規化(1)
84
理想は，0.0~1.0の範囲で
物体を動かしたい．
𝑡min
𝑡max
𝑡
理想
現実
𝜎 = 0.0 𝜎 = 1.0
𝜎max𝜎min
現実は，シグモイド関数の範囲
を区切っているため，ぴったり
0.0~1.0になることはない．
➢ 始点と終点が，元々想定して
いた位置からズレてしまう．

公開版シグモイド関数：位置正規化(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

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

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