ベジェ曲線エクスプローラー

ベジェ曲線をインタラクティブに探索します。制御点をドラッグして、デカステリョ構成の様子を確認してください。

計算例 — ベジェ曲線エクスプローラー

次数	3
B(0.50)	(250.0, 150.0)
制御点	4

ページを開いたときに計算機が表示する値です。上の入力を変えると再計算されます。

インタラクティブシミュレーションを読み込んでいます...

中間の制御点には決して到達しない 🖖

内側の制御点を遠くへドラッグすると、曲線はそちらへ傾きますが決して届きません。内側の点のバーンスタイン重みには厳しい上限があります。三次のプリセットでは b₁,₃(t) = 3t(1−t)² であり、t = 1/3 で最大となりますがその値はわずか 4/9 です。一方、両端の点は t = 0 と t = 1 でちょうど 1 の重みを持ちます。だからこそ曲線は端点の上から正確に始まり、正確に終わるのです。次数を上げると内側の影響はさらに小さくなり、5 次のプリセットでは上限は 0.410 と 0.346 になります。デザイナーが高次の曲線を一本あてはめるのではなく短い三次曲線をつなぐのはこのためです。制御点を増やせば増やすほど、一つひとつができることは減ってゆきます。

繰り返しの平均で角を削る 🖖

なめらかな曲線の裏には、たった一つの素朴な操作が何度も繰り返されています。それは2点を結ぶ直線上の平均を取ることです。ド・カステリョのアルゴリズムは、制御点を受け取り、各線分を割合 t で内分する点を求め、その新しい点で同じ操作を繰り返し、最後に1点だけが残ります。それが B(t) です。スライダーを動かすと、足場全体が縮んで1点になり、その点が曲線をなぞる様子が見られます。

名付けられたのは別の発明者 🖖

このツールが動かすアルゴリズムは、1959年にシトロエンのポール・ド・カステリョが考案しました。ライバル自動車メーカーのルノーでピエール・ベジェが同様の研究を発表する3年前のことです。シトロエンはド・カステリョの研究を企業秘密として未公開のままにしたため、曲線にはベジェの名が付きました。二人とも自動車の鋼板を成形する技術者であり、フォントやアニメーションの数学は工場で生まれたのです。

ベジェ曲線 — 制御点に強制できること、できないこと

いま描いているのはどのベジェの型か

制御点をいくつ使うかで、そもそも到達できる形が決まり、どこに置くかでそのうちどれになるかが決まります。3 点では放物線の一部しか描けません。真ん中の点をどう動かしても、S 字も尖点もループも作れないのです。4 点目を足すとその三つすべてが可能になり、しかもそれらを隔てる境界は計算で求められます。下に並ぶ三つの 3 次曲線は P0、P1、P2 を共有し、違うのは P3 だけ。3 次曲線をループから尖点を経て普通の S 字へと運ぶ、まさにその点です。

2 次 — 3 点なら、必ず放物線 κ ≠ 0 ∀t

変曲点をもつ 3 次 — 2 次には作れない S 字 κ(0.5) = 0

尖点 — 曲線が止まって引き返す場所 B′(0.5) = (0, 0)

ループ — 一つの点を二度訪れる B(0.211) = B(0.789)

次数 5 — 点が増えるほど、制御は減る min |B − P₃| = 134

2 次 — 3 点なら、必ず放物線

わかっていること: 制御点 3 個、次数 2。曲線は P0 から P1 をまっすぐ狙って出発し、P1 の方向からまっすぐ P2 に到着します。真ん中の一点が、手にできるてこのすべてです。

見分け方: κ ≠ 0 ∀t

計算例: P0 (50, 250)、P1 (250, 30)、P2 (450, 250) → B(0.50) = (250, 140)。これは P1 と弦の中点 (250, 250) のちょうど中間です。曲線が P1 に 110 px より近づくことはありません。

この型を開く: 2次曲線

2 次 — 3 点なら、必ず放物線. 頂点は (250, 140)。制御点と弦のちょうど中間にあります。制御点 3 個、次数 2。曲線は P0 から P1 をまっすぐ狙って出発し、P1 の方向からまっすぐ P2 に到着します。真ん中の一点が、手にできるてこのすべてです。 — 頂点は (250, 140)。制御点と弦のちょうど中間にあります。

