如何在不改变其在 javascript 中的位置的情况下旋转形状

Question

我的代码有问题。我正在为一个类创建一个小东西，您可以在其中单击在屏幕上弹跳的火鸡。然而，我在制作火鸡时遇到了障碍。我们在课堂上做了几个例子，现在我正在尝试使用代码的不同方面来制作一个最终脚本。

现在，我需要旋转 5 个椭圆来完成火鸡设计，但我无法让 rotate() 和 translate() 正常工作。虽然我的椭圆按我想要的方式旋转，但它不会出现在同一位置，具体取决于我单击以绘制火鸡的位置。

如果有人可以向我解释如何使用旋转，同时在绘制火鸡时保持我想要的相对于火鸡其余部分的形状，我将非常感激。

到目前为止，这是我的代码，我想在脚本的最底部旋转第一根羽毛（请注意，我仍然会解决一些问题，但我只是专注于在处理它们之前完成火鸡):

let bubbles = []; //arrayList

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  speedX = random(1, 3);
  speedY = random(1, 2);
}

function mouseDragged() {
  let a = bubbles.length;
  bubbles.pop(a);
}

function mousePressed() {
  let d = random(10, 50);
  let b = new Bubble(mouseX, mouseY, d);
  bubbles.push(b);
}

function draw() {
  background(255);
  for (let bubble of bubbles) {
    // bubble.move();
    bubble.show();
  }
}

class Bubble {
  constructor(x, y, d) {
    this.x = x;
    this.y = y;
    this.d = d;
    this.speedX = random(1, 10);
    this.speedY = random(1, 10);
    this.d = random(0.5, 1.5);
  }
  move() {
    if (this.x > width || this.x < 0) {
      this.speedX = -this.speedX;
      this.speedX *= 1.05;
      if (this.speedX > 10) this.speedX = 1;
    }
    if (this.y > height || this.y < 0) {
      this.speedY = -this.speedY;
    }
    this.x += this.speedX; //x=x+speedX;
    this.y += this.speedY;
  }
  show() {
    fill(255, 204, 0);
    ellipse(this.x, this.y + 10, 120, 300); //yellow feather

    fill(78, 39, 0);
    ellipse(this.x - 100, this.y + 120, 250, 120); //left dark feather
    ellipse(this.x + 100, this.y + 120, 250, 120); //right dark feather

    fill(153, 102, 51, 255);
    ellipse(this.x, this.y + 95, 185, 185); //body
    ellipse(this.x, this.y, 100, 100); //head

    fill(255);
    ellipse(this.x - 20, this.y - 10, 30 * this.d, 30 * this.d); //eye
    ellipse(this.x + 20, this.y - 10, 30 * this.d, 30 * this.d); //eye

    fill(0);
    ellipse(this.x - 17, this.y - 7, 15 * this.d, 15 * this.d); //pupil
    ellipse(this.x + 23, this.y - 7, 15 * this.d, 15 * this.d); //pupil

    fill(255, 0, 0);
    ellipse(this.x - 10, this.y + 40, 20, 40); //gobble
    fill(255, 153, 51);
    triangle(
      this.x,
      this.y + 60,
      this.x - 20,
      this.y + 20,
      this.x + 20,
      this.y + 20
    ); //beak

    triangle(
      this.x - 15,
      this.y + 190,
      this.x - 65,
      this.y + 190,
      this.x - 15,
      this.y + 155
    ); //left foot
    triangle(
      this.x + 15,
      this.y + 190,
      this.x + 65,
      this.y + 190,
      this.x + 15,
      this.y + 155
    ); //right foot

    fill(218, 180, 142);
    // beginShape();
    //   curveVertex(this.x-80, this.y+60); //top of wing
    //   curveVertex(this.x-115, this.y+100);//left side of wing
    //   curveVertex(this.x-115, this.y+170); //bottom of wing
    //   curveVertex(this.x-60, this.y+100); //right side of wing
    // endShape(CLOSE);
    ellipse(this.x - 80, this.y + 90, 55, 120); //left wing
    ellipse(this.x + 80, this.y + 90, 55, 120); //right wing

    push();
    translate(400, -80);
    rotate(45);
    fill(255, 0, 0);
    ellipseMode(CENTER);
    ellipse(this.x, this.y + 10, 120, 300); //yellow feather
    pop();
  }
}

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

我已经尝试过使用 translate() 将羽毛保留在我想要的位置，但我失败得很惨，因为尽管阅读了 p5js 参考资料和一些在线教程，但我认为我不明白它是如何工作的。

任何帮助都会很棒:)

Answer 1

啊，我找到解决办法了。通过将羽毛本身的 x 和 y 设置为 0，我可以将转换设置到我想要的位置，现在它可以顺利运行了:)