› ベジェ曲線シミュレーター 戻る
数値解析

ベジェ曲線シミュレーター

わずか数個の制御点でなめらかな曲線を「形づくる」ベジェ曲線を対話的に体験するツールです。制御点 P1・P2 を動かすと、曲線の形・パラメータ t での点・接線・曲率がリアルタイムで変化し、フォント・CAD・アニメーションを支える計算幾何の基礎を直感的に理解できます。

パラメータ設定
曲線の次数
3次は制御点4個、2次は制御点3個
制御点 P1 の x 座標
制御点 P1 の y 座標
制御点 P2 の x 座標
2次曲線では使用されません
制御点 P2 の y 座標
2次曲線では使用されません
パラメータ t
曲線を評価する位置（0=始点、1=終点）
計算結果
—
B(t) の x 座標
—
B(t) の y 座標
—
曲線長（近似）
—
t での接線方向 (°)
—
t での曲率 κ
—
制御多角形の長さ
—
ベジェ曲線と De Casteljau 構成 — アニメーション

制御点（点）と制御多角形（細線）、ベジェ曲線（太線）を描画します。パラメータ t を 0→1 に掃引し、De Casteljau の内分線と点 B(t) が曲線上を移動します。

座標 vs パラメータ t
曲率 κ vs パラメータ t
理論・主要公式

$$B(t)=\sum_{i=0}^{n}\binom{n}{i}(1-t)^{n-i}t^{i}\,P_i$$

次数 n のベジェ曲線。バーンスタイン基底関数の重み付き和で、t は 0〜1 の範囲を動く。重みの合計は常に 1。

$$B(t)=(1-t)^3P_0+3(1-t)^2t\,P_1+3(1-t)t^2P_2+t^3P_3$$

3次ベジェ曲線（制御点4個）の展開形。曲線は端点 P0・P3 を厳密に補間し、内部の制御点 P1・P2 に向かって引っ張られる。

$$\kappa=\frac{|B'_x B''_y - B'_y B''_x|}{(B'^2_x+B'^2_y)^{3/2}}$$

パラメトリック曲線の曲率 κ。B'・B'' は1階・2階微分。接線方向角は atan2(B'y, B'x) で求める。

ベジェ曲線とは

🙋
「ベジェ曲線」って、Illustrator のペンツールで点をつないでグニャっと曲げる、あれですよね？あの曲線って、数学的にはどういうものなんですか？
🎓
そう、そのペンツールの正体がベジェ曲線だよ。ざっくり言うと「数個の制御点で形を決めるなめらかな曲線」なんだ。左のキャンバスを見て。両端の点 P0 と P3 は固定で、君が動かせるのは間の P1 と P2。曲線は必ず P0 から始まって P3 で終わる。でも面白いのは、間の P1・P2 は曲線が「通る点」じゃなくて、曲線を「引っ張る点」なんだ。
🙋
え、通らないんですか？P1 を動かすと曲線が一緒に動くから、てっきり通ってるのかと…
🎓
そこがベジェの肝でね。式を見ると B(t)=(1−t)³P0+3(1−t)²t·P1+3(1−t)t²P2+t³P3 となっていて、各制御点に「重み」がかかっている。t=0 のとき (1−t)³ が1で他が全部0だから B(0)=P0。t=1 なら B(1)=P3。でも途中の t では4点全部の重みが混ざるから、P1 や P2 ぴったりには来ない。引力みたいなものだね。だから P1 を上に動かすと曲線が上にふくらむ。直感どおりに動くだろう？
🙋
なるほど！じゃあ「パラメータ t」っていうスライダーは何を表しているんですか？曲線上を点が動いてますけど。
🎓
t は「曲線をどこまで進んだか」を表す 0〜1 の数だよ。t=0 が始点、t=1 が終点、t=0.5 ならだいたい真ん中あたり。ただし t=0.5 が「曲線の長さの真ん中」とは限らない——制御点の置き方で進む速さが変わるからね。キャンバスに出ている細い内分線が「De Casteljau のアルゴリズム」の構成線で、線形補間を3回繰り返すだけで B(t) が出る。これがベジェ曲線を安定に計算する標準的な方法なんだ。
🙋
線形補間の繰り返しだけで曲がった線が出るって不思議です…。あと「曲率」って結果に出てますけど、これは何の役に立つんですか？
🎓
曲率 κ は「その点で曲線がどれだけ急に曲がっているか」を表す量だよ。κ が大きいほどキツいカーブ、κ=0 なら真っ直ぐ。実務でこれが効くのは、例えば自動車のボディ曲面やフォントの輪郭。曲率が急に変化すると、光の反射がギクシャクして「安っぽい」見た目になる。デザイナーは曲率がなめらかにつながるよう制御点を調整するんだ。下の「曲率 vs t」グラフを見ると、制御点を動かすたびにカーブが滑らかに山を作るのが分かるよ。
🙋
「3次」と「2次」の切り替えもありますね。何が違うんですか？
🎓
2次ベジェは制御点が3個（P0・P1・P3）で、間の制御点が1個だけ。3次は4個で2個。制御点が多いほど形の自由度が上がる——3次ならS字みたいに曲がりの向きを途中で変えられるけど、2次は基本的に1方向にしか膨らめない。実用例だと、TrueType フォントは軽くて速い2次ベジェ、PostScript や OpenType の CFF アウトラインは表現力の高い3次ベジェ、と使い分けられているんだ。

