• 要点
  • 絵描き
  • イメージ
  • 数式
  • その他

ベジェ曲線とは

学習の道標

目次
  • 要点:ポイントまとめ
  • 絵描き《文系》:Illustratorで描きます
  • イメージ《文系》:描かれ方の仕組みを分かる
  • 数式:定義式を理解する

◆参考文献

  • 岡本健太郎,アートで魅せる数学の世界,技術評論社

ベジェ曲線

平面内の点 $\mathbf{P}_0$, $\mathbf{P}_1$, $\ldots$ , $\mathbf{P}_n$ について,次の式で表される曲線を $n$次ベジェ曲線という。

$$\displaystyle \mathbf{P}(t) = \sum_{k=0}^{n} {}_n \mathrm{C}_k (1-t)^{n-k}t^k \mathbf{P}_k$$

※点 $\mathbf{P}_0$, $\mathbf{P}_1$, $\ldots$ , $\mathbf{P}_n$ を制御点という。

チェックテスト

線分の内分点

Illustratorで描画

Illustratorでベジェ曲線を利用しているところ

こんな図が簡単に描けるよ!

用語の整理

ベジェ曲線は、コンピュータ上で描かれる滑らかな曲線です。

ベクター形式でデザインや設計のために利用されます。

  • アンカーポイント・・・・・・ベジェ曲線の端の点(図では点AとBのこと)
  • ハンドル・・・・・・ベジェ曲線の曲がり具合を決める棒。(図では線分BHのこと)
  • 制御点・・・・・・ベジェ曲線を描くために必要な点たち(図では点A,H,Bのこと)

アンカーポイントとハンドルを指定すると滑らかな曲線が描けます。

ベジェ曲線の技法

2つのアンカーポイントで曲線の両端点を指定します。いくつかのハンドルを指定することで,曲線の曲がり具合を調整することができます。

直線の描き方

※【ハンドルがない場合】アンカーポイントを結ぶ線分がベジェ曲線

点を2つ打つだけで、線分が描けます。(アンカーポイントを指定。)

2次ベジェ曲線の描き方

※ハンドルの向きが曲線の方向(②でのハンドル)

点を2つ打ち、②の場所でハンドルを指定しました。これだけで様々な曲線が描けます。この曲線を2次のベジェ曲線といいます。

3次ベジェ曲線の描き方

※ハンドルの向きが曲線の方向(①と②でのハンドル)

点を2つ打ち、はじめの①と、あとの②の場所で両方ともハンドルを指定しました。
かなり複雑な曲線も描けます。この曲線を3次のベジェ曲線といいます。

ベジェ曲線のイメージ

ドカステリョのアルゴリズムというベジェ曲線が描かれる仕組みを紹介します。

制御点の順番を決める

次のベジェ曲線を考えます。アンカーポイントは $\mathbf{P}_0$ と $\mathbf{P}_3$ が該当します。

制御点の順番を $\mathbf{P}_0$→$\mathbf{P}_1$→$\mathbf{P}_{2}$→$\mathbf{P}_3$ とします。

STEP
1

同じ比に内分する点の作図

隣り合う制御点を $m:n$ に内分する点を作図します。

今回は、3つの点ができます。

STEP
2

同じ比に内分する点の作図

いまできた3点について,さらに隣り合う点同士を,また $m:n$ に内分する点を作図します。

今回は、2つの点ができます。

STEP
3

同じ比に内分する点の作図

いまできた2点について,さらに隣り合う点同士を,また $m:n$ に内分する点を作図します。

この作業を繰り返した結果、1点だけになりました。

この最後の点がベジェ曲線上の点と一致します。

STEP
4

他の点も作図

他の比でも同じ作業をしていって、たくさん点を作ったら、その集まりがベジェ曲線になります。

  • $m:n = 1:0$ のとき、はじめのアンカーポイントの $\mathrm{P}_0$ です。
  • $m:n = 0:1$ のとき、ゴールのアンカーポイントの $\mathrm{P}_1$ です。
STEP
5
ベジェ曲線さん

この作業をコンピュータは一瞬で行って、きれいな曲線を描きます。

ベジェ曲線の数式の導出

定義

平面内の点 $\mathbf{P}_0$, $\mathbf{P}_1$, $\ldots$ , $\mathbf{P}_n$ と $0 \leqq t \leqq 1$ について,次の式で表される曲線を $n$次ベジェ曲線という。

$$\displaystyle \mathbf{P}(t) = \sum_{k=0}^{n} {}_n \mathrm{C}_k (1-t)^{n-k}t^k \mathbf{P}_k$$

ドカステリョのアルゴリズムを数式で表して、ベジェ曲線の方程式を求めます。

