Graviness Blog

算数・数学・科学・電脳・雑記・アホの順の密度で記事が構成されます。
<< July 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >> ブログランキング・にほんブログ村へ
 
RECOMMEND
ビッグバン宇宙論 (上)
ビッグバン宇宙論 (上) (JUGEMレビュー »)
サイモン・シン, 青木 薫
RECENT COMMENT
  • 豊臣秀吉と曾呂利新左衛門から学ぶ数列の和
    優乃 (07/12)
  • 【誰か解いて】漸化式 a_(n+1) = f(n) * a_n ^ g(n) + h(n) の一般項
    優乃 (02/18)
  • 【誰か解いて】漸化式 a_(n+1) = f(n) * a_n ^ g(n) + h(n) の一般項
    S.S.+ (02/16)
  • 豊臣秀吉と曾呂利新左衛門から学ぶ数列の和
    坂井昭 (03/19)
  • d/dx(x↑↑n): 高さが定数のテトレーションの微分 - 数学的帰納法を用いる方法
    (09/30)
  • 全ての三角形は二等辺三角形
    優乃 (09/28)
  • 全ての三角形は二等辺三角形
    亀レス (09/28)
  • 全ての三角形は二等辺三角形
    優乃 (09/24)
  • 全ての三角形は二等辺三角形
    亀レス (09/23)
  • 【未解決】新しい演算子を創る
    $_ (09/10)
RECENT TRACKBACK
MOBILE
qrcode
PROFILE
無料ブログ作成サービス JUGEM
 
【数学・DHTML】 イージング [Easing] (4)
イージングとは,加速度を考慮したアニメーションを,コマ割を変えることにより実現する方法です.Adobe Flashで使用されています.

数学思慮を楽しんでいたところ,過去記事の『【数学・DHTML】 イージング [Easing] (3)』に応用できることが分かったので,記事を起こします.

当該過去記事の関数gを改良します.改良点は以下です.
・関数gを簡素化.(加速のときと減速のときと分けて数式を定義していたものを一つの数式で定義した.)
・関数gを高速化.(指数関数が入っていたものを取り除き,プログラムにおける関数コールを減らした.)

プログラムを書いてみると分かりますが,この関数gが一番呼ばれることが多く,性能が重視されるアニメーションアルゴリズムにおいて,簡素化・高速化するメリットは大きいです.

以下では,この関数gを求めますが,過去記事およびプログラムも含めた結論とまとめはこの記事の下部に示します.結果にだけ興味のある方は,そちらをご覧下さい.ですが,このブログでは,皆さんに考え方を学んで欲しいという,私の思いがあります.数学に興味のある方は,高校数学の範囲で十分理解できますので,過程も含めて読んで頂けると嬉しいです.
さて,関数gに関連する定義は以下です.
  s = g(t)
  tの定義域 0 ≦ t ≦ 1
  sの値域 0 ≦ s ≦ 1
求める関数gの満たすべき条件は以下です.
  1) g(0) = 0
  2) g(1) = 1
  3) g'(t) ≧ 0 (微妙ですが,言いたいのは,定義域において連続かつ単調増加関数であること)
また応用性も考慮すれば以下の条件が追加されます.
  4) gに含まれる1つ以上の既知のパラメータにより,加速・減速の程度が調整可能(g''(t)が正値/負値で調整可能)であること.

これらに関して,過去記事では,関数gを以下のように定義していました.

・加速のとき,s = g(t) = t ^ n (n ≧ 1) → グラフ [縦軸s-横軸t | n = 3.0]
・減速のとき,s = g(t) = 1 - (1 - t) ^ n (n ≧ 1) → グラフ [縦軸s-横軸t | n = 3.0]

もちろん上式は上記定義と条件を満たしますが,過去記事をご覧になれば分かる通り,説明抜きで定義しています.この記事では,新たな関数gを定義し,その計算過程も示します.

さて,関数gは,無限通りの定義ができますが,条件を考慮した上である程度の基礎式を与えなければいけません.グラフを想像して感覚で決めますので,実は,この基礎式を与える作業が一番センスを問われるところです.観点としては,できるだけ単純な式であること,です.
私は,左図のような反比例式を考えました.第2象限では加速が,第4象限では減速が表現できているように考えられます.この反比例式を拡大・縮小,平行移動すれば,目的とする関数gが得られそうです.
ただし,この式はx = 0において不連続ですし,直線(等速を表現)はどこにも見当たりませんが,今の段階では考えません.(あとで解決されます.)

この反比例式において,条件1)2)4)より,未知数を3つ以上含めることができることを考慮し,以下に示す式で考えます.

  s = g(t) = -1 / (a(t - b)) + c …
  ただし,a > 0

複雑に見えるかも知れませんが,反比例式 s = -1 / at をt方向にb,s方向にcだけ平行移動しただけの関数です.

この式をa, b, c について解きますが,上記関数gが満たす条件を踏まえて,以下の条件を与えます.
  1) g(0) = 0
  2) g(1) = 1
  3) g'(t) ≧ 0
  4) g(p) = q (0 < p < 1, 0 < q < 1)

4)の条件が肝です.既知の値p, qによって,加減速の程度を調整することを意図しています.左上図および左図を参照して下さい.左上図ではqを大きくとり,減速に.左図ではqを小さくとり,加速になっています.

3)の条件に関してはー阿鰐犠魴錣頬たします.以下.
  g'(t) = 1 / ((a(t - b))^2) > 0

