6

プログラム経由でベクター画像(SVGファイル)を生成しようとしています。
書き出す図形はやや歪んだ円形で、関数に任意の角度を渡すと中心からの距離が得られます。
現状は角度を1度ずつ変化させて点を直線で結んでいるのですが少しガタガタしてしまうのが気になります。

出力される画像

そこでベジェ曲線でうまく繋いで点の数を減らそうと思っています。規則性の高いものなので10度ずつ角度を変えて打った点を繋いでも十分正確な図形が描けそうに見えます。

点のみ

SVGファイルでベジェ曲線を描くのに必要な要素は 始点・制御点・終点 の3つで、何らかの方法で制御点を導き出せれば良いのですが、検索で見つかるものはスプライン補間やラグランジュ補間などの補間方法に関するものが殆どで、なかなか制御点に関する情報が見つかりません。
このようなケースではどのようなアルゴリズムを使って制御点を算出すれば良いのでしょうか?

言語はJavaやC#あたりなら理解できます。他の言語でも構いませんがD3.jsなどの言語に依存するライブラリを使う方法は避けていただけると助かります。

2 件の回答 2

3

絶対の正解は無いと思いますが、経験則として、こうやればだいたいうまくいく、という方法を紹介します。

ベジェ曲線の制御点の決め方

ある点に注目するとき、その前後の座標からベクトルを求めます。そのベクトルを6分の1にして、対象の点の前後に加え、そこを制御点とします。

数学的な厳密さを要求せず、近似的なベジェ曲線が描ければいいという用途であれば、これでじゅうぶんかと思います。

3
  • 許容範囲ですが、円の規則性が高い関係で僅かに波打って見える区間が出てしまいました。長さは6分の1がベストでした。もう少し不規則な図形に対してなら十分実用的な手段であるように感じました。ありがとうございます。
    – Nuages
    Commented 2015年10月16日 9:36
  • この簡易的な方法では、点の接線を求めるために、前後の点の座標から推測しているわけですが、「関数に任意の角度を渡す」ときに、座標だけでなく、傾きも一緒に求めることができれば、制御点を微調整できる可能性がありますので、波打ってしまうのを軽減できるかもしれません。そのためには、座標を求める関数と、それを微分した関数を用意します。各点における傾きに応じて、制御点を少し回転してみるなど、工夫してみるといいかもです。あと、点の数を減らした方が、波打ちが目立たなくなるかもしれません。8点ないし16点くらいにしてみてはいかがでしょう。
    – soramimi
    Commented 2015年10月16日 10:24
  • 追記します。もし、微分した関数を用意するのが困難でしたら、±1度の精度で接線の傾きを求め、±15度(くらい)の精度でベクトルの長さを求める、といった工夫が考えられます。求めた長さに基づいて、前方向の制御点と後ろ方向の制御点の長さを変えてみるというのも検討してみてください。
    – soramimi
    Commented 2015年10月16日 10:51
2

まずベジェ曲線の制御点は始点または終点の接線上にあります。なので微分または差分で各点の接線を求めてください。

接線が求められれば、曲線上の2点A,Bに対してAの接線とBの接線の交点Cを考えられます。近似するための制御点P,QはACおよびBCのどこかに取ればよいと考えられるので、0から1の定数r1,r2を用いてAP=r1*AC, BQ=r2*BCのように決定できます。

具体的なrの値は条件をベジェ曲線の式に当てはめて方程式を解くか、適当に決めてしまってください。なお90度の円弧では0.55程度になります。

3
  • 3次ベジェ曲線の代わりに2次ベジェ曲線で描画するなら定数r1, r2を用いずに、各接線の交点Cの座標=制御点と考えても良いのでしょうか? また、今回のように図形の式が明確でない場合や、単一の式によって表せない場合などで、線の通る複数の座標のみが与えられている場合の接線はどのように計算すればよいのでしょうか?
    – Nuages
    Commented 2015年10月16日 1:49
  • @Nuages 各点の接線を維持して2次ベジェ曲線で近似する場合は接線を制御点とすることになると思います。
    – pgrho
    Commented 2015年10月16日 2:22
  • @Nuages また微分は微小なhを使ってdf(x)/dx = (f(x+h) - f(x-h)) / 2hのように近似できます。質問の状況ではr = f(θ)からθ→x, yの関数が求められるので、この関数の差分でdx/dθおよびdy/dθが求められ、比で接線の傾きが得られると思います。
    – pgrho
    Commented 2015年10月16日 2:28

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。