よくある質問

いいえ。ベジェ曲線が必ず通るのは最初と最後の制御点（端点）だけです。3次ベジェなら B(0)=P0、B(1)=P3 に一致します。間の制御点 P1・P2 は曲線を「引っ張る」役割で、曲線自体はそれらを通りません。ただし曲線は必ず全制御点の凸包（convex hull）の内側に収まります。t=0 では端点の重み (1−t)³ が1で他が0、t=1 では t³ が1になるため、端点だけが厳密に補間されます。
De Casteljau のアルゴリズムは、ベジェ曲線上の点 B(t) を「線形補間の繰り返し」だけで安定に求める方法です。隣り合う制御点ペアを比 t で内分し、新しい点列を作る——これを点が1つになるまで繰り返すと、最後の点が B(t) です。3次ベジェなら4点→3点→2点→1点と3段で収束します。バーンスタイン多項式を直接計算するより数値的に安定で、曲線の t での分割にもそのまま使えるため、グラフィックスや CAD で標準的に用いられます。本ツールのキャンバスはこの構成線をそのまま描いています。
接線方向は1階微分 B'(t) から得ます。3次なら B'(t)=3(1−t)²(P1−P0)+6(1−t)t(P2−P1)+3t²(P3−P2) で、方向角は atan2(B'y, B'x) です。曲率 κ は1階微分と2階微分から κ=|B'x·B''y − B'y·B''x| / (B'x²+B'y²)^1.5 で求めます。分母の (B'x²+B'y²) が 0 に近づくと曲率が発散するため、本ツールは分母を微小値でガードして NaN を防いでいます。曲線長は t を200点ほどサンプルし、微小な弦の長さを足し合わせて近似します。
ベジェ曲線はベクターグラフィックスの共通言語です。TrueType フォントは2次ベジェ、PostScript／OpenType の CFF アウトラインは3次ベジェで全ての文字の輪郭を定義しています。Illustrator や Inkscape のペンツール、SVG の path 要素、アニメーションのモーションパス、CAD の自由曲線・自由曲面（ベジェ曲面・NURBS の基礎）も全てベジェ曲線が土台です。制御点を動かすと曲線が直感的かつ予測どおりに変わること、凸包に収まり数値的に安定なことが、これほど広く使われる理由です。

実世界での応用

フォントとタイポグラフィ：画面や紙に表示される全ての文字は、その輪郭がベジェ曲線で定義されています。TrueType フォント（.ttf）は計算が軽い2次ベジェ、PostScript Type 1 や OpenType の CFF アウトラインは表現力の高い3次ベジェを使います。フォントデザイナーは1文字ごとに数十本のベジェセグメントの制御点を調整し、どんな拡大率でもなめらかな曲線を保てるよう設計します。ヒンティングと組み合わせることで、小さな画素数でも文字が潰れないようにしています。

ベクターイラストとデザインツール：Illustrator・Inkscape・Figma のペンツール、SVG の path 要素は全てベジェ曲線です。ラスター画像と違い、ベジェで描いた図形は無限に拡大しても劣化しません。ロゴ・アイコン・地図など、あらゆる解像度で鮮明であるべきグラフィックは、内部的にベジェ曲線の制御点座標として保存されています。

