animation - 二次ベジェ補間

Question

AS2で、2次ベジェ曲線を補間するためのコードを取得したいと思います。ノードは、互いに一定の距離にあることを意味します。基本的には、3ポイントで定義される非双曲線の2次ベジェ曲線に沿って一定の速度でボールをアニメートすることです。ありがとう！

Answer 1

ベジエ曲線の計算は非常に単純なので、私がお手伝いします。それを ActionScript に変換できます。

2D 二次ベジエ曲線は、3 つの(x,y)座標によって定義されます。これらをP0 = (x0,y0)、 、P1 = (x1,y1)と呼びP2 = (x2,y2)ます。さらに、 からまでのt範囲のパラメータ値を使用して、曲線に沿った任意の位置を示します。、および変数はすべて実数値 (浮動小数点) です。01xyt

二次ベジエ曲線の方程式は次のとおりです。

P(t) = P0*(1-t)^2 + P1*2*(1-t)*t + P2*t^2

したがって、疑似コードを使用すると、次のようにベジエ曲線をスムーズにトレースできます。

for i = 0 to step_count
    t = i / step_count
    u = 1 - t
    P = P0*u*u + P1*2*u*t + P2*t*t
    draw_ball_at_position( P )

これは、上記のようP0に、すでに points を定義していることを前提としています。制御点を均等に配置すると、曲線に沿って均一なステップが得られるはずです。見たい曲線に沿ったステップ数になるように step_count を定義するだけです。P1P2

Answer 2

この式は、数学的にはるかに効率的に実行できることに注意してください。

P(t) = P0*(1-t)^2 + P1*2*(1-t)*t + P2*t^2

と

P = P0*u*u + P1*2*u*t + P2*t*t

どちらも単純化できる t 乗算を保持します。

例えば：

C = A*t + B(1-t) = A*t + B - B*t = t*(A-B) + B= 掛け算を 1 回保存しました = パフォーマンスが 2 倍になりました。

Answer 3

Naaff によって提案されたソリューション、つまり はP(t) = P0*(1-t)^2 + P1*2*(1-t)*t + P2*t^2正しい「形状」を取得しますが、間隔tで等間隔​​を選択しても[0:1]等間隔は生成されませんP(t)。つまり、速度は一定ではありません (前の式をtsee it に関して微分することができます)。

通常、一定速度でパラメトリック カーブをトラバースする一般的な方法は、弧の長さで再パラメータ化することです。これは、曲線に沿って横切った長さをPでP(s)表すことを意味します。s明らかに、sゼロから曲線の全長まで変化します。二次ベジエ曲線の場合、 の関数として弧長の閉形式の解がありますがt、少し複雑です。計算上は、お気に入りの方法を使用して数値的に積分する方が速いことがよくあります。ただし、アイデアは逆関係、つまり を計算してとしてt(s)表現することに注意してください。次に、等間隔を選択すると、等間隔が生成されます。PP(t(s))sP