Graviness Blog

算数・数学・科学・電脳・雑記・アホの順の密度で記事が構成されます。
<< May 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] (3)
【DHTML】 イージング [Easing] (1)【DHTML】 イージング [Easing] (2)などで散々取り上げた加減速を考慮したアニメーションですが,(結果は同じですが)異なるアプローチで実現できることに気付きました(逆になぜ今まで気付かなかったのか・・・).

今までのことは全て忘れて下さい,というようなものです.以下に示します.
xを,ある関数fによって得られる“位置”を表す変数とする.
fは変数t(範囲は[0.0, 1.0])を含む関数である.このときxは,
  x = f(t)
と書ける(tは,時間に対して線形的に変化するとする).

例えば,fが等速直線運動のアルゴリズムを持つ場合,x_0を始点,x_1を終点とするとき,
  x = f(t) = x_0 + (x_1 - x_0) * t ・・・
  0.0 ≦ t ≦ 1.0
である.

これに対し,加速・減速を実現する方法を【DHTML】 イージング [Easing] (1)【DHTML】 イージング [Easing] (2)で述べてきたわけですが,結論の式を書いておくと,

1) 加速のとき
  x = f(t) = x_0 + (x_1 - x_0) * t ^ n ・・・
  ただし,0.0 ≦ t ≦ 1.0,n ≧ 1.0
  → グラフ [縦軸x-横軸t | x_0 = 0.0, x_1 = 2.0,n = 3.0]
2) 減速のとき
  x = f(t) = x_1 - (x_1 - x_0) * (1 - t) ^ n ・・・
  ただし,0.0 ≦ t ≦ 1.0,n ≧ 1.0
  → グラフ [縦軸x-横軸t | x_0 = 0.0, x_1 = 2.0,n = 3.0]

となります.ここまでは今までの話です.

さて,これらの式を算出するまでのアプローチとして,あくまでもxの軌道のグラフを変化させることを中心に考えてきたわけですが,これとは異なり,「入力tを変化させることで,xを変化させる」ことを考えてみました.

つまり,
  x = f(s)
  s = g(t)
とし,関数gのアルゴリズムを考えることです(sはtを引数にもつ関数gによって得られる値となります).

ここまで来たらあとはgをどうするかです.gは加速のとき,以下のように定義します.

  s = g(t) = t ^ n
  n ≧ 1.0
  → グラフ [縦軸s-横軸t | n = 3.0]

また,減速のとき(詳しい計算は省きます.上記gをもとに平行移動やら,反転やらをすると減速を意味する下記gになります.)

  s = g(t) = 1 - (1 - t) ^ n
  n ≧ 1.0
  → グラフ [縦軸s-横軸t | n = 3.0]

となります.よって,これを,紡綟すると,

1) 加速のとき
  x = f(s) = x_0 + (x_1 - x_0) * s ・・・
  s = g(t) = t ^ n
  ただし,0.0 ≦ t ≦ 1.0,n ≧ 1.0
  → グラフ [縦軸x-横軸t | x_0 = 0.0, x_1 = 2.0,n = 3.0]
2) 減速のとき
  x = f(s) = x_0 + (x_1 - x_0) * s ・・・
  s = g(t) = 1 - (1 - t) ^ n
  ただし,0.0 ≦ t ≦ 1.0,n ≧ 1.0
  → グラフ [縦軸x-横軸t | x_0 = 0.0, x_1 = 2.0,n = 3.0]

となります.い鯏験すると△法キイ鯏験するとになります.
加速でも減速でもfの形は変化しないことに注意です.gを定義することで,あらゆるfに対し,fは変更させずに加速・減速が実現できます.

もう一つ例を挙げれば,等速円運動をする関数は

  x(t) = a * cos(2 * π * t + φ) + x_c
  y(t) = a * sin(2 * π * t + φ) + y_c

などのように表現できますが,これを加速させながら移動させたい場合,

  x(s) = a * cos(2 * π * s + φ) + x_c
  y(s) = a * sin(2 * π * s + φ) + y_c
  s(t) = t ^ n

