在 p5.js 中将多边形旋转给定度数

简介

p5.js 是一个用于创意编程的 JavaScript 库，它可以帮助你在浏览器中生成像素级的图形和交互式 GUI。在 p5.js 中进行图形、动画和互动设计时，经常需要涉及到角度的计算，在这其中我们需要用到旋转的概念。

本文将介绍如何在 p5.js 中将多边形旋转给定度数。

实现步骤

我们可以通过以下的步骤实现多边形旋转：

1. 定义一个多边形数组，其中存储多边形的各个顶点的坐标。
2. 定义一个旋转角度。
3. 将多边形的每个顶点绕某个点旋转一定的角度。
4. 用变换后的顶点重新绘制多边形。

在 p5.js 中，我们可以使用 rotate() 函数来旋转多边形。rotate(angle, [axis]) 函数接受一个旋转角度和一个可选的旋转轴参数，用于旋转多边形。

以下是实现多边形旋转的 p5.js 代码片段：

let angle = 0; // 定义旋转角度变量
let poly = []; // 定义多边形数组

function setup() {
  createCanvas(400, 400);
  
  // 生成一个正六边形
  for (let i = 0; i < 6; i++) {
    let x = 100 * cos(TWO_PI / 6 * i) + width / 2;
    let y = 100 * sin(TWO_PI / 6 * i) + height / 2;
    poly[i] = createVector(x, y);
  }
}

function draw() {
  background(220);
  stroke(0);
  strokeWeight(2);
  fill(255);

  // 开始旋转多边形
  push();
  translate(width / 2, height / 2);
  rotate(radians(angle)); // 将角度转化为弧度
  beginShape();
  // 绘制多边形
  for (let i = 0; i < poly.length; i++) {
    vertex(poly[i].x - width / 2, poly[i].y - height / 2);
  }
  endShape(CLOSE);
  pop();
  
  angle += 3; // 每帧旋转3度
}

解释

上述代码中，首先我们定义了一个 angle 变量来表示当前旋转的角度。

在 setup() 函数中，我们生成了一个正六边形，并将各个顶点坐标存储在 poly 数组中。

在 draw() 函数中，我们先清空画布，并设置线条宽度和填充颜色。然后，我们使用 push() 和 pop() 函数对图形进行位移和旋转，以确保旋转仅对多边形有效。

在 push() 函数中，我们先将画布的原点移动到画布中心，使多边形的旋转中心在画布中心；然后使用 rotate() 函数将多边形以 angle 角度旋转。为了正确旋转多边形，我们需要将 angle 角度转化为弧度。

在旋转完成后，我们使用 beginShape() 开始绘制多边形，并使用 vertex() 函数将多边形的各个顶点连接起来。最后，我们用 endShape(CLOSE) 函数将多边形封闭。

最后，我们在 draw() 函数的末尾递增 angle 变量，从而实现多边形的不断旋转。

结论

通过本文的介绍，你已经学会了在 p5.js 中对多边形进行旋转的方法。通过灵活运用 rotate() 函数和 p5.js 库中提供的其他函数，你可以实现各种有趣的图形效果、动画效果和互动设计。