変数で補間可能な滑らかな曲線とアウトライン

イントロダクション

私は非従来型のアプローチでフォントをデザインするタイプデザイナーです。
2020 年以降、モダナイズされた MetaPost をベースにしたパラメトリックな タイプ設計手法を実験してきました。この手法についてはブログで詳細に書いており、 また 1 本の論文も公開しています¹。

MetaPost ベースのアプローチには大きな欠点があります。MetaPost 自体がかなり古く、
私よりも前に作られたものです。Knuth の MetaFont をモダナイズした形で 1980 年代に 開発されました。SVG サポートは当初ありませんでしたが、2024 年に追加されました。
MetaPost は WEB（literate programming）という言語で書かれ、そこから Pascal コードを生成します。
そのためツールチェーンや開発体験が非常に非効率的で、拡張することもほぼ不可能です。

MetaPost を使って直近のフォントを作成しているうちに、滑らかな曲線を生成する 背後にある数学と 2 次元セマンティクスに興味が湧きました。滑らかな曲線の美学は 私にとって重要なポイントです。ご存知かもしれませんが、最も成功したフォント Manjari
ではマラヤラム文字の美しい滑らかさを実現するために Raph Levien の Spiral Spline を採用しています²。
この曲線は Raph Levien が開発した Spiral Splines に基づいており、彼は曲線セマンティクスの 専門家として高く評価されている人物です。

スプラインとは

• スプライン：接続された曲線の列。
• ベジェスプライン：各要素がベジェ曲線で構成されるスプライン。

MetaPost の基本操作は、点の系列を定義し、それらを通過する滑らかな曲線を描くことです。
曲線は Hobby 曲線アルゴリズム⁴ を使って定義されます。このアルゴリズムは 平面上の点列に対して曲線をフィットさせ、順序どおりにすべての点を通過します。 結果として得られる曲線は滑らかで、ゆったりとした形状になります。

MetaPost では、これらの曲線を制御するために複数の手段が用意されています。
例えば 張力（tension） を指定したり、点での接線方向（入口・出口角度）を定義できます。

注記
Hobby 曲線について詳細に知りたい場合は、 Hobby’s algorithm for aesthetic Bézier splines の記事をご覧ください。

2018 年、Raph Levien は 2 パラメータ曲線アプローチ⁵ を発表しました。
JavaScript 実装とデモが公開されており、以下に埋め込みます：

キャンバス上をクリックすると新しい点が追加され、それらを結ぶ滑らかな曲線が表示されます。

この手法の特徴は、フォント設計で重要な「滑らかさ」から「直線」へ、 あるいはその逆への移行を自然に行えることです。
Spiro はこの点で優れていましたが、UX が非常に分かりづらく “ワンウェイ制約（one‑way constraints）” によって問題が発生しやすかったのです。
新しいスプラインは明示的な接線を設定できるため、直線と曲線を滑らかに結合できます⁶。

この手法は MetaPost のコアパラメトリック曲線処理システムに非常に近いものですが、 Hobby 曲線を採用しています。
したがって Raph が提案する滑らかな曲線フィッティングを取り入れた システムを構築すれば、モダンなパラメトリックタイプ設計システムへの第一歩となります。 私は MetaPost にインスパイアされた DSL ベースのパラメトリックタイプ設計システムを作る夢がありますが、 汎用描画ツールではなく、フォント設計に特化したものです。

この記事では以下のワークフローを示します：

• Raph Levien の 2 パラメータスプラインと、それを Rust で実装した曲線フィッティングアルゴリズムをまとめる。
• 変数幅（variable‑width）ストロークを構築し、可変フォントでもインターポレーションが可能な状態に保つ方法を示す。
• ストロークの接続点で生じる連続性問題を、スケルトン曲線（骨格）を利用して修正する骨格ベースのエラー訂正手法を説明する。

曲線フィッティング

昨年 11 月に、Raph Levien の 2 パラメータ曲線構造に基づいた Rust 実装を作成しました。
このモデルでは、隣接する 2 点間の各セグメントは 開始点での接線角度 と 終了点での接線角度 の 2 つのパラメータで制御されます。 アルゴリズムは 2 次元点列（必要に応じて接線制約付き）を入力として、 $G^2$ 内部連続性と $G^1$ コーナー連続性を保ちつつ、全入力点を補間する滑らかな 3 次ベジェパスを生成します。

アルゴリズムは 3 段階で構成されます：

1. 前処理 – 生の入力点を制御点に変換し、メタデータ（点種別：滑らか／コーナー／線-曲線遷移）を付与します。
2. 最適化 – 反復ソルバーが内部で接線角度を調整し、内側の曲率不連続を最小化します。
3. レンダリング – 最適化された接線角度からベジェ制御点を算出し、最終曲線を描画します。

2 パラメータ曲線