変曲点をもつ 3 次 — 2 次には作れない S 字

わかっていること: 制御点 4 個、次数 3。P1 が弦の上へ引き、P2 が下へ引きます。曲線はまず一方へ、次に他方へ曲がります。

見分け方: κ(0.5) = 0

計算例: P0 (50, 250)、P1 (150, 50)、P2 (350, 250)、P3 (450, 50) → 外積 B′ × B″ は t = 0 の正から t = 1 の負へ一直線に下がり、t = 0.50 で 0 を横切ります。よって唯一の変曲点はちょうど B(0.50) = (250, 150) にあります。

この型を開く: 3次S字

変曲点をもつ 3 次 — 2 次には作れない S 字. 曲率が t = 0.50 で 0 を横切り、(250, 150) で曲がりが反転します。制御点 4 個、次数 3。P1 が弦の上へ引き、P2 が下へ引きます。曲線はまず一方へ、次に他方へ曲がります。 — 曲率が t = 0.50 で 0 を横切り、(250, 150) で曲がりが反転します。

尖点 — 曲線が止まって引き返す場所

わかっていること: P1 と P2 を互いの向こう側へ投げ、速度の二成分が同じ瞬間に尽きるように置いた 4 点。次数 3。

見分け方: B′(0.5) = (0, 0)

計算例: P0 (100, 200)、P1 (400, 50)、P2 (100, 50)、P3 (400, 200) → x′(t) = 900(1 − 2t)²、y′(t) = 450(2t − 1) なので B′(0.50) = (0, 0)。曲線は (250, 87.5) に達し、止まり、来た向きへ戻っていきます。

見えている鋭い角は、実は形の中ではなく時刻表の中にあります。曲線を描く点は減速して完全に停止し、向きを変えます。速度がそこで 0 なので、接線の向きはそもそも定義されません。しかもここは刃の上です。ここに並ぶ 3 次曲線は三つとも P0、P1、P2 を共有し、違うのは P3 だけ。その x 座標がすべてを決めます。400 より小さければ曲線は自分と交わり、400 より大きければ変曲点が二つでき、ちょうど 400 でループは一点に縮みきります。点を引きずって尖点に当たることはまずありません。それを生む配置の面積は 0 だからです。それでも書体の描画装置は、これを扱えなければなりません。

この型を開く: 尖点

尖点 — 曲線が止まって引き返す場所. B′(0.5) = (0, 0)。描く点は (250, 87.5) で止まり、引き返します。 P1 と P2 を互いの向こう側へ投げ、速度の二成分が同じ瞬間に尽きるように置いた 4 点。次数 3。 — B′(0.5) = (0, 0)。描く点は (250, 87.5) で止まり、引き返します。

ループ — 一つの点を二度訪れる

わかっていること: 尖点とまったく同じ P0、P1、P2。ただし P3 を x = 400 から x = 280 へ引き戻し、制御多角形がより鋭く自分と交わるようにしています。次数 3。

見分け方: B(0.211) = B(0.789)

計算例: P0 (100, 200)、P1 (400, 50)、P2 (100, 50)、P3 (280, 200) → t = ½ ∓ √3/6、つまり t ≈ 0.211 と t ≈ 0.789 で B(t) = B(1 − t) となり、どちらもちょうど (220, 125) に落ちます。

自己交差とは、t と平面の対応が一対一でなくなることです。単独のベジェ曲線は次数 3 からこれをやってのけます。つなぎ合わせは要りません。しかも局所的には何の手がかりもありません。交差点での微分はまったく普通で、(220, 125) を通る二回の通過は互いの存在を知りません。だからループは、下流のあらゆる処理が恐れる型なのです。当たり判定、平行曲線、塗りつぶし、面積。どれも先に交差点を見つけなければなりません。多くの形式はループを禁じ、そこで曲線を分割することで応じます。P3 を 400 の方へ押し戻せば、二つの交差パラメータが近づいていき、ちょうど 400 で 0.5 において出会って、ループは尖点になります。