3次ベジェ曲線で説明をします。4点 $\mathbf{P}_0$, $\mathbf{P}_1$, $\mathbf{P}_2$, $\mathbf{P}_3$ が制御点に該当します。

図と式を対応させます

$\mathbf{P}_0$ と $\mathbf{P}_3$ がベジェ曲線の端点(アンカーポイント)になるべき点です。

イラストレータでは、線分 $\mathbf{P}_0 \mathbf{P}_1$ と $\mathbf{P}_3 \mathbf{P}_2$ がハンドルと対応する。

制御点を順番に結ぶ線分の内部点を導きます

$\mathbf{P}_0$→$\mathbf{P}_1$ と $\mathbf{P}_1$→$\mathbf{P}_2$, $\mathbf{P}_2$→$\mathbf{P}_3$ の間をそれぞれ $m: n = t : 1-t$ に内分する点を $\mathbf{P}_{1,0}(t)$, $\mathbf{P}_{1,1}(t)$,$\mathbf{P}_{1,2}(t)$ とします:

  • $\mathbf{P}_{1,0}(t) = (1-t) \mathbf{P}_0 + t\mathbf{P}_1$
  • $\mathbf{P}_{1,1}(t) = (1-t) \mathbf{P}_1 + t\mathbf{P}_2$
  • $\mathbf{P}_{1,2} (t)= (1-t) \mathbf{P}_{2} + t\mathbf{P}_3$
さっき作った点で同じことをします

いまできた点について,$\mathbf{P}_{1,0}$→$\mathbf{P}_{1,1}$ と $\mathbf{P}_{1,1}$→$\mathbf{P}_{1,2}$ の間をそれぞれ,また $m: n = t : 1-t$ に内分する点を $\mathbf{P}_{2,0}(t), \mathbf{P}_{2,1}(t)$ とします:

  • $\mathbf{P}_{2,0}(t) = (1-t) \mathbf{P}_{1,0} + t\mathbf{P}_{1,1}$
  • $\mathbf{P}_{2,1}(t) = (1-t) \mathbf{P}_{1,1} + t\mathbf{P}_{1,2}$
また、もう一回同じことをします

さらに,点$\mathbf{P}_{2,0}(t)$ → $\mathbf{P}_{2,1}(t)$ の間を結んで,また,$m: n = t : 1-t$ に内分する点 $\mathbf{P}(t)$ を決める:

  • $\mathbf{P}(t) = (1-t) \mathbf{P}_{2,0} + t\mathbf{P}_{2,1}$
式を整理しましょう

点 $\mathbf{P}_{2,0}(t)$ と $\mathbf{P}_{2,1}(t)$ は,今までの式を組み合わせると,初めの制御点 $\mathbf{P}_0$, $\mathbf{P}_1$, $\mathbf{P}_2$, $\mathbf{P}_3$ で表すことができる。$\mathbf{P}(t)$ をはじめの制御点で表すと,

$\mathbf{P}(t) = (1-t) \mathbf{P}_{2,0} + t\mathbf{P}_{2,1}$
$= (1-t)^3 \mathbf{P}_0$ $+3(1-t)^2 t \mathbf{P}_1$ $+3(1-t) t^2 \mathbf{P}_2$ $+ t^3 \mathbf{P}_3$
$\displaystyle = \sum_{k=0}^{3} {}_3 \mathrm{C}_k \ (1-t)^{3-k} \ t^k \ \mathbf{P}_k$

となる。

実数 $t(0 \leqq 0 \leqq 1)$ を1つ決めて,内分比 $m:n=t:(1-t)$となるように作った点が $\mathrm{P}(t)$ であった。

$t$ を0から1に動かしたときの軌跡である方程式 $\mathrm{P}(t)$ が3次ベジェ曲線である。

結論(一般化)

一般の $n$ 次ベジェ曲線の数式は次のとおりである:

$\displaystyle \mathbf{P}(t) = \sum_{k=0}^{n} {}_n \mathrm{C}_k (1-t)^{n-k}t^k \mathbf{P}_k$

ベジェ曲線さん

イメージにピッタリだね!

授業準備

色々な試行錯誤

【やってみた】illustratorのベジエ曲線でイラスト描いてみました

イラストレーターのベジエ曲線を描く楽しさを伝えます。 あと、自分でillustratorでベジエ曲線でイラストを作ったので、紹介します!授業のプリントに入れる図を作って、オシャレに表現しました。 ▶︎イラストレーター使っ […]

https://www.masulesson.com/bezier-curve-image/

ベジェ曲線をデザインして作ったもの

コメントをどうぞ