数学
ベジェ曲線
12
どのような問題がありますか?

この記事は最終更新日から5年以上が経過しています。

投稿日

更新日

Organization

ベジェ曲線の簡単なちょっと難しい話 #ベジェ曲線AC2015

この記事は#ベジェ曲線AC2015 ベジェ曲線 Advent Calendar 2015 - Adventarの13日目の記事です。

はじめに

カレンダー参加者を見る限り、イラストレーターやデザイナーの方が多いように見受けられましたが、
敢えて小難しい記事を、しかしなるべくそのような方々にも理解してもらえるように書こうと思いました。

butchi_yは数学好きなエンジニアです。

自分自身、高校生時代だったか大学入りたての頃だったか、初めてベジェ曲線を知った時は「なんか複雑な数式…」と敬遠したりしましたが、蓋を開けてみればそんなに難しい話ではありませんでした。

ベジェ曲線の定義

Wikipediaにはこう書いてあります。

制御点を B0,B1,,BN1とすると、ベジェ曲線は
P(t)=i=0N1BiJ(N1)i(t)
と表現される。ここで、 Jnitバーンスタイン基底関数のブレンディング関数である。
Jni(t)=(ni)ti(1t)ni
t0 から 1 まで変化する時、B0BN1 を両端とするベジェ曲線が得られる。一般には両端以外の制御点は通らない。ベジェ曲面においては各制御点のX座標とY座標の値が一定となり、Z座標の値で制御点を扱う。

何言っているかさっぱりです。(ちゃんと読んでくれたけど理解できなかった方、無駄な時間を使わせてしまってごめんなさい。)

なんでこんな難しい説明になっているかというと、一般のN次ベジェ曲線について一般化させようとしたからなんですね。

N=3のときに、ちゃんと2項係数を展開させて、ベクトル表記ではなくxyのそれぞれで表記すればこうです。

x(t)=t3x4+3t2(1t)x3+3t(1t)2x2+(1t)3x1
y(t)=t3y4+3t2(1t)y3+3t(1t)2y2+(1t)3y1

そう、3次ベジェ曲線はtを媒介変数とした3次多項式にすぎません。

参考: 3次ベジェ曲線の数式

CSSのcubic-bezierの場合

CSSにはcubic-bezierというイージング関数があります。

ベジェ曲線はイラストを描く以外に、アニメーション制御にも使われているのです。

以下はcubic-bezier.comというサイトでベジェ曲線を編集している画像です。

cubic-bezier-com.png

CSSにおいては、

cubic-bezier(x2, y2, x3, y3)

という指定になるので、最初から決まっている

(x1,y1)=(0,0),(x4,y4)=(1,1)
を先ほどの式に適用して、

x(t)=t3+3t2(1t)x3+3t(1t)2x2
y(t)=t3+3t2(1t)y3+3t(1t)2y2

と、さらに項が減ったすっきりした式になります。

それでも難しいと思ったら

具体的なベジェ曲線を与えてみましょう。

(x1,y1)=(0,0)
(x2,y2)=(0,1)
(x3,y3)=(1,0)
(x2,y2)=(1,1)

という制御点の場合、式はこうなります。

x(t)=t3+3(1t)t2
y(t)=t3+3(1t)2t

展開したらこうです。

x(t)=2t3+3t2
y(t)=4t36t2+3t

これなら自力でもグラフを描けそうじゃないですか?

実際描いてみたらこうなります。

plot -2t^3 + 3t^2, 4t^3 - 6t^2 + 3t, t = 0 to 1 - Wolfram|Alpha

plot.gif

(↑x,yそれぞれのグラフ)

parametric plot -2t^3 + 3t^2, 4t^3 - 6t^2 + 3t, t = 0 to 1 - Wolfram|Alpha

parametric_plot.gif

(↑出来上がるベジェ曲線)

ちなみにこれを陽関数(y=f(x)の形)にできないかというのが今回ベジェ曲線を考えるにあたって最初に悩んでいたことなのですが、それもある程度できなくない、という結果が出たので、いずれその話もするかもしれません。

でも、基本的には同じx軸上の直線を何度も横切るタイプの曲線とかもベジェ曲線に含まれます。
さっきの例はたまたま陽関数で表せるタイプでしたが、陽関数で表すとかなり複雑な式になります。
すべてのベジェ曲線をy=f(x)で表すのが難しいから、基本的には媒介変数を使うというのもベジェ曲線理解のヒントになるかと思います。

終わりに

このカレンダーの参加者はベジェ愛がある人が推奨されているっぽいですが、
僕は一時期アンチベジェ曲線だったことがあり、代替となる表現方法を模索したりもしました。
でもアフィン不変性とか考えるとやっぱり好きなのかもしれません。

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
butchi_y
博士(工学)のフロントエンドエンジニアです。 ローレベルな言語仕様から、アニメーション演出まで幅広く興味を持ってます。 得意な言語はMathematica、JavaScript、ActionScriptです。 CGや音楽にもそれなりに詳しいです。
kayac
古都鎌倉から新しい技術と面白いサービスを、次々にリリースする面白法人カヤックのフロントエンジニアチーム
この記事は以下の記事からリンクされています

コメント

この記事にコメントはありません。
あなたもコメントしてみませんか :)
ユーザー登録
すでにアカウントを持っている方はログイン
12
どのような問題がありますか?
ユーザー登録して、Qiitaをもっと便利に使ってみませんか

この機能を利用するにはログインする必要があります。ログインするとさらに下記の機能が使えます。

  1. ユーザーやタグのフォロー機能であなたにマッチした記事をお届け
  2. ストック機能で便利な情報を後から効率的に読み返せる
ユーザー登録ログイン
ストックするカテゴリー