この型を開く: 3次ループ

ループ — 一つの点を二度訪れる. パラメータは二つ、点は一つ。t ≈ 0.211 と t ≈ 0.789 はどちらも (220, 125) を与えます。尖点とまったく同じ P0、P1、P2。ただし P3 を x = 400 から x = 280 へ引き戻し、制御多角形がより鋭く自分と交わるようにしています。次数 3。 — パラメータは二つ、点は一つ。t ≈ 0.211 と t ≈ 0.789 はどちらも (220, 125) を与えます。

次数 5 — 点が増えるほど、制御は減る

わかっていること: 制御点 6 個、次数 5。どの点も、どの t でも重みが 0 になりません。つまりどれ一つ動かしても曲線全体が変わります。

見分け方: min |B − P₃| = 134

計算例: 6 点は y = 20 から 280 まで広がっていますが、曲線自身は y = 150 から 250 しか覆わず、P3 (300, 20) には 134 px より近づくことがありません。t = 0.5 での重みは 0.031、0.156、0.313、0.313、0.156、0.031。どの点も数に入るのに、どれも支配しません。

制御点を増やすのは制御を買う感じがして、実際には逆を届けます。次数が上がるほど重みが薄く散らばるからです。内側の点が到達できる最大の影響力は、2 次で 50 %、3 次で 44.4 %、ここでは 34.6 %。130 px 離して置いた点は、曲線をその何分の一かしか引き寄せません。さらに悪いことに、0 < t < 1 で 0 になる重みは一つもないので、片端の微調整が反対の端まで動かし、局所的な編集がまったくできません。だから誰も次数 20 のベジェ曲線を描かないのです。書体、SVG の経路、CAD の曲面は、代わりに 3 次曲線を数多くつなぎます。そうすれば各区間は局所のままで、隣どうしは継ぎ目での位置と接線だけを合わせれば済みます。

この型を開く: 5次

次数 5 — 点が増えるほど、制御は減る. 自分の制御点が y = 20 まで届いているのに、曲線は y = 150 より上へは上がりません。制御点 6 個、次数 5。どの点も、どの t でも重みが 0 になりません。つまりどれ一つ動かしても曲線全体が変わります。 — 自分の制御点が y = 20 まで届いているのに、曲線は y = 150 より上へは上がりません。

参考文献 (3)

The Bernstein basis and its weight bounds: Farouki, R. T. (2012). "The Bernstein polynomial basis: A centennial retrospective." Computer Aided Geometric Design 29(6), 379–419.
The algorithm the tool animates, and the naming: Farin, G. Curves and Surfaces for CAGD: A Practical Guide, 5th ed. Morgan Kaufmann, 2002 — de Casteljau’s algorithm, the convex-hull property and endpoint interpolation. ISBN 978-1-55860-737-8.
De Casteljau’s own account of the unpublished Citroën work: de Casteljau, P. (1999). "De Casteljau’s autobiography: My time at Citroën." Computer Aided Geometric Design 16(7), 583–586. No DOI is linked here because the record could not be resolved to one.

全プロセスの詳細解説

一方向への湾曲が止まる t = 0.50 における曲線上の点 6 ステップ
ページ上の3次曲線は、y軸が下向きに測定される500 × 300のフレーム内に制御点 P₀ = (50, 250)、P₁ = (150, 50)、P₂ = (350, 250)、P₃ = (450, 50) を持ちます。パネルには t = 0.50 における曲線上の点が表示されています。この点が、曲線がある方向への曲がりを止めて逆方向への曲がりを開始する唯一の場所であることを示しなさい。
1. t = 1/2 において、4つのバーンスタイン重みは 1/8、3/8、3/8、1/8 となるため、2つの内部点は端点の3倍の重みで寄与します。算術の全てはこれだけです: x = (50 + 450 + 1050 + 450)/8 および y = (250 + 150 + 750 + 50)/8。
  
  $B (\frac{1}{2}) = \frac{1}{8} (P_{0} + 3 P_{1} + 3 P_{2} + P_{3}) = (250.0, 150.0)$
