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

问题描述

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

  if (keyPressed) {
    if (key == 'x') {
      x = lerp(x,targetX,0.1); 
      y = lerp(y,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);
  rect(x,50,50);
  popMatrix();

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

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

      x = lerp(x,0.1);

      targetX = mouseX;
      targetY = mouseY;
    }
  }
}

解决方法

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

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

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

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