となります.減速のときは,

  x(s) = a * cos(2 * π * s + φ) + x_c
  y(s) = a * sin(2 * π * s + φ) + y_c
  s(t) = 1 - (1 - t) ^ n

です.やはり大元となるx, yの形は変化していません.

---

結論

軌跡x = x(t),y = y(t) [0.0 ≦ t ≦ 1.0]が与えられているとき,

1) 加速時
  x = x(s)
  y = y(s)
  s = t ^ n
  ただし,0.0 ≦ t ≦ 1.0,n ≧ 1.0
2) 減速時
  x = x(s)
  y = y(s)
  s = 1 - (1 - t) ^ n
  ただし,0.0 ≦ t ≦ 1.0,n ≧ 1.0

とすれば良い.

また,y = f(x)の形で与えられているとき,
  x = t;
  y = f(t)
と変換して,上記を適用する(ただし,tの定義域は考える必要がある).


---

以上のような考え方をプログラムに取り入れたものは次回

関連:
イージングの考え方
【数学・DHTML】 イージング [Easing] (1)
【数学・DHTML】 イージング [Easing] (2)
【数学】 イージングロジックメモ
【数学・DHTML】 イージング [Easing] (3)
【DHTML】 加速・減速を考慮したアニメーションプログラム
【数学・DHTML】 イージング [Easing] (4)
【数学・DHTML】 イージング [Easing] (5)
コメント
from: むいむい   2005/11/24 1:56 PM
あああアニメのオハナシだと思って
とびついたらムズカシすぎる数式!!
見えない 聞こえない 考えない
・・で脳をリセット(笑)
from: 優乃   2005/11/24 10:27 PM
お口直しにゲームでもどうぞ.
http://jp.shockwave.com/games/puzzle/actionpuzzle/zookeeper/play.html
from: kawamura   2005/11/25 1:46 AM
去年イージングについて読ませてもらったときは全く分からなかったんだけど、今日読んだらやっと(1)(2)までは理解できたよ。今後の仕事に活かせそうだ、ありがとー。

が、ここで取り上げてる方法のメリットがよう分からん。要は波の形は変わらないのだけど、一つ処理を被せることでメンテナンス性を高めたってこと?出直してきます。。
from: 優乃   2005/11/26 10:17 AM
メリットは,「加減速を考慮したアニメーションが作りやすくなった」ってこと.

「この軌跡で動かしたい」っていう上記関数f(t)は色んな人が作成してくれてるよね.例えば,http://www-groups.dcs.st-andrews.ac.uk/~history/Curves/Curves.html

では,これらの軌跡(= f(t))の形を維持した上で,加速・減速を考慮するときはどうする?今までは一つ一つのf(t)を分析して,加速するときにはこうして,減速するときにはこうするってf(t)を弄くり倒していたわけ.

でも,今回の考えでは,例えばある軌跡が
  x = f(t)
のように与えらている場合,加速するときには,tをsに置き換えて
  x = f(s)
  s = t ^ n
とするだけで良いようになった.

一つ具体例を挙げると,上記サイトのhttp://www-groups.dcs.st-andrews.ac.uk/~history/Curves/Cycloid.htmlでは,
  x = a * t - h * sin(t)
  y = a - h * cos(t)
が与えられている.これを加速させながら移動する場合,tをsに置き換えて,
  x = a * s - h * sin(s)
  y = a - h * cos(s)
  s = t ^ n
とすれば良い.
※だたし,tの定義域は都度考える必要がある.
from: kawamura   2005/11/26 11:54 PM
なるほどー、以下に【DHTML】 イージング [Easing] (2)のファイルを修正したモノをアップしてみたんだけど、要は、f( s )の中の処理を簡単に取り替えられるってわけね。

http://www.enneaplanet.com/temp/graviness/edging.html

たしかに良いカモ。数学・物理って奥が深いねぇ。楽しくなってきた。
from: 優乃   2005/11/27 12:54 AM
おっけー.問題ないです.

> 楽しくなってきた。
この言葉だけで,私はお腹いっぱいです.
コメントする









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

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