| INDEX |

2次ベジェ曲線 その２

7月 30, 2007

前回、ひとつだった曲線を、複数の曲線、直線を組み合わせて、その線上を動くものをテストです。
いくつかの曲線を、程度一定の割合で動かす為に、それぞれの曲線の長さを求めないといけない。その為には積分を使います。高校で習ったであろう、線分の積分、√(dx^2 + dy^2)を積分です。これでベジェ曲線を積分するわけです。いろいろ捏ね繰り回すとこんな感じになります。 

//積分はこんな感じ
function integral( t:Number ):Number{
  var kx:Number = x0 + x2 - 2 * x1;
  var ky:Number = y0 + y2 - 2 * y1;
  var ax:Number = - x0 + x1;
  var ay:Number = - y0 + y1;
  var XY:Number = kx*kx + ky*ky;
  var B:Number  = ( ax*kx + ay*ky )/XY;
  var C:Number  = ( ax*ax + ay*ay )/XY - B*B;
  var BT:Number  = B+t;
  var BTS:Number = Math.sqrt( BT*BT+C );
  return Math.sqrt(XY) * ( BTS*BT + C * Math.log( (BT + BTS)/Math.sqrt(C) ) );
}

(x0,y0)、(x1,y2)、(x2,y2)、はそれぞれ、始点、コントロール点、終点ですね。で、長さが得られるので、割合を移動係数に当ててみます。

MOUSE_DOWNで加速します。MOUSE_UPで減衰です。

上の似非サーキットコースは、Flashでドローして、FlashJavascriptでShapeの数値を取得して、XMLを介してASで再描画しています。ASに座標を書いていくのが面倒になっただけです。
FlashJavascriptはこんな感じ。かなり適当で、事足りればいい程度ですが。しかし、下のプログラムで出力すると、曲線の順番がアベコベに出てくる。なんでだろ…。 

var selArray = fl.getDocumentDOM().selection;
var elt = selArray[0];
var edgeArray = elt.edges;
var xmlstr = "<shape>\n";
for (i=0;  i<edgeArray.length;  i++){
  var ed = edgeArray[i];
  var p0 = ed.getControl(0);
  var p1 = ed.getControl(1);	//アンカー
  var p2 = ed.getControl(2);
  xmlstr += "<edge id=\"" + i + "\"" +
            " x0=\"" + p0.x + "\" y0=\"" +  p0.y +  "\"" +
            " x1=\"" + p1.x + "\" y1=\"" +  p1.y +  "\"" +
            " x2=\"" + p2.x + "\" y2=\"" +  p2.y + "\""   +
            " line=\"" +  ed.isLine + "\" />\n";
}
xmlstr += "</shape>";
fl.trace( xmlstr );

出力されるXMLはこんな感じ。 

<shape>
<edge id="0" x0="334.35" y0="60.15" x1="338.1" y1="63" x2="341.6" y2="66.5" line="0" />
<edge id="1" x0="341.6" y0="66.5" x1="345.1" y1="70" x2="348" y2="73.8" line="0" />
<edge id="2" x0="360" y0="111.3" x1="360.25" y1="137.45" x2="341.65" y2="156.05" line="0" />
<edge id="3" x0="348" y0="73.8" x1="360.15" y1="89.95" x2="360" y2="111.3" line="0" />
<edge id="4" x0="252.05" y0="66.45" x1="270.6" y1="47.9" x2="296.7" y2="48" line="0" />
<edge id="5" x0="229" y0="157.7" x1="218.65" y1="157.75" x2="211.25" y2="165.15" line="0" />
<edge id="6" x0="211.25" y0="165.15" x1="203.95" y1="172.45" x2="203.85" y2="182.85" line="0" />
<edge id="7" x0="254.05" y0="182.85" x1="254.05" y1="172.45" x2="246.75" y2="165.15" line="0" />
<edge id="8" x0="246.75" y0="165.15" x1="239.45" y1="157.75" x2="229" y2="157.7" line="0" />
<edge id="9" x0="58.75" y0="285.95" x1="58.75" y1="259.75" x2="77.35" y2="241.15" line="0" />
<edge id="10" x0="77.4" y0="330.7" x1="58.85" y1="312.15" x2="58.75" y2="285.95" line="0" />
<edge id="11" x0="122.05" y0="349.25" x1="95.95" y1="349.25" x2="77.4" y2="330.7" line="0" />
<edge id="12" x0="273.75" y0="223.95" x1="266" y1="231.7" x2="259.8" y2="227.5" line="0" />
<edge id="13" x0="259.8" y0="227.5" x1="254.1" y1="223.6" x2="254.1" y2="213.7" line="0" />
<edge id="14" x0="197.45" y0="300.25" x1="182.2" y1="315.5" x2="166.95" y2="330.75" line="1" />
<edge id="15" x0="203.95" y0="285.05" x1="203.8" y1="293.9" x2="197.45" y2="300.25" line="0" />
<edge id="16" x0="254.1" y0="213.7" x1="254.15" y1="196.75" x2="254.05" y2="182.85" line="0" />
<edge id="17" x0="166.95" y0="330.75" x1="148.35" y1="349.35" x2="122.05" y2="349.25" line="0" />
<edge id="18" x0="203.85" y0="182.85" x1="204.65" y1="237.85" x2="203.95" y2="285.05" line="0" />
<edge id="19" x0="77.35" y0="241.15" x1="164.7" y1="153.8" x2="252.05" y2="66.45" line="1" />
<edge id="20" x0="296.7" y0="48" x1="318.05" y1="47.85" x2="334.35" y2="60.15" line="0" />
<edge id="21" x0="341.65" y0="156.05" x1="307.7" y1="190" x2="273.75" y2="223.95" line="1" />
</shape>

まだ、曲線上の速度のバラつきには手をつけてないのですが、大変そうな気がします。気長に気長に。

>> source

| INDEX |