如何让矩形在处理中围绕 MouseX、MouseY 旋转

Question

我正在尝试调整处理中项目的位置。因此，第一项轻松地移动到第二项。在我的代码中，我有一个小的红色矩形，并且希望在按下“x”键时将其位置调整到绿色矩形。绿色矩形有一个目标位置（mouseX 和 mouseY） lerp 完美！

但我想在红色矩形上添加一点旋转——而正确的“translate()”让我头疼——我想让它围绕绿色矩形的左上角旋转一点。

例如，如果它的位置是 0,0，（绿色的）——它按我想要的方式工作——但如果它在其他地方它会变得有点疯狂——有人可以解释正确的翻译吗？我真的没有得到翻译后的坐标系……

在此处查看代码：

float x;
float y;
float targetX;
float targetY;
int size;

void setup() {
  size(500, 500);
  size = 20;
  noStroke();
  x = 0;
  y = 0;
}

void draw() {
  targetX = mouseX;
  targetY = mouseY;
  background(255);
  fill(0, 255, 0);

  rect(targetX, targetY, 200, 200);
  fill(255, 0, 0);

  if (keyPressed) {
    if (key == 'x') {
      x = lerp(x, targetX, 0.1); 
      y = lerp(y, targetY, 0.1);
      pushMatrix();
      float wave = map(sin(radians(frameCount)), -1, 1, -33, 33);
      translate(mouseX, mouseY);
      rotate(radians(wave));
      translate(-15, -15);
      translate(-mouseX/2, -mouseY/2);
       rect(x, y, 30, 30);
      popMatrix();
    }
  }
}

感谢您的任何帮助……我很想理解正确的翻译！

++++ 编辑 ++++

这段代码按照我想要的方式进行旋转——以及正确的位置……但在这种情况下，lerp 不再起作用了！有人知道为什么吗？

float targetX;
float targetY;
float x;
float y;

void setup() {

  size(200, 200);
  targetX = 0;
  targetY = 0;
}

void draw() {


  x = 0;
  y = 0;

  rectMode(CENTER);
  background(255);
  pushMatrix();
  translate(targetX, targetY);
  rotate(radians(frameCount));
  fill(255, 0, 0);
  rect(x, y, 50, 50);
  popMatrix();

  fill(0, 255, 0);
  rect(mouseX, mouseY, 10, 10);

  if (keyPressed) {
    if (key == 'x') {

      x = lerp(x, targetX, 0.1); 
      y = lerp(y, targetY, 0.1);

      targetX = mouseX;
      targetY = mouseY;
    }
  }
}

Answer 1

这是您原始代码的解决方案：只需更改 pushMatrix() 和 popMatrix() 之间的内容：

pushMatrix();
float wave = map(sin(radians(frameCount)), -1, 1, -33, 33);
translate(x, y);
rotate(radians(wave));
rect(0, 0, 30, 30);
popMatrix();

旋转形状的关键是平移，以便在原点绘制它。

至于您的其他代码，您在每一帧的开头设置x = y = 0，因此您稍后在帧中执行的 lerp 不会延续到下一帧。这是一个非常简单的解决方法：注释掉第 16 行和第 17 行，将 translate 更改为 translate(x, y);，并将 rect 更改为 rect(0, 0, 50, 50);