ベジェ曲線

はじめに Graphics Gems 1 にある AN ALGORITHM FOR AUTOMATICALLY FITTING DIGITIZED CURVES という アルゴリズムをC言語で書いた FitCurve.c とソースがあります。 それを2024年12月22日に JavaScript に移植したときのログのような記事です。 移植前を手元に用意して本記事をご覧ください。 全般的な処理 ソースが書かれたのが1990年で且つC言語なので、全体的に少しだけ直す必要があります。・return (a) の括弧を外しました。 ・メソッド名は camelCase に変更した。e.g. Genera…

やりたいこと 点列 が与えられたとき、それにフィットする3次ベジェ曲線を1つ見つけたいとします。 要は、3次ベジェ曲線の4つの制御点の位置ベクトル を求めればよいわけです。 問題を書き換えてみる 3次ベジェ曲線の位置ベクトルを とすると、 は以下のようになります。 は3次ベジェ曲線のパラメータで とします。 式 は の 成分をそれぞれ としました。 式 を見てわかる通り と を入れ替えると式が同じなので、以降 についてのみ考えることにします。 また、 を と書くことにします。 式 を変形します。式 の導出の過程で、 とおきました。 弧長パラメータの初期化 点列 から点列 を作成します。 は以下…

要件 制御点 からなる3次ベジェ曲線の名前を 、位置ベクトルを 、 制御点 からなる3次ベジェ曲線の名前を 、位置ベクトルを とします。 を更新し となるように曲線を接続することを考えます。 接続の種類 C0連続:位置ベクトルの0階微分連続 C1連続:位置ベクトルの0,1階微分が連続 C2連続:位置ベクトルの0,1,2階微分が連続 G0連続:C0連続と同じ G1連続:接ベクトルが同じ方向 G2連続:符号付曲率が連続G1連続はG0連続であり、G2連続はG0,G1連続でもあるとします。 C0連続とG0連続は同じことだと思うので、以下G0連続という言葉は使わず、C0連続という言葉を使います。 C0連…

はじめに 本アルゴリズムは、かなり前にネットで見つけた方法で、出所を忘れてしまいました。 単純なアルゴリズムですが、効果はあります。 要件 点列 にフィットする2次ベジェ曲線群を求めたいとします。 点列の数 は3以上であるとします。Canvas上(描画可能な領域)でマウスを動かして、それに追随して線を描画するようなときに使えるアルゴリズムです。 なんか、かなり限定的な局面と思われますが、要は点が多数(数百程度)あり、 点をそのまま線分で結ぶとカクカクした線分群になるのでそれを避けようというアルゴリズムです。2次ベジェ曲線上の点を とし、その制御点を おくと以下のようになります。このベジェ曲線を…

2次ベジェ曲線の制御点を求める 2次ベジェ曲線で円弧を近似します。 円弧は単位円の部分集合とし、円弧の角度を とします。 両端点 は円弧と一致するものとします。 両端点の接線ベクトルは円弧の接線ベクトルと方向が同じものであるとします。 が の接線ベクトル と同じ方向であることから であり、 また、 の接線ベクトル と同じ方向であることから となります。 の 成分を比較して、 を求めます。式 により、 は にのみ依存することが分かりました。 が求まったので、2次ベジェ曲線の制御点の座標が定まりました。 円弧の中心からの距離が最大となるパラメータの値 円弧の中心からの距離が最大となるパラメータ の…