p5.js 旋转Z 事件

在 p5.js 中，我们可以使用 rotateZ() 函数来绕 Z 轴旋转画布。

简单示例

以下是一个简单的示例代码，用于旋转一个矩形：

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

function draw() {
  background(220);

  rectMode(CENTER);
  rect(200, 200, 100, 50);

  // 绕 Z 轴旋转矩形
  rotateZ(frameCount * 0.01);
}

在上述代码中，我们首先创建了一个 400*400 的画布。接着，我们在画布中心绘制一个宽度为 100，高度为 50 的矩形。

关键在于 rotateZ(frameCount * 0.01)。frameCount 是 p5.js 的内置变量，用于获取当前帧数。我们每帧将它乘以 0.01，就可以得到一个随时间变化的角度。这个角度作为参数传递给 rotateZ()，就可以实现绕 Z 轴旋转画布了。

使用鼠标事件控制旋转

如果我们希望通过鼠标事件控制旋转，可以这样做：

let angle = 0;

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

function draw() {
  background(220);

  rectMode(CENTER);
  rect(200, 200, 100, 50);

  // 绕 Z 轴旋转矩形
  rotateZ(angle);
}

function mouseMoved() {
  angle = map(mouseX, 0, width, 0, TWO_PI);
}

在上述代码中，我们定义了一个 angle 变量，用于记录旋转角度。在 draw() 函数中，我们调用 rotateZ(angle) 来旋转矩形。

关键在于 mouseMoved() 函数。该函数是 p5.js 内置的一个事件，用于在鼠标移动时调用。我们使用 map() 函数将鼠标的 X 坐标从 0 到宽度映射到 0 到 2π 上，得到一个角度值，然后将它赋值给 angle 变量。

这样，当鼠标在画布上移动时，矩形就会相应地旋转起来。

结论

在 p5.js 中，我们可以使用 rotateZ() 函数来绕 Z 轴旋转画布。我们可以通过设置固定的角度或响应鼠标事件来控制旋转。