介绍 p5.js 中的常数 QUARTER_PI

p5.js 是一款基于 Processing 的 JavaScript 库，它可以帮助我们轻松地创建交互式的图形和动画。在 p5.js 中，有很多常数可用于图形和动画的设计。

其中之一就是 QUARTER_PI 常数。QUARTER_PI 表示的是𝜋/4的值，正好是45度的角度值。在需要用到这个角度值的地方，直接使用 QUARTER_PI 常数将非常方便。

什么时候使用 QUARTER_PI 常数？

在处理正弦函数、余弦函数等涉及到角度的场景中，我们需要将角度转换成弧度，传递给 p5.js 常用的三角函数（sin(), cos(), tan()）。

事实上，在填写角度参数时，p5.js 也可以自动进行度数和弧度之间的转换，但是在某些情况下，需要我们手动填写特定的弧度值，而这时使用 QUARTER_PI 将会更加方便。

例如，我们需要在画布上绘制一个矩形，左下角的角度为45度，此时我们可以使用 QUARTER_PI 常数，将其转换为弧度，并作为角度参数传递给函数。

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

function draw() {
  background(220);
  fill(255, 0, 0);
  rect(100, 100, 100, 100, QUARTER_PI);
}

上述代码将在画布上绘制一个左下角是45度角的矩形。

如何将角度值转换成弧度值？

在上面的示例代码中，我们使用了 QUARTER_PI 常数来表示45度的角度值所对应的弧度值。那么，如何将角度值转换成弧度值呢？

答案就是使用 radians() 函数。radians() 函数可以将角度值转换成弧度值。例如，radians(45) 将返回弧度制下的45度的值。

因此，我们可以将 QUARTER_PI 等角度值的常数作为参数传递给 radians() 函数，来得到它们所对应的弧度值。

例如，下面的代码段展示了如何使用 QUARTER_PI 常数及 radians() 函数来绘制一个旋转45度的矩形：

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

function draw() {
  background(220);
  fill(255, 0, 0);
  push();
  translate(100, 100);
  rotate(QUARTER_PI);
  rect(0, 0, 100, 100);
  pop();
}

总结

在 p5.js 中，QUARTER_PI 常数表示的是𝜋/4的值，正好是45度的角度值。在处理需要用到角度的场景中，使用 QUARTER_PI 常数将非常方便。同时，我们也可以使用 radians() 函数将角度值转换成弧度值，来传递给 p5.js 常用的三角函数。