p5.js | atan2()函数

介绍

在 p5.js 中，atan2() 函数是一种用于计算给定 x 和 y 坐标的反正切值（弧度）的数学函数。atan2() 函数的主要目的是帮助程序员在计算两点之间的角度时提供方便的工具。

语法

atan2(y, x)

• y：一个数字，代表 y 坐标
• x：一个数字，代表 x 坐标

返回值

atan2() 函数返回一个介于 -π 到 π 之间的弧度值。结果值的范围是从负半圆（-π）的正负无穷大到正半圆（π）的正负无穷大。

示例

下面是一个使用 atan2() 函数的示例：

let angle = atan2(3, 4);
console.log(angle); // 输出：0.643501109 rad

在上面的示例中，我们通过传递 y 坐标为 3，x 坐标为 4 来计算反正切值。结果值为 0.643501109 弧度。

应用示例：绘制指向鼠标的箭头

我们可以使用 atan2() 函数来计算指向鼠标位置的箭头的角度。下面是一个使用 p5.js 创建的例子：

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

function draw() {
  background(220);
  
  let mousePos = createVector(mouseX, mouseY);
  let arrowPos = createVector(width / 2, height / 2);
  let direction = p5.Vector.sub(mousePos, arrowPos);
  
  let angle = atan2(direction.y, direction.x);
  
  push();
  translate(width / 2, height / 2);
  rotate(angle);
  
  // 绘制箭头
  fill(255, 0, 0);
  triangle(0, -10, 20, 0, 0, 10);
  
  pop();
}

在上面的示例中，我们使用 createVector() 函数创建 mousePos（鼠标位置） 和 arrowPos（箭头位置） 矢量。然后，我们使用 p5.Vector.sub() 函数计算方向矢量。最后，我们使用 atan2() 函数来计算鼠标指向箭头的角度。

结论

atan2() 函数是一个非常有用的数学函数，特别是在计算两点之间的角度时。通过了解如何使用它，您可以在 p5.js 中创建更多有趣和交互式的项目。