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

[![出力される画像](https://i.stack.imgur.com/yB02f.png)](https://i.stack.imgur.com/yB02f.png)

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

[![点のみ](https://i.stack.imgur.com/GCV2j.png)](https://i.stack.imgur.com/GCV2j.png)

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

言語はJavaやC#あたりなら理解できます。他の言語でも構いませんがD3.jsなどの言語に依存するライブラリを使う方法は避けていただけると助かります。
CC BY-SA 3.0
2015-10-15T08:01:10.947
17674
2015-10-15T12:07:08.470
10083
question
svg
複数の点をベジェ曲線でなめらかに結ぶための制御点座標を算出したい
まずベジェ曲線の制御点は始点または終点の接線上にあります。なので微分または差分で各点の接線を求めてください。

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

具体的なrの値は条件をベジェ曲線の式に当てはめて方程式を解くか、適当に決めてしまってください。なお90度の円弧では0.55程度になります。
CC BY-SA 3.0
2015-10-15T08:35:12.580
17677
2015-10-15T08:35:12.580
5750
17674
answer
絶対の正解は無いと思いますが、経験則として、こうやればだいたいうまくいく、という方法を紹介します。

[![ベジェ曲線の制御点の決め方](https://i.stack.imgur.com/neOV2.png)](https://i.stack.imgur.com/neOV2.png)

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

数学的な厳密さを要求せず、近似的なベジェ曲線が描ければいいという用途であれば、これでじゅうぶんかと思います。
CC BY-SA 3.0
2015-10-15T12:07:08.470
17684
2015-10-15T12:07:08.470
3337
17674
answer