Hobby スプラインと同様に、この 2 パラメータ曲線は各ペアの制御点間に 1 つの 3 次ベジェセグメントで構成されます。
接線はパラメータで決定され、内部制御点はそれらの直線上に置かれます。 したがって残る自由度は 制御腕長（開始点から対応する内部制御点までの距離）だけです。

新しいスプラインでは左側の制御腕長を次式で定義します。右側は対称的に計算されます：

[ \text{arm length} = \frac{5}{12}\Bigl(\sin \theta_a - 0.2,\sin(3\theta_a)\Bigr) \quad \text{where} \quad \theta_a = \theta_0 - 0.3,\sin!\bigl(2\theta_1-0.4,\sin 2\theta_1\bigr). ]

この関数を使い、グローバルソルバーが各制御点で曲率を両側から一致させるように接線角度を決定します。

曲率最適化

反復ソルバーは Newton 法（ダンピング付き）を用いて、内部の曲率不連続を最小化します。
各結合点で左セグメントの終端曲率 $\kappa_0$ と右セグメントの始点曲率 $\kappa_1$ を計算し、 それぞれのチャンク長 $d_0, d_1$ から以下のようにスカラー誤差を求めます。

[ c_0 = \sqrt{d_0}, \qquad c_1 = \sqrt{d_1}, ]

各曲率値は軸が $c_0$, $c_1$ の楕円上の点にマッピングされ、角度を比較します。
誤差は

[ \text{err} = \operatorname{atan2}\bigl(\sin(\kappa_0)c_1,\ \cos(\kappa_0)c_0\bigr)

\operatorname{atan2}\bigl(\sin(\kappa_1)c_0,\ \cos(\kappa_1)c_1\bigr). ]

$\kappa_0$ と $\kappa_1$ が楕円上で一致すれば誤差は 0、そうでなければ曲率のねじれ度を符号付きで示します。

明示的に接線角度が指定された点では、その値は固定パラメータとして扱い、最適化から除外されます。

点種別・使用ケース

アルゴリズムは、内部角度差が $10^{-6}$ rad を超える場合に自動的に Smooth → Corner に変換します。
明示角度が与えられた点では、その値をハード制約として保持します。

制約優先順位

曲線はコーナー点または明示角度によって区切られたセグメントごとに独立して解かれます。
閉曲線の場合、開始点（できればコーナー）を選び、最初と最後の接線が一致するように処理します。

端点接線

明示的な端点制約がない場合、次式で計算される特殊公式が用いられます：

[ \text{endpoint tangent} = 0.5,\sin(2\theta). ]

これにより内部角度 $\theta$ と必要な端点接線方向を結び付け、セグメント間の滑らかな遷移を保証します。

実例

simple diagonal line stroke

(0,0)--(100,100)

(50,100)--(100,100)--(100,50)

(100,50)..(150,100)..(100,150)..(50,100)..cycle

(50,100){dir 10}..{dir 90}(150,50)..(250,150)

(50,100)..(150,50)..(250,150)..(350,100)

さらにインタラクティブなデモも公開しています。

以下は、曲線フィッターを使ってマラヤラム文字 va を描いた動画です。
ソースコードは https://github.com/santhoshtr/kurbo-curve-fit で確認できます。

パラレル（ストローク）アウトライン

「パラレルアウトライン」または「ストローク」は、与えられた曲線の周囲に一定距離を置いた外郭を生成します。
元になる曲線は スケルトン と呼ばれます。

上図では、パラレル曲線の 2 種類の定義が示されています：

1. 同一半径の円族の包絡線。
2. 固定正規距離で作られる外郭。

出典 – 任意の曲線に対して正確なパラレル曲線を計算することは非常に難しいです。
3 次ベジェのオフセット曲線は次数 10 のベジェとして表現できるものの、計算が複雑すぎます。

実際には、真のパラレル曲線への近似を求めることがほとんどです。
単一の 3 次ベジェでオフセット曲線を近似するのは十分ではない場合が多く、 その時点で細分化して複数のセグメントに分割します⁶。
詳細については Pomax の「A primer on Bézier curves」を参照ください。

この記事で行った探索には、Kurbo Rust ライブラリを使用しました。
Kurbo にはパス（スケルトンまたは連結ベジェ曲線）のオフセット機能が備わっており、 指定した距離 $d$ だけ拡張します。

可変ストロークの実装

私は Kurbo のコードを再利用し、可変幅 をサポートするように改造しました。
定数値 $d$ を配列から取得して、各セグメントで異なる幅を適用しています。
結果として得られたストロークは見た目には十分ですが、ポイント数が不安定です。

可変フォントでは インターポレーション可能 な形状が必要です。
具体的には：

• 同じ数のパスとポイント
• 同じ輪郭順序
• 各輪郭の開始点が同一

幅を変えるたびにアウトライン内のポイント数が変わると、上記条件を満たせません。

