Processing中如何让矩形围绕MouseX、MouseY旋转

Question

我正在尝试对 Processing 中项目的位置进行 lerp。因此，第一项可以轻松地移动到第二项。在我的代码中，我有一个红色的小矩形，并希望在按下“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);

Processing中如何让矩形围绕MouseX、MouseY旋转

How to let a rectangle rotate around MouseX, MouseY in Processing

java

mouse

processing

rotation

lerp