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

Question

I am trying to lerp the positions of items in Processing. So that item one moves to item two with a little ease. In my code I have a small red rectangle and want to lerp its position to the green rectangle while key "x" is pressed. The green rectangle has a target position (mouseX and mouseY) The lerp works perfect!

But I want to add a little rotate on the red rectangle – and the correct "translate()" for this just give me headaches – I want to let it rotate a little around the upper left corner of the green rectangle.

For example if its position is 0,0, (the green one) – it works the way I want – but if its somewhere else it gets kind of crazy – Can somebody explain the correct translates for that? I really don't get the translated coordinate system…

See the code here:

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();
    }
  }
}

Thank you for any kind of help … I would love to understand the correct translates!

++++ EDIT ++++

This code does the rotation as I want to achieve it – and the right placement … but the lerp does not work anymore in this case! Does someone know why?

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;
    }
  }
}

Could you be a little more clear? Or draw a simple diagram of what you’re trying to achieve? — LuckyBandit74, Jun 28 '21 at 20:17
Hey LuckBandit74, thank you for looking at my question! I edited it in the hope to be more precise :-) — Cyrill, Jun 28 '21 at 21:00
Ah I think I get it. So basically you want to rotate your red rectangle but it doesn’t work when it’s not rotating around 0, 0. In this case, take a look at this link, which shows how to rotate a point around another point, hopefully this will provide some insight: https://academo.org/demos/rotation-about-point/ — LuckyBandit74, Jun 28 '21 at 21:04

score 2 · Accepted Answer · answered Jun 29 '21 at 17:46

Here's a solution from your original code: just change the stuff between pushMatrix() and popMatrix():

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

The key to rotating a shape is to translate such that you're drawing it at the origin.

As for your other code, you are setting x = y = 0 at the start of every frame, so the lerp you're doing later on in the frame doesn't carry over to the next one. It's a pretty simple fix: comment out lines 16 and 17, change the translate to translate(x, y);, and change the rect to rect(0, 0, 50, 50);

YEEESSS! Ah I see – this is the key! Thank you so much, yes i was thinking kind of this direction – but could not realize it this sharp! Thank you! — Cyrill, Jun 30 '21 at 06:25

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

1 Answers1