此草图中如何使用三角函数使一个对象向另一个对象移动？答案

【问题标题】：How are trigonometric functions used in this sketch to make one object move towards another?此草图中如何使用三角函数使一个对象向另一个对象移动？
【发布时间】：2021-11-19 01:47:40
【问题描述】：

所以我请人帮我做一个小项目（球追球你控制一个）他给了我一个三角的东西，它很好用，有人可以向我解释三角学吗？

这是他给我的代码：

var aiX = 0;
var aiY = 0;

var playerX = 200;
var playerY = 200;

draw = function () {
  background(255);
  
  playerX = mouseX;
  playerY = mouseY;
  
  fill(0, 255, 0);
  ellipse(playerX, playerY, 50, 50);
  
  fill(255, 0, 0);
  ellipse(aiX, aiY, 50, 50);
  
  var angle = atan2(playerY - aiY, playerX - aiX);
  aiX += cos(angle);
  aiY += sin(angle);
  
  if (dist(playerX, playerY, aiX, aiY) < 50) {
    text("ouch!", 100, 100);
  }
};

我是如何改变它的：

var aiX = 200;
var aiY = 0;

function setup() {
  playerX = 200;
  playerY = 200;
}

draw = function () {
  createCanvas(400, 400);
  background(255);
  let h = hour();
  //scare anyone
  if (h === 3) {
    console.log("I SEE YOU");
    let img = createImg(imageData, "YOU CANT HIDE EVEN IF I WONT LOAD");
  }
  if (isKeyPressed && keyCode === UP_ARROW) {
    playerY = playerY - 5;
  }
  if (isKeyPressed && keyCode === DOWN_ARROW) {
    playerY = playerY + 5;
  }
  if (isKeyPressed && keyCode === RIGHT_ARROW) {
    playerX = playerX + 5;
  }
  if (isKeyPressed && keyCode === LEFT_ARROW) {
    playerX = playerX - 5;
  }

  fill(0, 255, 0);
  ellipse(playerX, playerY, 50, 50);

  fill(255, 0, 0);
  ellipse(aiX, aiY, 50, 50);
  function reset() {
    playerX = 200;
    playerY = 200;
    aiX = 200;
    aiY = 15;
  }

  var angle = atan2(playerY - aiY, playerX - aiX);
  aiX += cos(angle);
  aiY += sin(angle);

  if (dist(playerX, playerY, aiX, aiY) < 50) {
    console.log("GAMEOVER");
    reset();
  }
};


const imageData = 
  "data:image/jpeg;base64,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";

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"&gt;&lt;/script&gt;

我大约一周前才开始学习 p5js，如果我的代码不好或草率，请见谅... 编辑：https://editor.p5js.org/

【问题讨论】：

我更新了您的问题，使其具有合理的标题，并包含您的代码的可运行 sn-p 版本。供将来参考“有人知道三角学吗？”绝对不能作为 StackOverflow 问题的标题！您需要阅读并关注the guidelines 才能成为这个社区的好成员。
另外，我建议您从示例中删除该图像数据，因为它与您的问题无关。

标签： trigonometry p5.js

【解决方案1】：

具有讽刺意味的是，在这个例子中使用三角函数实际上是不必要的。目标是将位于aiX, aiY 的圆移近位于payerX, playerY 的第二个圆。通过取每个方向上两个分量之间的差来计算从ai 位置到player 位置的向量很简单：playerX - aiX 是水平方向上从ai 到player 的偏移量， playerY - aiY 是从ai 到player 在垂直方向上的偏移量。显然，您不想将ai 圆圈的位置更改为整个偏移量，因为那将是即时游戏结束。如果您想将移动速度固定在特定级别，您只需将每个分量除以向量的长度，然后如果您想要一个非 1 的速度，则乘以所需的速度。这是无需任何三角函数的代码：

let aiX = 200;
let aiY = 0;
let playerX = 200;
let playerY = 200;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255);
  if (isKeyPressed && keyCode === UP_ARROW) {
    playerY = playerY - 5;
  }
  if (isKeyPressed && keyCode === DOWN_ARROW) {
    playerY = playerY + 5;
  }
  if (isKeyPressed && keyCode === RIGHT_ARROW) {
    playerX = playerX + 5;
  }
  if (isKeyPressed && keyCode === LEFT_ARROW) {
    playerX = playerX - 5;
  }

  fill(0, 255, 0);
  ellipse(playerX, playerY, 50, 50);

  fill(255, 0, 0);
  ellipse(aiX, aiY, 50, 50);

  let offsetX = playerX - aiX;
  let offsetY = playerY - aiY;
  // pythagorean theorem: given a right triangle, the length of the
  // hypotenuse is the square root of side A squared plus side B squared
  let length = sqrt(offsetX * offsetX + offsetY * offsetY);
  offsetX = offsetX / length;
  offsetY = offsetY / length;
  
  // The total distance moved when incrementing will now be 1
  aiX += offsetX;
  aiY += offsetY;

  if (dist(playerX, playerY, aiX, aiY) < 50) {
    console.log("GAMEOVER");
    reset();
  }
}

function reset() {
  playerX = 200;
  playerY = 200;
  aiX = 200;
  aiY = 15;
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"&gt;&lt;/script&gt;

但是，既然您询问了三角函数，那么原始示例的工作原理如下：

atan2 函数，它实现了反正切函数（又名反正切），取两点之间的垂直偏移量和两点之间的水平偏移量，并返回两点之间的直线相对于某个点的角度参考方向（正 X 方向）。这是正切函数的逆函数，它取一个角度，并返回对边与直角三角形相邻边与该角度的比率。使用 atan2 单独获取两个偏移量与 atan 函数将比率作为单个值的原因是，当 x 偏移量为负时，atan 不会返回正确的角度。

现在，一旦您获得了从ai 位置到player 位置的直线角度，您就可以使用其他三角函数转换回偏移量：即正弦和余弦（即sin 和@987654344 @)。 sine 函数采用一个角度并返回直角三角形的对边与该角度及其斜边的比率。余弦函数采用一个角度并返回直角三角形的相邻边与该角度及其斜边的比率。因此，如果您使用sin(angle) 作为要移动的垂直偏移量，并使用cos(angle) 作为水平偏移量，那么您将在angle 的方向上移动1 的偏移量。

为了更好地理解这一切，我建议您观看 Daniel Shiffman 的 The Nature of Code 的 first few chapters。

我也认为this p5.js sketch by spencer eastcott 有助于将这些概念可视化。

【讨论】：

谢谢你，我会看视频！！！
所以我看了视频，我并没有真正理解……我应该多学习一些基础知识吗？
我强烈建议您观看更多视频或阅读更多文章，我在开始使用 p5.js 时观看的一个非常有帮助的 YouTuber 是“编码火车”，他有完整的教程可供观看。这是他的整个教程集：youtube.com/playlist?list=PLRqwX-V7Uu6YrbSJBg32eTzUU50E2B8Ch