提问者:小点点

如何让一个矩形在处理中围绕MouseX,MouseY旋转


我正在尝试lerp处理中项目的位置。这样项目一就可以轻松地移动到项目二。在我的代码中,我有一个红色的小矩形,我想在按下键“x”时将其位置lerp到绿色矩形。绿色矩形有一个目标位置(鼠标X和鼠标Y)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;
    }
  }
}

共1个答案

匿名用户

这里有一个来自原始代码的解决方案:只需更改< code>pushMatrix()和< code>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)