p5.js 旋转意想不到的结果

Question

rotate()

功能未旋转到正确的度数。该图像显示没有旋转的屏幕。如果我通过取消注释第 14 行来应用旋转命令，该行将旋转到 11 点钟位置，而不是我预期的 9 点钟位置。

function setup() {
  createCanvas(200, 200);
  angleMode = DEGREES;
}

function draw() {
  noStroke();
  fill(200, 102, 0);
  circle(100, 100, 180); //draw pivot
  strokeWeight(5);
  stroke(0, 0, 0);
  circle(100, 100, 15); //draw pivot point
  translate(100, 100); //move origin
  // rotate(180);
  //rotate(radians(180));
  line(0, 0, 90, 0);
}

但是，如果我使用第 15 行

(rotate(radians(180));

，它会按预期工作。发生什么事了？

Answer 1

rotate()

默认接受弧度作为其参数，而不是角度。通过将角度转换为弧度，这个论证就有意义了。如果没有转换，它会是一些随机的圈数，因此您最终会得到 180 弧度的任意旋转。

除了设置全局变量

angleMode = DEGREES;

 并覆盖 p5 函数之外，

angleMode

不会执行您期望的操作。一般来说，p5 中的 setter 不是赋值。正确的用法是

angleMode(DEGREES)

，这将允许

rotate()

默认接受度数，因此您不需要

radians()

调用。