6

与えられた任意の（ランダム化された）曲線を描きたい：

  • 出発地点
  • 終点
  • 曲線の長さ

キャンバスの境界によって制限され、さらに曲線が交差できないようなことをどのように行うことができますか。私はいくつかの解決策を見つけようとしていましたが、これを理解できません。御時間ありがとうございます。

ここに私が達成したいことのより詳細なビューがあります:

これはキャンバスに描かれた二次曲線です。すべて順調。問題は、すべてのポイントなしでこれを描画する方法です。ピクセル単位の固定長、ランダムなポイント、キャンバスのサイズに制限され、交差していないだけです。

ここに画像の説明を入力

コードは次のようになります。

function fixedCurve( A, B, length ){
    for(int i = A; i < B; i++){
        //Calculate random point with propper distance to get first base point, random direction could be calculated before loop.
        //Basicly this loop should calculate integrate of the curve and draw it each step.
    }
}
4

1 に答える 1

7

これを試してください（フィドル）：

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.fillStyle = "red";

  ctx.beginPath();
  var start = [20, 100];
  var end = [120, 100];
  var above = Math.random()*80+20;
  // find the mid point between the ends, and subtract distance above
  //   from y value (y increases downwards);
  var control = [0.5*(start[0]+end[0]), 0.5*(start[1]+end[1])-above];    
  ctx.moveTo(start[0], start[1]);

  ctx.quadraticCurveTo(control[0], control[1], end[0], end[1]); 
  ctx.stroke();
}

draw();

これはquadraticCurveTo、2 つの点を指定して二次曲線を描画し、曲線の中点から 20 ～ 100 ピクセル上のランダムな制御点を計算するために使用しています。

二次曲線に特定の円弧の長さを持たせたい場合 (質問から聞こえるかもしれません)、いくつかの計算を行うことができます。二次曲線 (放物線) の円弧の長さは次のとおりです。

x の関数の弧長の一般的な積分関係

方程式が得られたので、導関数を計算します。

二次の導関数

したがって、これを u(x) と定義すると、Wolfram alpha は次のようになります。

解決

したがって、特定の x1 と x2 について、u(x) の同等の値を計算し、それから積分を計算できます。

コントロール ポイントを使用して一般的な 2 次を描画するには、このチュートリアル ページで確認できるように、方程式を頂点形式に変換する必要があります。賢明なことは、最初にその方程式で数学を繰り返し、正しい用語で「u」の新しい方程式を取得することです。

于 2013-03-21T13:54:35.537 に答える