投稿者 tel | 2010年3月1日

ベジェ曲線で楕円を描く(2)

前回の続き。HTML5のCanvasで楕円を何とかして描く。

3次ベジェ曲線の式。

Pが制御点。P0とP3が曲線の始点と終点になる。媒介変数tが0から1まで動くときに、Bがベジェ曲線の座標を表す。CanvasではmoveToで最初の制御点をmoveToで指定して、残りの制御点をbezierCurveToで指定する。

次に円の方程式を媒介変数を使って表す。

tが0から1の範囲で円の4分の1の弧を描くはず。これで3次ベジェ曲線の式と円の式を組み合わせて解けば制御点の座標が求まるはず。始点と終点は原点基準の円(4分の1)を描く場合P0(0, r)とP3(r,0)になる。またベジェ曲線では最初の制御点(始点)と2番目の制御点を結んだ線分が最初の制御点での接線になる。3番目と終点も同様なので、2番目の制御点はx軸と平行に、3番目の制御点はy軸に平行になる。円の場合制御点は対称になりそう。図で表すとこんなかんじ。簡単のために半径は1にした。

これらの条件を入れてベジェ曲線の式を書き下す。

この式と円の式を連立させて解けばmが求まりそうだけどサインコサインが入ってきてるからうまく解けない。そもそも連立させるのが間違ってるのかもしれない。とりあえずtが0.5のときに2つの式が同じだとするとmが出る。

mが求められたのでこの値を使ってベジェ曲線で円を描いてみる。

うまくいってるみたいだ。次はいよいよ楕円を描く。


コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

カテゴリー

%d人のブロガーが「いいね」をつけました。