如何在 p5js 中旋转对象？

Question

我目前正在制作一个类似于 John Conway 的 Game of Life 的项目，我想知道如何在不使用 rotate() 的情况下旋转一个点。当我使用它时，它会围绕 canvas 旋转，这里的代码很难解释：

//Setup
var x;
var y;
var x2;
var y2;
var x3;
var y3;
let slider;

function setup() {
  //Setup and Varibles
  createCanvas(400, 400);
  x = 200;
  y = 200;
  x2 = 150;
  y2 = 100;
  x3 = 300;
  y3 = 220;

  slider = createSlider(0, 255, 100);
  slider.position(10, 10);
  slider.style("width", "80px");
}

function draw() {
  let val = slider.value();
  background(54);
  stroke(255);

  strokeWeight(1);
  line(x, y, x + 30, y - 10);
  strokeWeight(10);
  point(x, y);
  var r = ceil(random(5));
  //Player 1 AI
  switch (r) {
    case 0:
      x = x + 2;
      break;
    case 1:
      x = x - 2;
      break;
    case 2:
      y = y + 2;
      break;
    case 3:
      y = y - 2;
      break;
    case 4:
      //EXTRA
      break;
  }
  point(x2, y2);
  var ra = floor(random(5));

  //Player 2 AI
  switch (ra) {
    case 0:
      x2 = x2 + 2;
      break;
    case 1:
      x2 = x2 - 2;
      break;
    case 2:
      y2 = y2 + 2;
      break;
    case 3:
      y2 = y2 - 2;
      break;
    case 4:
      //EXTRA
      break;
  }
  //Player 3 AI
  var ran = ceil(random(5));
  point(x3, y3);
  switch (ran) {
    case 0:
      x3 = x3 + 2;
      break;
    case 1:
      x3 = x3 - 2;
      break;
    case 2:
      y3 = y3 + 2;
      break;
    case 3:
      y3 = y3 - 2;
      break;
    case 4:
      //EXTRA
      break;
  }
  //Collision detection between Players
  var d = int(dist(x2, y2, x, y));
  var d2 = int(dist(x3, y3, x, y));
  var d3 = int(dist(x2, y2, x3, y3));

  function reset() {
    x = 200;
    y = 200;
    x2 = 150;
    y2 = 100;
    x3 = 300;
    y3 = 220;
  }
  noStroke();
  text("1", x - 3, y - 5);
  text("2", x2 - 3, y2 - 5);
  text("3", x3 - 3, y3 - 5);
  if (d === 10) {
    reset();
  }
  if (d2 === 10) {
    reset();
  }
  if (d3 === 10) {
    reset();
  }
  //Barriers
  if (y === 0) {
    reset();
  }
  if (y2 === 0) {
    reset();
  }
  if (y3 === 0) {
    reset();
  }
  if (y === 400) {
    reset();
  }
  if (y2 === 400) {
    reset();
  }
  if (y3 === 400) {
    reset();
  }
  if (x === 400) {
    reset();
  }
  if (x2 === 400) {
    reset();
  }
  if (x3 === 400) {
    reset();
  }
  if (x === 0) {
    reset();
  }
  if (x2 === 0) {
    reset();
  }
  if (x3 === 0) {
    reset();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

谢谢 https://editor.p5js.org/ 如果答案很简单，我是新手 p5js 很抱歉！

Answer 1

除非所讨论的形状非常简单（即只是一条线）。那么我想您一定会想要使用 rotate() 函数。听起来您一直在尝试仅使用 rotate()，它将围绕 canvas 的原点（位置 0, 0）旋转所有未来的绘图命令。为了围绕其原点旋转特定对象，您需要 translate 该原点，然后执行旋转，然后绘制对象。绘制旋转对象后，您可以使用 pop() 将平移和旋转重置为原始状态。这是一个例子：

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Draw squares centered on the origin
  rectMode(CENTER);
}

function draw() {
  background(100);
  for (let i = 1; i <= 4; i++) {
    // Save the current state (translation/rotation/etc)
    push();
    // Translate to the origin of the shape
    translate(mouseX * i / 4, mouseY * i / 4);
    // Rotate around the origin
    rotate(millis() / 1000 * PI / 2);
    // Because we've translated to the origin, we draw the square at 0, 0
    square(0, 0, 50);
    // Restore the state saved with push();
    pop();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

为了证明为什么这比替代方法更容易，这里有一个例子，它做同样的事情但不使用 translate() 或 rotate():

function setup() {
  createCanvas(windowWidth, windowHeight);
}

// Declare each vertex of our geometry as a vector from the origin.
const rectPoints = [
  new p5.Vector(-25, -25),
  new p5.Vector(25, -25),
  new p5.Vector(25, 25),
  new p5.Vector(-25, 25)
];

function draw() {
  background(100);
  let angle = millis() / 1000 * PI / 2;
  // Use p5.Vector.rotate to rotate each of the points that defines our geometry
  let rotatedRectPoints = rectPoints.map(v => v.copy().rotate(angle));
  for (let i = 1; i <= 4; i++) {
    // We can't using normal primitives like square(), so we have to draw shapes
    // with beginShape/endShape
    beginShape();
    for (const p of rotatedRectPoints) {
      vertex(p.x + mouseX * i / 4, p.y + mouseY * i / 4);
    }
    endShape();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

如何在 p5js 中旋转对象？

How do I rotate an object in p5js?

p5.js