ベジェ曲線は二次曲線であり、円はそれで表現できないので正確な円は描けない。 ベジェ曲線を使って円を四分割して近似して描いているだけだ。 そのときの制御点はどこにおけばよいのだろうか?

円とベジェ曲線に関するブログ記事（日本語）で 数値解析的な議論は数あれど、 数式を使って 制御点を求めているところまでやっている頭の硬い記事は なかなか少ない。

ベジェ曲線といってもドローソフトなどで一般的に使われている三次ベジェ曲線ではなく二次ベジェ曲線をベースに解いているものの例：

幾何学的解析から解いている例：

数式を使って解いている例。本記事と内容は被る：

0.55228…?

以下、G. Adam Stanislav氏によるページを教科書にして 書く。 英語を読む気があるのなら、そちらを読んでこのページは読まないで良い。

90degree arc using Bézier

ベジェ曲線で中心角 45 度の円弧ABを近似するとき、 制御点 A', B' はどこに置くのが適切か、という問題。

ベジェ曲線頂点A,Bの座標を下記のとおりとする。

  • A: (0, 1)
  • B: (1, 0)

ベジェ曲線の制御点A'について、AA'が頂点Aでの円の接線となるようにするので y座標はAと同じ1である。 制御点B'も同様に、BB'が頂点Bでの円の接線となるようにするので x座標はBと同じ1である。

対称性からAA'=BB'であるので、AA'=BB'=κとすると、 制御点A',B'の座標は下記の通りとなる：

  • A': (κ, 1)
  • B': (1, κ)

ベジェ曲線の定義より、ベジェ曲線上の任意の点はパラメータ u(0≤u≤1) u(0\leq u \leq 1) を使って、下記の通りとなる：

P⁡(u)=A⁢(1-u)3+A′⁢3⁢u⁢(1-u)2+B′⁢3⁢u2(1-u)+B⁢u3 \bm{P}(u)=\bm{A}(1-u)^3+\bm{A}'3u(1-u)^2+\bm{B}'3u^2(1-u)+\bm{B}u^3 (1.1)

ベジェ曲線の中間点Cはu=1/2として

P⁡(12)=A8+3⁢A′8+3⁢B′8+B8\bm{P}\left(\frac{1}{2}\right)=\frac{\bm{A}}{8}+\frac{3\bm{A}'}{8}+\frac{3\bm{B}'}{8}+\frac{\bm{B}}{8} (1.2)

となるが、ここが円弧の中心点になるようにする。

頂点Cの座標はCOAのなす角度が45度であることから下記の通りである：

C=(22,22)\bm{C}=(\frac{\sqrt{2}}{2}, \frac{\sqrt{2}}{2}) (1.3)

(1.2)と(1.3)についてx座標成分について解くと、

22=0+38κ+38+1842=3κ+4κ=4⁢(2-1)3\begin{aligned} \frac{\sqrt{2}}{2}&=&0+\frac{3}{8}\kappa+\frac{3}{8}+\frac{1}{8}\\ 4\sqrt{2}&=&3\kappa+4\\ \kappa&=&\frac{4\left(\sqrt{2}-1\right)}{3} \end{aligned} (1.4)

κの値を数値で求めると

κ=4(2-1)3=0.55228474983⋯\kappa = \frac{4\left(\sqrt{2}-1\right)}{3}=0.55228474983\cdots (1.5)

以上で、ベジェ曲線で円弧を描くときに使う例の数値を導き出せた。

まとめ

ドローソフトなどでベジェ曲線で描いている円は、下記特徴がある：

  • 四分割してベジェ曲線で描いているが、その端点の他に真ん中も正確な位置である（45度づつに正確なポイントがある）
  • 制御点は頂点から半径の0.55228…倍の位置にある。

余談

このκの値の暗記法があるらしい。 必要か?

Fortunately, the formula to derive kappa is very simple: Just remember the phrase “As simple as 1-2-3-4”. That will help you in remembering the full formula which I will describe verbally:

Subtract one
from square root of two,
divide the result by three,
and multiply by four.

参考文献