2. 曲がり（曲率）は2階導関数であり、3次式を2回微分すると t に関して線形な式が残ります。それが構成される2つのベクトルのそれぞれは、連続する3つの制御点の2階階差です。
  
  $B^{''} (t) = 6 [(1 - t) (P_{0} - 2 P_{1} + P_{2}) + t (P_{1} - 2 P_{2} + P_{3})]$
3. それらを計算します。それらは大きさが等しく逆向きになります。これは制御多角形に関する事実であり、曲線を描画する前に得られるものです。
  
  $P_{0} - 2 P_{1} + P_{2} = (100, 400), P_{1} - 2 P_{2} + P_{3} = (- 100, - 400)$
4. したがって、2階導関数は1つの固定された方向 (100, 400) を 1 − 2t 倍したものとなります。その両成分は t = 1/2 で 0 に達し、範囲内の他のいかなる t でも 0 にはなりません。
  
  $B^{''} (t) = 6 (1 - 2 t) (100, 400) ⟹ B^{''} (\frac{1}{2}) = (0, 0)$
5. 加速度がゼロというだけでは変曲点にはなりません。完全に停止する曲線も加速度ゼロを持ちます。そこで速度を確認します。速度は (450, 0) であり、水平で明らかにゼロではないため、点はその平坦な場所で反転するのではなく、そこを通過して移動しています。
  
  $B^{'} (t) = (300 (1 + 2 t - 2 t^{2}), - 600 (1 - 2 t)^{2}) ⟹ B^{'} (\frac{1}{2}) = (450, 0)$
6. 曲率は x′y″ − y′x″ の符号をとります。展開すると括弧内が簡略化され、t に依存する2つの項が相殺されて定数 3 となり、分子は 1 − 2t に正確に比例する形だけが残ります。t に関して線形な量はゼロを1回だけ跨ぐため、この3次曲線は変曲点をちょうど1つだけ持ち、それは t = 1/2 にあります。
  
  $x^{'} y^{''} - y^{'} x^{''} = (1 - 2 t) [720000 (1 + 2 t - 2 t^{2}) + 360000 (1 - 2 t)^{2}] = 1.08 \times 1 0^{6} (1 - 2 t)$
解答

(250.0, 150.0) が曲線の唯一の変曲点です。その位置は、これらの特定の数値による偶然ではありません。2階導関数をゼロにした条件 P₃ − P₂ = P₁ − P₀ を変形すると P₀ + P₃ = P₁ + P₂ = (500, 300) となり、B(t) + B(1 − t) 自体も、反転・加算された制御点 P₀+P₃、P₁+P₂、P₂+P₁、P₃+P₀ 上の3次ベジェ曲線となります。4つの点すべてが同一の点であるため、その和はすべての t に対して定数 (500, 300) となります。1/4周での値を確認してみましょう: B(0.25) = (140.625, 162.5) と B(0.75) = (359.375, 137.5) を足すと正確にその値になります。曲線は (250.0, 150.0) に関して点対称であり、ある点を中心に半回転させても全く同じに見える形状は、その点においていずれの方向にも曲がっているはずがありません。破線の制御多角形が議論の全容を担っています。その最初と最後の線分は同じベクトル (100, −200) であるため、曲線が存在する前から変曲点は中点に位置しているのです。

$B^{''} (\frac{1}{2}) = 3 [(P_{3} - P_{2}) - (P_{1} - P_{0})] = 0 ⟺ P_{0} + P_{3} = P_{1} + P_{2}$
B(0.50) に描かれる角（微分可能な多項式による） 6 ステップ
尖点状態では P₀ = (100, 200)、P₁ = (400, 50)、P₂ = (100, 50)、P₃ = (400, 200) が使用され、パネルには B(0.50) = (250.0, 87.5) と表示されます。両方の座標は t の多項式であるため、運動は何回でも微分可能です。それにもかかわらず、描く軌跡がその点で角を持つことを示しなさい。
1. 中間パラメータにおける他の3次曲線と同じ重み: 1/8、3/8、3/8、1/8。x = (100 + 1200 + 300 + 400)/8 および y = (200 + 150 + 150 + 200)/8。
  
  $B (\frac{1}{2}) = \frac{1}{8} (P_{0} + 3 P_{1} + 3 P_{2} + P_{3}) = (250.0, 87.5)$