CAD と曲面モデリング：自動車のボディ、航空機の外板、家電の筐体といった自由曲面は、ベジェ曲線を2方向に拡張したベジェ曲面、さらにそれを一般化した NURBS（非一様有理 B スプライン）でモデリングされます。本ツールが扱う曲率の概念は、曲面の「光の反射の美しさ（クラスA曲面）」を評価する基礎になります。曲率が不連続だと反射ハイライトがギクシャクし、製品の質感を損ないます。

アニメーションとモーション設計：キャラクターやカメラの移動経路（モーションパス）、そして時間に対する変化のイージング曲線も、ベジェ曲線で表現されます。CSS の cubic-bezier() 関数や、After Effects・Blender のグラフエディタは、まさに3次ベジェの制御点を編集して「ゆっくり始まって速くなる」といった動きの質感を作り込む仕組みです。

よくある誤解と注意点

まず多い誤解が、「制御点と曲線上の点を混同する」ことです。前述のとおり、ベジェ曲線が厳密に通るのは両端の制御点だけで、内部の制御点 P1・P2 は曲線を引っ張るだけです。さらに「パラメータ t」と「曲線に沿った距離（弧長）」も別物です。t=0.5 は重みの分配上の中間であって、曲線長の中点とは一般に一致しません。制御点を片側に寄せると、t が等間隔でも曲線上の点は不均一に並びます。等間隔に点を打ちたい（例：パスに沿った等速アニメーション）場合は、弧長でパラメータを取り直す「弧長パラメータ化」が必要になります。

次に、「次数を上げれば自由に曲げられる」と考えること。確かに制御点を増やせば表現力は上がりますが、高次のベジェ曲線（5次以上）は制御点1個を動かすと曲線全体が動いてしまい、局所的な編集が難しくなります。また高次の多項式は数値的に振動しやすく不安定です。だから実務では、高次の1本のベジェではなく、3次ベジェを複数つないだ「ベジェスプライン」を使います。Illustrator のパスも、内部的には3次ベジェセグメントの連なりです。つなぎ目で接線方向（C1連続）や曲率（C2連続）をそろえることが、なめらかな見た目の鍵になります。

最後に、「曲率はどこでも有限」と思い込むこと。曲率の式 κ=|B'x·B''y − B'y·B''x| / (B'x²+B'y²)^1.5 は、分母の (B'x²+B'y²)（速度の2乗）が 0 になると発散します。これは制御点の配置によって接線がゼロベクトルになる「カスプ（尖点）」で起こり、例えば3次ベジェで P1 と P2 を端点側へ極端に寄せると曲線が折り返して尖ります。数値計算ではこの分母を微小値でガードしないと NaN や Infinity が出ます。本ツールも分母をガードしており、t=0・t=1 を含むあらゆる位置で値が破綻しないようにしています。曲線を設計するときも、意図しないカスプができていないか曲率グラフで確認するのが安全です。

使い方ガイド

  1. 制御点P0、P1、P2を座標入力欄で設定します。例えば2次ベジェ曲線の場合、P0=(0,0)、P1=(50,100)、P2=(100,0)とします。
  2. パラメータ t スライダーを0から1に変化させると、De Casteljau構成のアニメーションが再生され、中間点の線形補間過程が視覚化されます。
  3. 各 t 値での曲線上の点B(t)の座標、接線方向（度数法）、曲率κ、曲線長（Gauss積分近似）がリアルタイム出力されます。

具体的な計算例

2次ベジェ曲線でP0=(0,0)、P1=(40,80)、P2=(80,20)の場合、t=0.5での計算結果は以下の通りです。De Casteljauアルゴリズムにより中間点Q0=(20,40)、Q1=(60,50)が得られ、さらにR=(40,45)となります。この点での接線方向は約26.6°、曲率κ≈0.0125(1/px)、全曲線長は約96.5pxとなります。制御多角形の長さは|P0P1|+|P1P2|≈122.1pxです。

実務での注意点

  1. 3次ベジェ曲線（制御点4個）ではDe Casteljau構成が3層になるため、t=0.5での計算が2次より複雑です。CAD設計では曲線の滑らかさを評価する際、κ値が連続であることを確認してください。
  2. 曲線長の近似精度はサンプリング点数に依存します。高精度が必要な場合（例：NC加工の経路長計算）は分割数を増やすか外部の数値積分ツールを併用してください。
  3. 接線方向の不連続性は曲線が不適切に設計されている兆候です。特にロボットパス計画やフォント設計では、制御点の配置を調整して滑らかな接線変化を確保してください。