あるオブジェクトを A から B に移動し、次に B から C に移動し、C から A に移動したいとします。どうすればよいでしょうか?
私はたくさんグーグルで検索しましたが、ポリゴンの周りでオブジェクト(ボールなど)を動かす例を見つけることができません。私はベジェ曲線でそれを行うことができますが、単純な三角形または長方形の場合、それなしでどうすればよいでしょうか? 疑似コードまたは任意の言語のコードを教えてください。(JavaScript/処理を優先)。
あるオブジェクトを A から B に移動し、次に B から C に移動し、C から A に移動したいとします。どうすればよいでしょうか?
私はたくさんグーグルで検索しましたが、ポリゴンの周りでオブジェクト(ボールなど)を動かす例を見つけることができません。私はベジェ曲線でそれを行うことができますが、単純な三角形または長方形の場合、それなしでどうすればよいでしょうか? 疑似コードまたは任意の言語のコードを教えてください。(JavaScript/処理を優先)。
補間を使用して位置を取得できます。
x = x1 + (x2 - x1) * f;
y = y1 + (y2 - y1) * f;
x1, y1
あなたの最初のポイント、あなたの終点はどこx2, y2
ですか。
f
は 0.0 から 1.0 の間の値で、線のどこにいるかを決定します (つまり、0 = 開始、0.5 は途中、1 = 終了)。
f = 1
ポリゴンの次のセグメントに移動しf
て 0 にリセットすると、.
擬似:
//prepare first segment:
x1 = nextX1;
y1 = nextY1;
x2 = nextX2;
y2 = nextY2;
loop:
f += speed; /// f.ex. 0.01
x = x1 + (x2 - x1) * f;
y = y1 + (y2 - y1) * f;
if f=1 then
f = 0;
x1 = nextX1;
y1 = nextY1;
x2 = nextX2;
y2 = nextY2;
repeat loop;
JavaScript での例(完全な動作例については、上記のデモ リンクを参照してください)
function loop() {
/// leave a trace behind for demo
ctx.clearRect(x + 1, y + 1, 6, 6);
f += speed;
if (f >= 1) {
/// initialize next line in polygon (see demo)
getNextSegment();
}
/// Here: get x and y based on interpolation
x = x1 + (x2 - x1) * f;
y = y1 + (y2 - y1) * f;
/// draw something to show position
ctx.fillRect(x, y, 8, 8);
/// loop
requestAnimationFrame(loop);
}
一定速度の場合、始点と終点の間の距離を計算し、 に使用するその距離でステップ値 (事前に定義された固定値) を割りますspeed
。