p5.js | 旋转Z()函数

简介

rotateZ()是p5.js中一个旋转图形的函数，可以将一个图形绕着Z轴旋转。该函数是一个变换函数，经常用于3D图形的绘制，并可以与其他变换函数一起使用。通过设置旋转角度，可以实现图形的倾斜、扭曲等效果。

语法

rotateZ(angle)

• angle：旋转的角度，以弧度为单位。

示例

下面是一个简单的使用rotateZ()函数的示例，它会在画布的中心绘制一个矩形，然后将其绕着Z轴旋转45度：

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

function draw() {
  background(200);
  rotateZ(45);
  rect(0, 0, 100, 100);
}

注意事项

• 旋转角度的默认单位是弧度，在使用之前需要将角度转换为弧度。
• 旋转是累积的，这意味着每个后续的旋转操作都将在之前的操作的基础上进行。如果你想重置旋转角度，可以使用resetMatrix()函数。
• 旋转函数只会对当前所有的形状或图形产生影响，并不会对以前的形状或图形产生影响。

结语

rotateZ()函数是p5.js中一个非常有用的函数，使用它可以轻松地实现3D图形的旋转效果。掌握了这个函数的使用，相信可以让我们的图形设计更加丰富多彩。