2. 3次ベジェ曲線の導関数は、2次バーンスタイン基底によって重み付けされた制御多角形の3つの辺から構成されます。微分において点そのものは決して必要とされず、点間のステップのみが必要です。
  
  $B^{'} (t) = 3 [(1 - t)^{2} (P_{1} - P_{0}) + 2 (1 - t) t (P_{2} - P_{1}) + t^{2} (P_{3} - P_{2})]$
3. ここでは中央の辺が逆方向に向かっています。P₁ − P₀ および P₃ − P₂ は両方とも右へ向かい、P₂ − P₁ は左へ 300 向かいます。そしてその垂直成分は 0 であるため、y において何も相殺することができません。
  
  $P_{1} - P_{0} = (300, - 150), P_{2} - P_{1} = (- 300, 0), P_{3} - P_{2} = (300, 150)$
4. 各成分をまとめると、両方とも単一の項にまとめられます。水平方向の速度は完全平方であるため決して負にはならず、垂直方向の速度は線形であり符号が変化します。これらは t = 1/2 で同時に消失し、これは描画点が完全に停止することを意味します。
  
  $x^{'} (t) = 900 (1 - 2 t)^{2}, y^{'} (t) = 450 (2 t - 1) ⟹ B^{'} (\frac{1}{2}) = (0, 0)$
5. 停止することが自動的に角になるわけではありません。一時停止を経ても方向が維持されることもあり得ます。比をとると両側から 0 に近づくため、接線は進入時にも進出時にも垂直となり、それを挟んで y′ の符号が反転します。方向は 180° 反転します。
  
  $\frac{x ^{'} ( t )}{y ^{'} ( t )} = 2 (2 t - 1) t \to \frac{1}{2} 0$
6. 2階導関数と同様に、停止は多角形に関する性質です。B′(1/2) は (P₂ + P₃) − (P₀ + P₁) の 3/4 となり、最初の辺の中点と最後の辺の中点が同一の点であるときに正確に消失します。両方とも (250, 125) です。
  
  $B^{'} (\frac{1}{2}) = \frac{3}{4} [(P_{2} + P_{3}) - (P_{0} + P_{1})] = \frac{3}{4} [(500, 250) - (500, 250)]$
解答

描画点は (250.0, 87.5) で完全に停止し、反対方向を向いて戻ってきます。パラメータ化において滑らかでない部分は一切ありません。x(t) と y(t) は3次式であり何回でも微分可能です。それにもかかわらず軌跡には鋭い角が存在します。これが曲線の連続性が2つの段階で評価される理由です。C¹ は速度が連続であるかを問い、G¹ は方向が連続であるかを問います。速度がゼロであることは前者を満たす一方で後者を打ち消します。測定可能な結果もあります。y′ = 450(2t − 1) は停止前は負、停止後は正となるため、y = 87.5 は曲線がとる最小値であり、尖点は画面上で最も高い位置となり、曲線全体がその下に閉じ込められます。P₁ と P₂ は y = 50 に位置しています。曲線はそれらから 37.5 の距離までしか近づかず、それ以上は近づけません。これが、わずか2つの内部ハンドルで3次曲線を引っ張ることの代償です。

$B^{'} (\frac{1}{2}) = 0 ⟺ \frac{1}{2} (P_{0} + P_{1}) = \frac{1}{2} (P_{2} + P_{3}) = (250, 125)$

42Math チーム · 更新 2026-07-28

公表された資料と照合しています。訂正のご指摘を歓迎します。編集方針 · 訂正

数学のレッスン一覧 →

例題

2次曲線 - 2次：次数2、頂点はB(0.50) = (250, 140)
3次S字 - 3次S字：変曲点はB(0.50) = (250, 150)
尖点 - 尖点：B(0.50) = (250, 87.5)で接線が消える
3次ループ - 3次ループ：自分と交わる3次曲線
5次 - 制御点6個からの次数5