P5.js 弧度 - JavaScript

在P5.js中，我们可以使用角度和弧度来进行旋转、转换和定位。但在数学中，弧度被广泛使用作为角度的替代单位。在这篇文章中，我们将探讨如何使用P5.js中的弧度。

弧度是什么？

弧度（radian） 是一个角度单位，用于测量旋转角度。弧度以圆半径上的弧长为单位，而不是角度。一个圆弧的长度是圆周率乘以弧度数。

例如，如果圆的半径为 1 且旋转角度为 $ \frac{\pi}{2} $ 弧度，则圆弧的长度为 $ \frac{\pi}{2} $ 。

P5.js 中如何使用弧度？

在P5.js中，弧度和角度的切换是通过简单的 JavaScript 函数来完成的：

function setup() {
  createCanvas(400, 400);
  angleMode(RADIANS); // 将角度模式设置为弧度模式
}

function draw() {
  background(220);
  // 绘制一个正方形
  rectMode(CENTER);
  rect(width / 2, height / 2, 100, 100);
  // 旋转至 45 度
  rotate(PI / 4);
  // 绘制一条线
  line(0, 0, 50, 0);
}

这些代码会绘制一个正方形并将其旋转 $45$ 度。 我们使用了 P5.js 的 rotate() 函数将正方形旋转 $45$ 度。如在上图中所示，$45$ 度是 $ \frac{\pi}{4} $ 弧度。因此，我们将 rotate() 函数传递给弧度值 $ \frac{\pi}{4} $。

这是一种非常便捷的方法来使用弧度与角度进行旋转。但是，如果您想将旋转角度精确设置为某个弧度值，则应首选使用弧度。

示例：利用弧度旋转一个星形

让我们看一个用弧度旋转图形的完整示例。在这个例子中，我们创建一个五角星，并将其旋转两次 $ \frac{\pi}{5} $ 弧度，以便在 10 个小三角形之间分布五角星顶点。

let angle = 0;
let centerX, centerY;
let outerRadius = 200;
let innerRadius = 75;
let totalPoints = 5;

function setup() {
  createCanvas(600, 600);
  angleMode(RADIANS); // 将弧度模式设置为角度模式
  centerX = width / 2;
  centerY = height / 2;
}

function draw() {
  background(220);
  translate(centerX, centerY);
  beginShape();
  for (let i = 0; i < totalPoints; i++) {
    let outerX = sin(angle * i) * outerRadius;
    let outerY = cos(angle * i) * outerRadius;
    vertex(outerX, outerY);
    let innerX = sin((angle * i) + (PI / totalPoints)) * innerRadius;
    let innerY = cos((angle * i) + (PI / totalPoints)) * innerRadius;
    vertex(innerX, innerY);
  }
  endShape(CLOSE);
  angle += 0.01;
}

我们首先定义用于星形的一些变量，包括星形中心点的 $(x，y)$ 坐标，内半径、外半径和星形的总顶点数。

在 setup() 函数中，我们将弧度模式设置为“弧度模式”，因为本示例中的旋转应使用弧度。

在 draw() 函数中，我们进行旋转、绘制星形和增加角度。

我们首先将星形绘制到 (centerX，centerY) 这个点位置。然后我们使用 for 循环绘制五角星的所有点。要绘制每个点，我们使用三角函数 sin() 和 cos() 来计算点的 $(x，y)$ 坐标。我们使用内部和外部半径来控制星形的大小。

通过每次增加 $0.01$ 的角度值，我们可以看到星形旋转的效果。由于我们使用弧度，星形可以平稳自然地旋转。

小结

在P5.js中，弧度是一个非常有用的工具，可以帮助开发人员进行旋转、以及各种转换和定位。在本文中，我们了解了弧度是什么，并且使用示例展示了如何使用P5.js中的弧度。

但它并不仅仅用于图形和视觉元素。 在许多计算领域，尤其是在数学中，都有广泛应用。

现在你可以去使用弧度的知识，并探索如何在你的项目中使用它。