Trying to rotate shapes based on mouse input in Processing

Question

I’ve successfully created two overlaying stars using multiple triangles. My goal is to be able to drag the mouse and have each star rotate in a different direction (one clockwise and one counterclockwise).

However, whenever I try to rotate or translate the shapes in the code, they do not remain static and rotate off the screen. I’d basically like to spin each star while keeping it in static and in same position it resides now (like a wheel). Can anyone help me with this?

Here is my current code.

`

float x = 900;
float y = 500;
float r = 0;

void setup(){
  size (1800,1000);
}

void draw() {
  background (0);
  beginShape();
  fill(139,19,191);
  triangle(1000,600,900,850,800,600);
  fill(20,134,245);
  triangle (1100,400,1250,600,1000,600);
  fill(191,8,8);
  triangle(800,600,550,600,700,400);
  fill(86,165,3);
  triangle(700,400,550,100,900,350);
  fill(167,167,166);
  triangle(900,350,1250,100,1100,400);
  endShape();

  beginShape();
  fill(139,19,191);
  triangle(800,350,900,100,1000,350);
  fill(86,165,3);
  triangle(1000,350,1250,350,1100,550);
  fill(167,167,166);
  triangle(700,550,550,350,800,350);
  fill(20,134,245);
  triangle(700,550,550,850,900,650);
  fill(191,8,8);
  triangle(1100,550,1250,850,900,650);
  endShape();

  fill(0,0,0);
  circle(900,500,425);
}

`

I tried using the rotate and translate functions, but they send the stars off screen rather than keeping theme static and merely spinning them in place.

score 2 · Answer 1 · answered Dec 05 '22 at 11:35

You can use mouseDragged() to update the x,y variables you already declared:

void mouseDragged(){
  x = mouseX - width / 2;
  y = mouseY - height / 2;
}

Above we're offsettting by half the sketch dimensions as all the coordinates used currently to draw triangles and the circle are absolute.

Here's an updated version of your sketch using translate() to move drag the shapes:

float x = 0;
float y = 0;
float r = 0;

void setup(){
  size (1800,1000);
}

void draw() {
  background (0);
  
  translate(x, y);
  
  beginShape();
  fill(139,19,191);
  triangle(1000,600,900,850,800,600);
  fill(20,134,245);
  triangle (1100,400,1250,600,1000,600);
  fill(191,8,8);
  triangle(800,600,550,600,700,400);
  fill(86,165,3);
  triangle(700,400,550,100,900,350);
  fill(167,167,166);
  triangle(900,350,1250,100,1100,400);
  endShape();

  beginShape();
  fill(139,19,191);
  triangle(800,350,900,100,1000,350);
  fill(86,165,3);
  triangle(1000,350,1250,350,1100,550);
  fill(167,167,166);
  triangle(700,550,550,350,800,350);
  fill(20,134,245);
  triangle(700,550,550,850,900,650);
  fill(191,8,8);
  triangle(1100,550,1250,850,900,650);
  endShape();

  fill(0,0,0);
  circle(900,500,425);
}

void mouseDragged(){
  x = mouseX - width / 2;
  y = mouseY - height / 2;
}

void circle(float x, float y, float r){
  ellipse(x, y, r, r);
}

(Note that you can add x,y to every single x,y pair or arguments for triangle(), circle(), but using transformations can simplify things so you don't have to manually do the maths. (translation is easier: simply add, rotation already gets into trigonometry))

To handle rotations in opposite directions for each group you would need to use independent coordinate systems (e.g. the groups rotate on they're own, without affecting global rotation).

You can achieve this by applying transformations (translate(), rotate(), scale()) within pushMatrix() / popMatrix(). I warmly recommend the 2D Transformations tutorial.

With you particular sketch, it would also help to have the elements drawn using relative coordinates as opposed to absolute coordinates. (Doing the 2D transformations tutorial you'll notice the order of transformations is important (e.g. if you rotate first, then translate your shapes will land in a different place as opposed to translating first, then rotating).

Here's a (very roughly tweaked) version of your code using relative coordinates and independent coordinate systems:

float x = 0;
float y = 0;
float r = 0;

void setup(){
  size (1800,1000);
}

void draw() {
  background (0);
  
  translate(x, y);
  
  pushMatrix();
    
    rotate(frameCount * 0.01);
    fill(139,19,191);
    triangle( 100,  100,    0,  350, -100,  100);
    fill(20,134,245);
    triangle( 200, -100,  350,  100,  100,  100);
    fill(191,8,8);
    triangle(-100,  100, -350,  100, -200, -100);
    fill(86,165,3);
    triangle(-200, -100, -350, -400,    0, -150);
    fill(167,167,166);
    triangle(   0, -150,  350, -400,  200, -100);
    
  popMatrix();
  
  pushMatrix();
    rotate(frameCount * -0.01);
      
    fill(139,19,191);
    triangle(-100, -150,    0, -400,  100, -150);
    fill(86,165,3);
    triangle( 100, -150,  350, -150,  200,   50);
    fill(167,167,166);
    triangle(-200,   50, -350, -150, -100, -150);
    fill(20,134,245);
    triangle(-200,   50, -350,  350,    0,  150);
    fill(191,8,8);
    triangle( 200,  50, 350, 350,   0, 150);
  popMatrix();
  
  fill(0,0,0);
  circle(0, 0, 425);
}
// on mouse drag update x,y translation
void mouseDragged(){
  x = mouseX;
  y = mouseY;
}

void circle(float x, float y, float r){
  ellipse(x, y, r, r);
}

Trying to rotate shapes based on mouse input in Processing

1 Answers1