p5.js 转轴变量

在 p5.js 中，转轴变量是一个全局变量，它可以帮助我们轻松地创建旋转的形状或图形。本文将介绍 p5.js 中使用转轴变量创建旋转形状的方法。

转轴变量的概念

转轴变量是一个二元数组（[x, y]），用于确定旋转点。如果不设置转轴变量，图形将以绘图区域的左上角为旋转点。

创建旋转形状

在 p5.js 中，我们可以使用 push() 和 pop() 函数来保存和还原转轴变量。以下代码展示了创建旋转形状的步骤：

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

function draw() {
  background(220);
  noFill();

  // 将转轴点移动到画布中心
  translate(width / 2, height / 2);

  // 保存当前转轴变量
  push();

  // 设置旋转角度
  let angle = frameCount / 100.0;
  rotate(angle);

  // 绘制旋转的矩形
  rect(-50, -50, 100, 100);

  // 还原转轴变量
  pop();
}

在此示例中，我们使用 translate() 函数将转轴点移动到画布中心。然后，我们使用 push() 函数保存当前转轴变量，并使用 rotate() 函数设置旋转角度。在旋转矩形之后，我们使用 pop() 函数还原转轴变量。

将转轴点设置为图形中心

我们可以将转轴点设置为图形中心，而不是将其移动到画布中心。以下代码展示了如何将转轴点设置为矩形的中心：

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

function draw() {
  background(220);
  noFill();

  // 保存当前转轴变量
  push();

  // 将转轴点移动到矩形中心
  let x = width / 2;
  let y = height / 2;
  translate(x, y);

  // 设置旋转角度
  let angle = frameCount / 100.0;
  rotate(angle);

  // 绘制旋转的矩形
  rectMode(CENTER);
  rect(0, 0, 100, 100);

  // 还原转轴变量
  pop();
}

在此示例中，我们使用 rectMode() 函数设置矩形的绘制模式为中心，并使用 translate() 函数将转轴点移动到矩形的中心。

结论

转轴变量是 p5.js 中一个非常有用的工具，它可以轻松地创建旋转的形状或图形。使用 push() 和 pop() 函数可以方便地保存和还原转轴变量。