よって,条件1), 2), 4)より
  g(0) = 1 / ab + c = 0
  g(1) = -1 / (a(1 - b)) + c = 1
  g(p) = -1 / (a(p - b)) + c = q
これをa, b, c について解いて,
  a = … (求めなくてもよいので,略 f^^;)
  b = (p / (p - q)) * (1 - q)
  c = -(q / (p - q)) * (1 - p)
  ただし,p ≠ q
よって,
  ∴s = g(t) = -q(1 - p)t / ((p - q)t - p(1 - q)) …

また,p = qとして解くと,s = g(t) = tとなる.これは,⊆阿p = qとおいたときと一致し,0 < p < 1, 0 < q < 1を満たす任意のp, qにおいて成り立つ.

さて,ここからは加速減速移動アルゴリズムに適用する話です.
(詳しい説明は省きますが)⊆阿砲いて,p < qのとき加速となり,p > qのとき減速となり,p = qのとき等速となります.
パラメータが二つあるのは少し冗長なので,pを固定値で考えます(実は,より汎用的に冗長に定義しただけで,効果は変わりません).
直感的にpの値を決めますが,0と1の半分でなんとなく良さそうなp = 0.5の場合を考えます.

⊆阿砲いて,p = 1/ 2のとき,

  s = g(t) = qt / ((2q - 1)t + (1 - q)) … 

  0.0 < q < 0.5のとき,加速
  0.5 < q < 1.0のとき,減速
  q = 0.5のとき,等速

(左上図および左図参照)

式について,qに上限値/下限値が存在しないため(∵0 < q < 1の開区間),このままではプログラムでは扱いづらいです.よって,qをdによる関数とみなし,以下のように定義し,上下限値を与えます.(左図参照)

  q(d) = (1 - k) / 2 + kd
  ただし,0 ≦ d ≦ 1

ここで,kは0 < k < 1を満たす固定値です.適当なkを決めることにより,qの値域が決まり,(1 - k) / 2 ≦ q ≦ (1 + k) / 2となります.
qで加速・減速の程度を調整するようにしていたものが,この瞬間dによって調整するようになったことに注意が必要です.(0 ≦ d ≦ 1で,dが小さいとき加速,dが大きいとき減速,dが0のとき等速.)

ほぼ,これで終わりなのですが,Adobe Flashでは,加速・減速の程度を-100以上+100以下で表現しますので(-100で加速,+100で減速,0で等速),これに倣ってdを再定義します.

  d(v) = (1 / 200)v + 1 / 2
  ただし,-100 ≦ v ≦ +100

0 ≦ d ≦ 1で調整していたものを,-100 ≦ v ≦ +100のvで調整できるように変換しただけです.まとめると以下となります.

  s = g(t) = qt / ((2q - 1)t + (1 - q))
  q(d) = (1 - k) / 2 + kd
  d(v) = (1 / 200)v + 1 / 2
  ただし,
  kは,0 < k < 1を満たす固定値
  vは,-100 ≦ v ≦ +100

少し式が多くなったので,q, dを展開してまとめると以下になります.

  s = g(t) = (100 + kv)t / (2kvt + 100 - kv)
  ただし,
  kは,0 < k < 1を満たす固定値
  vは,-100 ≦ v ≦ +100

kについてそれほど触れていませんでしたが,kはvの変化による加速・減速の効果の感度を示します.kが大きいほど(小さいほど),vの変化に対して加速・減速の効果が強く(弱く)現れます.kは大きい値(0.95くらい)が良いと思います.

【結論】

軌跡x = x(t), y = y(t)が与えられているとき,

  x = x(s)
  y = y(s)
  s = (100 + kv)t / (2kvt + 100 - kv)

  ただし,0.0 ≦ t ≦ 1.0.
  kは,0 < k < 1を満たす固定値.
  vは,-100 ≦ v ≦ +100であり,小さいほど加速,大きいほど減速,0のとき等速.

とすれば良い.

【プログラム例】

直線運動で考えます.始点を(x0, y0),終点を(x1, y1)とすれば,以下の式で表されます.
  x(t) = x0 + (x1 - x0) * t
  y(t) = y0 + (y1 - y0) * t
  ただし,0 ≦ t ≦ 1

このとき,加速・減速を考慮した式は以下となります.
  x(s) = x0 + (x1 - x0) * s
  y(s) = y0 + (y1 - y0) * s
  s = (100 + k * v) * t / (2 * k * v * t + 100 - k * v)
  ただし,0 ≦ t ≦ 1
  kは,0 < k < 1を満たす固定値.
  vは,-100 ≦ v ≦ +100であり,小さいほど加速,大きいほど減速,0のとき等速.

→直線運動のサンプルプログラムはこちらです.
→螺旋運動のお遊びプログラムはこちら(フリーズする可能性あり).

関連:
イージングの考え方
【数学・DHTML】 イージング [Easing] (1)
【数学・DHTML】 イージング [Easing] (2)
【数学】 イージングロジックメモ
【数学・DHTML】 イージング [Easing] (3)
【DHTML】 加速・減速を考慮したアニメーションプログラム
【数学・DHTML】 イージング [Easing] (4)
【数学・DHTML】 イージング [Easing] (5)
コメント
コメントする









 
トラックバック
この記事のトラックバックURL
http://blog.graviness.com/trackback/712749
 

(C) 2018 ブログ JUGEM Some Rights Reserved.