以下は e のギャリフがインターポレーション可能であることを示す動画です。
可変フォントのインターポレーションを観察したい場合は SAMSA Interpolator が便利です。

既存手法への挑戦

カスタムパラレル曲線生成器を使う方法を放棄する前に、ポイント数を固定 にできるか試みました。
オフセットアウトラインで細分化が 2 セグメントの場合もあれば 3 セグメントの場合もあります。
最初は各セグメントに対して固定の 4 分割を行い、その後曲率に応じて動的に調整しました。

結果として得られたアウトラインはインターポレーション可能になりましたが、先に述べた「完璧さ」を失いました。
この問題は Raph が提案した線形摂動（linear perturbation）手法で解決できます：

[ B_{\text{offset}}(t) = B(t) + w(t)\cdot D(t) ]

• $B(t)$ – スケルトン（3 次ベジェ）。
• $w(t)$ – 幅（半幅）。定数の場合はスカラー、可変ストロークならパラメータ。
• $D(t)$ – 「方向曲線」。スケルトンに沿った単位法線を 3 次ベジェで近似。

具体的には、$t=0,,0.5,,1$ の正規化された法線を評価し、それらを通る 3 次ベジェをフィットさせます。
こうして得られた $D(t)$ と $B(t)$ を固定し、幅だけが変わることで 点は直線上を移動する（加算のみ）ため、インターポレーション可能です。

直感的に理解
完璧なパラレル曲線を正確に計算するのは不可能なので、 「外側へ向かうベクトル場」を作ります。
それが $D(t)$ で、$B(t)+w(t) D(t)$ がオフセットです。

さらに Raph は 中点のみ を使って制御点長を決定する方法を推奨しています。
開始点と終了点、接線方向（導関数）から、正確に $t=0.5$ で通過させるよう 制御点長を計算すれば、決定論的かつ高速 に処理できます。

ストロークの連続性

ただし、この手法はセグメント間で kink（鋭い角） が生じやすいという欠点があります。
これは $(1 + \kappa w)x' + n,w'$ という式に起因します。

• $x'$ – スケルトンの接線。
• $\kappa$ – 曲率。
• $n$ – 単位法線（90° 回転）。
• $w'$ – 幅変化率。

幅が増加すると、$w'$ が正になり、$n,w'$ 成分が大きくなります。 セグメント間で $w'$ の値が急に変わると、オフセット曲線の方向も急激に変わり、 結果として kink が生じます。

スケルトンベースのエラー訂正

可変幅ストロークは数理的には美しいですが、セグメント境界で G¹ 連続性（方向不連続） の問題が発生します。
以下ではスケルトンを参照しながらエラーを修正する多段階手法を紹介します。

ステージ 1a – アウトラインポイントの抽出と分類

まずストロークアウトラインから オン曲線点（コーナー状）を取得し、 各点で入射角・発散角を計算します。
その差が大きいか小さいかで「Corner」または「Smooth」を判定します。 可変幅の場合、15° を閾値に設定しています。

ステージ 1b – スケルトンとの再分類

もしスケルトン情報があれば、アウトライン点をスケルトン上の最も近い 点と 2.0 単位以内でマッチングします。
「Corner」と判定されたアウトライン点について、対応するスケルトン点が 滑らかである場合は、アウトライン側の角度をスケルトンから取得し、 再び「Smooth」に分類します。

ステージ 2 – G¹ 失敗の検出と訂正

上記ステップ後も依然として G¹ 連続性 が破綻している点（入射角・発散角が 0.5° を超える）を探します。
スケルトンに対して信頼できるマッチがあれば、再びスケルトンの接線方向で アウトラインの角度を上書きし、近傍点にも G¹ スムージングを適用します。

ステージ 3 – 曲線の再フィッティング

修正後、先に説明した 2 パラメータ曲線フィッターへアウトラインポイントを 渡し直します。
これで「False Corner」が減り、セグメント境界の方向が整合性を保った状態で 新しいアウトラインが生成されます。

結論

ご覧いただきありがとうございます！
Raph Levien に感謝します。この手法はエンジニアリング的な近似であり、 彼や Kurbo チームがさらに洗練されたアルゴリズムを開発中です。
私は DSL ベースのタイプ設計システムに焦点を当て、上記曲線生成をコアバックエンドとして活用したいと考えています。

近年、AI エージェント型コード作成が実現し、かつては諦めていた大規模プロジェクトにも挑戦できるようになりました。これを楽しみながら取り組んでいます。

次のステップ

• DSL ベースのタイプ設計システムを構築し、上記曲線生成を統合する。
• Deepwiki でコードリポジトリの詳細説明を自動生成してもらう。

参考文献

1. …（論文を引用）
2. …（マラヤラム文字源）
3. Raph Levien – Spiral Splines
4. Hobby’s curve algorithm
5. Raph Levien – Two‑parameter spline (2018)
6. Pomax – Primer on Bézier curves
   … （その他使用した参考文献を追加）