もうすぐお正月ですね。お正月といえばかまぼこです。
かまぼこ形(ベジェ曲線と直線による複合図形)の面積を求めてみましょう。
※PostScriptやSVGなどで用いられる汎用的な図形表現を想定しています。
準備
直線と原点で囲まれた三角形の面積
図のような、直線と原点で囲まれた三角形の面積は、2つのベクトル $\overrightarrow{\boldsymbol{O}\boldsymbol{P}_1}$ と $\overrightarrow{\boldsymbol{O}\boldsymbol{P}_2}$ の外積(ここでは平面幾何における外積でありスカラー量)の$1/2$になります。
S_{1,2}=\frac{1}{2}(x_1 y_2-x_2 y_1)
通常、面積としては絶対値をとりますが、複合図形の計算に用いる場合は符号付きのまま総和をとる必要があるので、ここでは絶対値をとらずに符号付き面積とします。符号は原点に対する回転方向を表し、原点に対して$\boldsymbol{P}_2$が$\boldsymbol{P}_1$より反時計まわりの位置にある場合は正になり、時計まわりの位置にある場合は負になります。
ベジェ曲線と原点で囲まれた図形の面積
図のような、ベジェ曲線と原点で囲まれた図形の面積は、折線近似で求める方法と、ガウス・グリーンの定理を用いて求める方法があります。
折線近似
ベジェ曲線を細かく分割して折線近似し、個々の折線と原点で囲まれた三角形の面積を合計することで図形の面積の近似値を求めます。
分割が多いほど近似精度が高くなりますが、計算量は増大します。
以下のグラフは上の図のベジェ曲線について、折線近似による面積の精度を試算した例です。横軸は分割数、縦軸は誤差率(絶対値)です。各軸はいずれも対数目盛です。
ガウス・グリーンの定理
以下の図のような閉図形(始点と終点が重なっている)については、グリーンの定理により面積を求めることができます。

一方で、開図形(始点と終点が重なっていない)に対しては、ガウス・グリーンの定理により面積を求めることができます。(※グリーンの定理の応用の範疇ととらえ、単にグリーンの定理とする場合もあります)
ガウス・グリーンの定理では、$ \alpha \leq t \leq \beta $ の範囲でtの増加とともに $(x(t),y(t))$ が原点中心に反時計回りに動くとき,動径が掃いた部分の面積は、
S=\int_{\alpha}^{\beta} \frac{1}{2}(xy'-yx')dt
となります。反対に、原点中心に時計回りに動くと負になります。
ベジェ曲線では $\alpha=0$、$\beta=1$ です。
ベジェ曲線では途中で原点中心に動く方向が逆転する場合があり、その場合の面積は以下の例のように算出されます。赤色は原点中心に反時計回りに動いて正の面積値が算出される対象の領域、青色は原点中心に時計回りに動いて負の面積値が算出される対象の領域を表します。両者の合計は、1番目の例では青色の領域はキャンセルされ消滅しますが、2番目の例では赤色と青色両方の領域が残り、各領域の符号付き面積の合計が計算結果になります。
| 反時計回り | 時計回り | 合計 |
|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
この方法を実装するためにはベジェ曲線の式をガウス・グリーンの定理の定義式にあてはめて展開します。3次ベジェ曲線は以下の3次多項式で表され、微分や積分は容易です。
\begin{aligned}
x(t) &= (-t^3+3t^2-3t+1)x_1+(3t^3-6t^2+3t)x_2+(-3t^3+3t^2)x_3+t^3x_4 \\
y(t) &= (-t^3+3t^2-3t+1)y_1+(3t^3-6t^2+3t)y_2+(-3t^3+3t^2)y_3+t^3y_4
\end{aligned}
容易といっても、手計算だと途中で項数が多くなった際に誤りが生じやすいので、適当なツールを用いるほうが得策です。Sage Mathだと以下のようになります。
var ('t')
var ('x1 x2 x3 x4')
var ('y1 y2 y3 y4')
x=(-t^3+3*t^2-3*t+1)*x1+(3*t^3-6*t^2+3*t)*x2+(-3*t^3+3*t^2)*x3+t^3*x4
y=(-t^3+3*t^2-3*t+1)*y1+(3*t^3-6*t^2+3*t)*y2+(-3*t^3+3*t^2)*y3+t^3*y4
s=integral((x*diff(y,t)-y*diff(x,t))/2,t,0,1)
s
-1/20*(6*x2 + 3*x3 + x4)*y1 + 3/20*(2*x1 - x3 - x4)*y2 + 3/20*(x1 + x2 - 2*x4)*y3 + 1/20*(x1 + 3*x2 + 6*x3)*y4
行列形式に直すと以下の通りです。
S_{1,2,3,4}=
\frac{1}{20}
\begin{bmatrix}
x_1 & x_2 & x_3 & x_4
\end{bmatrix}
\begin{bmatrix}
0 & 6 & 3 & 1 \\
-6 & 0 & 3 & 3 \\
-3 & -3 & 0 & 6 \\
-1 & -3 & -6 & 0
\end{bmatrix}
\begin{bmatrix}
y_1 \\
y_2 \\
y_3 \\
y_4
\end{bmatrix}
複合図形の面積を求める
- 複数の直線やベジェ曲線で輪郭が構成された複合図形については、構成要素ごとに符号付き面積を求め、合計することで面積を求めることができます。
- 面積の符号は、閉図形の輪郭が反時計回りだと正になり、時計回りだと負になります。
| 要素1の面積 | 要素2の面積 | 要素1と2の面積の合計 | |
|---|---|---|---|
| 例1 | ![]() |
![]() |
![]() |
| 例2 | ![]() |
![]() |
![]() |
| 例3 | ![]() |
![]() |
![]() |
応用
ベジェ曲線の始点と終点を直線で結んだかまぼこ形(上の例2や例3)の面積は、ひとつの行列計算で求めることもできます。
\begin{aligned}
S &= S_{1,2,3,4}+S_{4,1}
\\&=
\frac{1}{20}
\begin{bmatrix}
x_1 & x_2 & x_3 & x_4
\end{bmatrix}
\begin{bmatrix}
0 & 6 & 3 & 1 \\
-6 & 0 & 3 & 3 \\
-3 & -3 & 0 & 6 \\
-1 & -3 & -6 & 0
\end{bmatrix}
\begin{bmatrix}
y_1 \\
y_2 \\
y_3 \\
y_4
\end{bmatrix}
+\frac{1}{2}(x_4 y_1-x_1 y_4)
\\&=
\frac{1}{20}
\begin{bmatrix}
x_1 & x_2 & x_3 & x_4
\end{bmatrix}
\begin{bmatrix}
0 & 6 & 3 & -9 \\
-6 & 0 & 3 & 3 \\
-3 & -3 & 0 & 6 \\
9 & -3 & -6 & 0
\end{bmatrix}
\begin{bmatrix}
y_1 \\
y_2 \\
y_3 \\
y_4
\end{bmatrix}
\end{aligned}
参考文献
-
deq notes
平面幾何におけるベクトル演算 - 内積と外積
http://www.deqnotes.net/acmicpc/2d_geometry/products -
Reddit
r/learnmath -- How do you find the area under a cubic Bezier curve?
https://www.reddit.com/r/learnmath/comments/194nj7a/how_do_you_find_the_area_under_a_cubic_bezier/?rdt=35983 -
Wikipedia - Green's theorem
https://en.wikipedia.org/wiki/Green%27s_theorem -
高校数学の美しい物語 > ガウスグリーンの定理の入試への応用
https://manabitimes.jp/math/900




















