滑らかな3次ベジェでゆらゆら曲線を描く - FICC LABS
FICC 福岡です。 珍しくやる気になりましてAS3関連のエントリー。個人的にゆらゆらした円が描きたくなり、 こんな図を描き出す方法を考えてみました。Flashで滑らかな曲線、といえばgraphics.curveTo()ですが、このcurveToは2次ベジェ曲線しか書く事ができません。ベジェ曲線の詳しい話は省略しますが、できればIllustratorのようにハンドリングが楽な3次ベジェが使いたい。今回はアンカーポイントとコントロールポイントの位置から3次ベジェを計算し、2次ベジェに変換してFlashで描画します。幸いFlashCS3のfl.motion.BezierSegmentクラスが面倒な計算を助けてくれますのでこのクラスを有効活用します。 BezierSegmentを使うには、まず3次ベジェの要素である4つのポイント（上図でのp0,p1,p2,p3）を用います。 var bezier
NUTSU » [as]ベジェ曲線の分割(2) 破線の描画
ベジェ曲線の分割の流れで、ActionScriptでベジェ曲線を破線で描画してみます。 前回、等分の座標を求めるのに、変数tを0から1まで小刻みに増やして逐一チェックする方法をとっていました。この部分を若干汎用化して、任意の長さからt値を得るようにしてみました。 /** * 長さからtを得る * @param 長さ( 0～length：曲線の長さ ) * @param 許容誤差 * @return t */ public function length2T( len:Number, d:Number=0.1 ):Number{ if( len<0 || len>_length ){ //0以下、曲線より大きい場合NaN return Number.NaN; }else{ //再帰的関数でt値を得る return seekL( len, d ); } } /** * 長さに対するtを得る *
NUTSU » [as]3次ベジェ切り出し
12月第1週でゲーム3本購入。なんとも年末気分になっています。前回の流れで3次ベジェ曲線の切り出しを書いてみます。 前回のエントリーのように、3次ベジェをtの関数としたとき、t=t0、t=t1での座標は、fig1のようにtp0、tp1となるとします。この間の曲線を切り出すわけですが、次のfig2のような手順でいけます。 つまり、一度tp0で切り分けて、切り分けられた曲線の一方をtp1で切り分けるんですね。手順としては前回の切り分けを2度行うわけです。 ただ、2度目の切り分け(fig2b)のとき、tp1を示すt値がt1ではなくなります。基準となる曲線が変わるので、t値も変化するわけです。で、t=t1に対応するような、t1’を導きます。 t値を相対的にみると、t1は、長さ 1-t0 の内の t1′ となり、1-t0 を 1 とすると、t1’=(t1-t0)/(1.0-t0) となります。 これ
NUTSU » [as]3次ベジェ・2次ベジェ変換
正直忘れてしまいそうなのでエントリしてみようと思いました。説明はぐだぐだやもですが…。で、3次ベジェから2次ベジェの近似変換について簡単に書いてみます。ソースには2次から3次も書いてありますが、使うことあるのかなぁ的でメモ的に書いているだけです。 今回実装している3次から2次の変換は、まず3次ベジェが一つの2次ベジェで表現できるかチェック、その後段階的に2次ベジェの数を増やして複数の曲線で近似する流れになっています。 一つの2次で表現できるかは下図のような考えで行います。 3次ベジェのコントロール点の延長にある交点を、2次ベジェのコントロール点にしてみるわけです。大抵の場合一致はしません…。 次に複数の曲線の組み合わせを試してみます。基本的な方法は3次ベジェを二つの2次ベジェで表現してみることです。 この方法を基本として、最初に3次ベジェを二つの2次ベジェ、次に3次ベジェを分割し、それぞれ
NUTSU » [as]2次ベジェ曲線の交点
最近は季節変動で呼吸器系をやられつつゲームやり過ぎな毎日ですが、2つの2次ベジェ曲線の交点について簡単に書いてみます。最初は幾何学的に解けるんじゃないかと考えていたのですが、結局は数値解析的な方法で求めました。Bezier Clipping 法の考え方(FatLine)を参考にしています。 交点を求める過程の基本的な考え方は次のような感じです。 図のように曲線Aと曲線Bがあるとき、一方の曲線を包括する矩形を求めます。この矩形は、曲線の始点、終点を水平にしたときのgetRectに相当します。この矩形で、fig2のように一方の曲線を切り出します。 上図の場合、一本の曲線が切り出されていますが、場合によっては複数本の曲線が切り出されることになります。 次に、切り出した曲線について同じように矩形を求めて、他方の曲線を切り出すわけです。 この、曲線の矩形化・曲線切り出しの処理を繰り返すと、最終的に矩
Anti-Grain Geometry - Interpolation with Bezier Curves
Interpolation with Bezier Curves A very simple method of smoothing polygons Initially, there was a question in comp.graphic.algorithms how to interpolate a polygon with a curve in such a way that the resulting curve would be smooth and hit all its vertices. Gernot Hoffmann suggested to use a well-known B-Spline interpolation. Here is his original article. B-Spline works good and it behaves like an
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
