Closed22

3次ベジェ曲線によるイージング実装メモ

miyanokomiyamiyanokomiya

単射にするには制御点のx値に制限が必要。
c0.x <= c1.x <= c3.xc0.x <= c2.x <= c3.x

単調にしたい場合はy値にも同様の範囲制限が必要。確実に0 ~ 1範囲に収めたいときなどに。

miyanokomiyamiyanokomiya

肝心のベジェ曲線からy = f(x)というイージングを求めるには3次方程式を解くしかなさそう。媒介変数にx入れたらいいのかと思いきや媒介なのでx軸とは対応していない。
単射という条件のもとで簡易な解法ないものか。

miyanokomiyamiyanokomiya

人気のありそうなパッケージ。関連情報色々書いてくれている。

https://github.com/gre/bezier-easing#readme

このリンクにもあるようにfirefoxなども3次方程式から解いているらしいのでやはり抜け道はなさそう。

http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/

自作にこだわらず上のパッケージに頼ってしまうのがよさそう。中身もかなり軽量化されている。

miyanokomiyamiyanokomiya

UE4のイージング情報。
https://historia.co.jp/archives/1976/

やはり汎用的なベジェではなくある程度形状の決まったイージングを用意しておくのが主流か。
しかしBlenderではベジェイージングがデフォルトになっている。

miyanokomiyamiyanokomiya

いやこれよく読むとやっぱり媒介変数tについて数列で求めていく手法ではないか。
そしてこの関数はキーフレームの補間に使われていそうな気配がない。

miyanokomiyamiyanokomiya

やはり抜け道はなさそう。ゲームエンジンが積極的に使っていないことが証拠だろう。

miyanokomiyamiyanokomiya

イージング系ライブラリだと始点と終点の比率を扱うため、2点の値を同じにしての変形ができない。

miyanokomiyamiyanokomiya

そもそも求めているものが0 => 1へ向かうイージングではなかったのか。分からなくなってきた。

miyanokomiyamiyanokomiya

解くしかない。
X(t) = X0tについて解いて、Y(t)を求める。

X(t) - X0 = 0の方程式はこのあたり。Y(t)も形は同様。
https://stackoverflow.com/questions/11302937/finding-y-given-x-on-a-cubic-bezier-curve

解き方参考サイト。
冒頭の条件を満たしているベジェ曲線から求めた3次方程式なら必ず実数解が1つと虚数解2つ or 3重解の場合になってくれる。なってくれないならどこかがおかしい。
冒頭の条件は0 <= t <= 1の範囲内に解がただ1つあることを保証しているだけ。
全ケースを巡って実数解を求め、そのうち範囲内に収まっているものを採用しないといけない。

① p=q=0:実数解1個(3重解)の場合
② D>0:実数解1個 虚数解2個の場合
③ D=0(p≠0またはq≠0):実数解2個(2重解)の場合
④ D<0:実数解3個の場合

https://fermiumbay13.hatenablog.com/entry/2019/04/13/145935

miyanokomiyamiyanokomiya

落着と思いきやエラーが起きてしまった。
このケースも考えなくてはいけないかもしれない。

④ D<0:実数解3個の場合

miyanokomiyamiyanokomiya

冒頭の条件だと0 <= t <= 1の区間でのみt -> xを単射にできる。
つまりX(t) - X0 = 0の解となるtはその区間外なら複数個あっても不思議はない。

miyanokomiyamiyanokomiya

いけてそう。エッジケースまだ残ってたら使ってればそのうち見つかるだろう。

このスクラップは2021/04/02にクローズされました