オブジェクトを斜めにジグザグに移動するにはどうすればよいですか？

Question

パーティクルを斜めに動かすアルゴリズムを作成しました。角度を使って細かく動作します。基本的にはこれが私の仕事です：

this.x += this.speed * Math.cos(this.angle * Math.PI/180); 
this.y += this.speed * Math.sin(this.angle * Math.PI/180); 
this.draw(); 

これをジグザグの動きと組み合わせるにはどうすればいいですか？

Answer 1

あなたが方向this.angleに移動していて、その方向から±45度方向に移動する方向にジグザグしたいとします。新しい位置を計算するときにvar zigzag = 45;のような変数を持ち、zigzag〜this.angleを追加するだけです。そしてそれをジグザグにするには、このように頻繁にこれを否定する必要があります。zigzag *= -1;。ジグザグを止めるには、zigzag = 0;と設定します。

このトリックは、±45°の間で交互に切り替わるタイミングを知っています。たぶん、スイッチをタイムアウトさせて、最後にDate.now();を使って切り替えたときの参照を保持することができます。現在の時間と記録された時間の差を確認してから、一定のミリ秒を超えたらzigzagを否定することができます。最後のスイッチの新しい時刻を記録することを忘れないでください。移動距離を把握し、同じアプローチを使用することもできます。

Answer 2

私はtが移動経路の長さに設定され、pは「ジグザグ」の期間である

// Triangle wave at position t with period p: 
function amplitude(t, p) { 
    t %= p; 
    return t > p * 0.25 ? t < p * 0.75 ? p * 0.5 - t : t - p : t; 
} 

によって与えられる通常のパスまたはamplitudeから横方向偏差を計算お勧め三角波パターン。

var amplitude = amplitude(distance, p) - this.amplitude(previous_distance, p); 
    this.x += amplitude * Math.sin(this.angle * Math.PI/180); 
    this.y -= amplitude * Math.cos(this.angle * Math.PI/180); 

完全な例で：

振幅と、前の位置を考えると、我々は今、簡単に元のコードによって記載されているように進め、その後、私たちの位置に横方向のずれを追加することによって、次の位置を計算することができます両可動オブジェクト、一方が「正常」移動と「ジグザグ」パターン次のいずれか

function Movable(x, y, speed, angle, period) { 
 
    this.x = x; 
 
    this.y = y; 
 
    this.speed = speed; 
 
    this.angle = angle; 
 
    this.period = period; 
 
    this.distance = 0; 
 
} 
 

 
Movable.prototype.moveDiagonal = function() { 
 
    this.distance += this.speed; 
 
    this.x += this.speed * Math.cos(this.angle * Math.PI/180); 
 
    this.y += this.speed * Math.sin(this.angle * Math.PI/180); 
 
} 
 

 
Movable.prototype.amplitudeZigZag = function() { 
 
    var p = this.period, d = this.distance % p; 
 
    return d > p * 0.25 ? d < p * 0.75 ? p * 0.5 - d : d - p : d; 
 
} 
 

 
Movable.prototype.moveZigZag = function() { 
 
    var amplitude1 = this.amplitudeZigZag(); 
 
    this.moveDiagonal(); 
 
    var amplitude2 = this.amplitudeZigZag(); 
 
    
 
    var amplitude = amplitude2 - amplitude1; 
 
    this.x -= amplitude * Math.sin(this.angle * Math.PI/180); 
 
    this.y += amplitude * Math.cos(this.angle * Math.PI/180); 
 
} 
 

 
Movable.prototype.draw = function(context) { 
 
    context.beginPath(); 
 
    context.arc(this.x, this.y, 1, 0, 2 * Math.PI); 
 
    context.stroke(); 
 
} 
 

 
var canvas = document.getElementById("canvas"); 
 
var context = canvas.getContext("2d"); 
 

 
var m1 = new Movable(0, 0, 2, 0, 50); 
 
var m2 = new Movable(0, 0, 2, 0, 50); 
 

 
for (var i = 0; i < 1000; ++i) { 
 
    m1.angle += Math.cos(i * Math.PI/180); 
 
    m2.angle += Math.cos(i * Math.PI/180); 
 
    m1.moveDiagonal(); 
 
    m2.moveZigZag(); 
 
    m1.draw(context); 
 
    m2.draw(context); 
 
}

<canvas id="canvas" width="600" height="200"></canvas>