かんたんベジェ曲線第 6 回 プログラマのための数学勉強会2016-03-19岩淵 勇樹 (@butchi_y)

自己紹介岩淵勇樹 ( IWABUCHI Yu(u)ki )

金沢大学自然科学研究科修了博士（工学）面白法人カヤック 技術部・人事部

学部 3 年で曲線を研究

この記事が元です

http://qiita.com/butchi_y/items/abb6d52fda6095b542e5

ベジェ曲線とは滑らかな曲線を描く CG 技法発明したのは車の設計者Adobe Illustrator で曲線を見かけたら

それはほぼ間違いなくベジェ曲線

Illustrator で挫折した人へThe Bézier Gamehttp://bezier.method.ac/

定義制御点を B0,B1,…,BN−1とすると、ベジェ曲線は

と表現される。ここで、 Jn i(t) はバーンスタイン基底関数のブレンディング関数である。

t が 0 から 1 まで変化する時、 B0 と BN−1 を両端とするベジェ曲線が得られる。一般には両端以外の制御点は通らない。ベジェ曲面（曲面パッチなどとも）と呼ばれるような、3次元空間内の曲面への拡張にはいくつか手法がある。たとえば、目的の曲面においてパッチの端点となる3点とその3点における接平面を指定するという方法や、4点を指定し2方向のクロスハッチングのようにして面を構成するという方法がある。

https://ja.wikipedia.org/wiki/ベジェ曲線

難しい！

具体的な数式3 次のベジェ曲線の媒介曲線表示

(x1, y1)

(x2, y2)

(x3, y3)

(x4, y4)

具体的な数式始点と終点を固定(x1, y1) = (0, 0), (x4, y4) = (1, 1)

(0, 0)

(x2, y2)

(x3, y3)

(1, 1)

具体的な数式例として具体値を設定(x2, y2) = (0, 1), (x3, y3) = (1, 0)

(0, 0)

(1, 1)(0, 1)

(1, 0)

具体的な数式例として具体値を設定(x2, y2) = (0, 1), (x3, y3) = (1, 0)

x のグラフと y のグラフをそれぞれ表示

x(t)

y(t)

t

具体的な数式例として具体値を設定(x2, y2) = (0, 1), (x3, y3) = (1, 0)

y(t)

x(t)

t

t

たしかに媒介変数！

工学応用

実用的なベジェ曲線の次数3 次のベジェ曲線

◦Illustrator◦SVG◦canvas (HTML5)◦Office ( オートシェイプ )

2 次のベジェ曲線◦Flash Player (10.3 まで )

3 次が一番よい。

こいつ

3 次ベジェ曲線の他の応用CSS アニメーション（前回のLTでの話）

まとめベジェ曲線は媒介変数プロットで

表示できる各成分の関数は 3 次なら 3 次多項式実用上は基本 3 次のベジェ曲線だけ

知っていればいい（知らなくても絵は描けるけど）

発展

横軸が時間のベジェ曲線CSS アニメーションは横軸が時間x を与えて y を出せるようにしたい

陽関数媒介変数を用いているので

y = f(x) の形ではない陽関数に変換できないか？

t を x について解いて y に代入

逆関数を求める3 次方程式の解

逆関数のプロット3 つの関数が得られる

陽関数の式y に逆関数を代入

陽関数完成プロットしてみる