javascript - 如何使物体沿对 Angular 线和之字形移动？

Question

我创建了一种算法来对 Angular 移动粒子，并且使用 Angular 效果很好。基本上，这就是我所做的:

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

我建议计算与正常路径或振幅的横向偏差，由下式给出

// 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;
}

其中 t 将设置为行进路径的长度，p 是“之字形”三 Angular 波图案的周期。

给定幅度和之前的位置，我们现在可以通过按照原始代码所述向前移动，然后将横向偏差添加到我们的位置来轻松计算下一个位置:

  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>