# Having a hard time rotating image about a point

**URL:** <https://discourse.processing.org/t/having-a-hard-time-rotating-image-about-a-point/36083>\
**Category:** Libraries\
**Created:** [April 2, 2022, 4:44pm UTC](https://discourse.processing.org/t/having-a-hard-time-rotating-image-about-a-point/36083 "2022-04-02T16:44:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Xwalt](https://avatars.discourse-cdn.com/v4/letter/x/d07c76/32.png) [@Xwalt](https://discourse.processing.org/u/Xwalt)\
**Post date:** [April 2, 2022, 4:44pm UTC](https://discourse.processing.org/t/having-a-hard-time-rotating-image-about-a-point/36083/1 "2022-04-02T16:44:53Z")

</div>

```auto
PImage base;
PImage midarm;
PImage secondarm;
int baserotation;
int midarmrotation;
int secondarmrotation;
int baseX ;
int baseY ;
int midarmX ;
int midarmY;
int secondarmX ;
int secondarmY ;
import controlP5.*;

ControlP5 cp5;
void setup() {
    size(1920,1080);
 base = loadImage("base.png"); 
     midarm = loadImage("midarm.png"); 
 secondarm= loadImage("secondarm.png");
 image(base,baseX,baseY);

  
 smooth();
  frameRate(30);
  translate(300,400);
    cp5 = new ControlP5(this);
     cp5.addSlider("sliderValue")
     .setPosition(800,400)
    .setSize(500,500)
     .setRange(0,100)
     .setNumberOfTickMarks(101)
     ;
}

void draw() {

drawmid ();

}

void drawmid (){
   background(0);
  stroke(255);
   imageMode(CENTER);
midarmrotation= int(cp5.getController("sliderValue").getValue());
  pushMatrix();
   background(0);
translate(midarmX, midarmY);
rotate(midarmrotation);
 image(midarm,-midarmX, -midarmY);
    popMatrix();   

}

```

I am building a controller for a robotic arm and require 2 of the images to rotate about the pivot point. The second arm is connected to the first and should move similar to this:

> **[Arm / Examples](https://processing.org/examples/arm.html)**
>
> The angle of each segment is controlled with the mouseX and mouseY position. The transformations applied to the first segment are also applied to the second segment because they are inside the same pu…

I can’t seem to get even the first arm to rotate about the pivot point (the middle of the bottom circle). Any help would be appreciated.

Middle Arm:

 ![midarm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/6/96206652258be305053d8c6b930fc9d412222fd3.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 2, 2022, 5:14pm UTC](https://discourse.processing.org/t/having-a-hard-time-rotating-image-about-a-point/36083/2 "2022-04-02T17:14:48Z")

</div>

> [@Xwalt](#):
>
> ```auto
> translate(midarmX, midarmY);
> rotate(midarmrotation);
> image(midarm,-midarmX, -midarmY);
> 
> ```

Try

```auto
translate(midarmX, midarmY);
rotate(midarmrotation);
translate(60, 0);

 image(midarm,0,0 );

```

The key is the 2nd translate after the rotate

Replace 60 with length of the arm / 2 (and 0 maybe with half of its width, but 0 is probably okay)

Hey, and welcome to the forum!

Chrisir

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 2, 2022, 8:48pm UTC](https://discourse.processing.org/t/having-a-hard-time-rotating-image-about-a-point/36083/3 "2022-04-02T20:48:43Z")

</div>

Hello @Xwalt ,

Example here:

> [@Help in Rotate Image in JAVA2D](https://discourse.processing.org/t/help-in-rotate-image-in-java2d/33852/4):
>
> Hello, I used this image because it was offset: [https://www.pngall.com/wp-content/uploads/6/Vector-Tribal-Arrow-PNG-Image-HD.png](https://www.pngall.com/wp-content/uploads/6/Vector-Tribal-Arrow-PNG-Image-HD.png) Code to peruse: push(); rotate(frameCount\*TAU/360); noFill(); translate(0, -25); // Estimated (visually) that it was about 1/4 of height rect(0, 0, 200, 100); // To see image size image(img, 0, 0); pop(); [test.mov] slight_smile

`:)`

---

<div class="post-metadata">

**Author:** ![Xwalt](https://avatars.discourse-cdn.com/v4/letter/x/d07c76/32.png) [@Xwalt](https://discourse.processing.org/u/Xwalt)\
**Post date:** [April 3, 2022, 2:21am UTC](https://discourse.processing.org/t/having-a-hard-time-rotating-image-about-a-point/36083/4 "2022-04-03T02:21:41Z")

</div>

Thanks a lot. I managed to get it to work sort of with the second translate after rotate.

```auto
PImage base;
PImage midarm;
PImage secondarm;
int baserotation;
int midarmrotation;
float secondarmrotation;
int baseX ;
int baseY ;
int midarmX ;
int midarmY;
int secondarmX ;
int secondarmY ;

import controlP5.*;

ControlP5 cp5;
void setup() {
    size(1920,1080);
 base = loadImage("base.png"); 
     midarm = loadImage("midarm.png"); 
 secondarm= loadImage("secondarm.png");
 image(base,baseX,baseY);
baseX=500;
baseY=555;
midarmX=500;
midarmY=500;
secondarmX=500;
secondarmY=300;

  
 smooth();
  frameRate(30);
  //translate(300,400);
    cp5 = new ControlP5(this);
     cp5.addSlider("sliderMID")
     .setPosition(1000,400)
    .setSize(200,500)
     .setRange(0,100)
     .setNumberOfTickMarks(101)
     .setValue(0)
     ;
       cp5.addSlider("slider2ND")
     .setPosition(1500,400)
    .setSize(200,500)
     .setRange(0,100)
     .setNumberOfTickMarks(101)
     .setValue(00)
     ;
}

void draw() {

  background(0);
   image(base,baseX,baseY);
      drawsecondarm ();
   drawmid ();

}

void drawmid (){
   imageMode(CENTER);
midarmrotation= int(cp5.getController("sliderMID").getValue());
  pushMatrix();
 
translate(midarmX, midarmY);
rotate(2.5*PI-PI*0.01*midarmrotation);
translate(-1, -3.5);

 image(midarm,0,0);
    popMatrix();   

}

void drawsecondarm (){
   imageMode(CENTER);
   secondarmrotation= int(cp5.getController("slider2ND").getValue());
 
  pushMatrix();
translate(secondarmX, secondarmY);
rotate(2.5*PI-PI*0.01*secondarmrotation);
translate(-1, -3.5);

 image(secondarm,0,0);
    popMatrix();   

}

```

I need the second arm (pictured below) to move along with the middle arm when it rotates, Is there an easier way to go about doing this?

 ![secondarm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/3/e3a8633020e09e6429134434923eb9f0300ade2a.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 3, 2022, 10:15am UTC](https://discourse.processing.org/t/having-a-hard-time-rotating-image-about-a-point/36083/5 "2022-04-03T10:15:00Z")

</div>

In theory you draw the first arm and use translate to go to its end. Then you rotate() the angle of the 2nd arm.  
Then you translate half the width of the 2nd arm and draw it.

There is an example on the website in the example section with robotic arms iirc

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 3, 2022, 11:05am UTC](https://discourse.processing.org/t/having-a-hard-time-rotating-image-about-a-point/36083/6 "2022-04-03T11:05:05Z")

</div>

> [@Xwalt](#):
>
> I need the second arm (pictured below) to move along with the middle arm when it rotates, Is there an easier way to go about doing this?

Hello @Xwait,

Consider using PVectors.

References:

[https://processing.org/tutorials/pvector](https://processing.org/tutorials/pvector)  
[https://processing.org/reference/PVector.html](https://processing.org/reference/PVector.html)  
[https://processing.org/examples/vectormath.html](https://processing.org/examples/vectormath.html)  
[https://natureofcode.com/book/chapter-1-vectors/](https://natureofcode.com/book/chapter-1-vectors/)

I add a few lines of code to the example:

```auto
/**
 * Vector 
 * by Daniel Shiffman.  
 * 
 * Demonstration of some basic vector math: subtraction, 
 * normalization, scaling. Normalizing a vector sets 
 * its length to 1.
 */
void setup() {
  size(640,360);
}

void draw() {
  background(0);
  
  // A vector that points to the mouse location
  PVector mouse = new PVector(mouseX,mouseY);
  
  // A vector that points to the center of the window
  PVector center = new PVector(width/2,height/2);
  
  // Subtract center from mouse which results in a 
  // vector that points from center to mouse
  mouse.sub(center);
  
  // Normalize the vector
  mouse.normalize();
  
  // Multiply its length by 150 (Scaling its length)
  mouse.mult(150);

  translate(width/2,height/2);
  // Draw the resulting vector
  stroke(255);
  strokeWeight(4);
  line(0,0,mouse.x,mouse.y);
  
  //glv added:
  PVector arm2 = new PVector(100, 0); //glv added
  arm2.set(100, 0);
  arm2.rotate(mouseY*TAU/height);
  arm2.add(mouse);
  line(mouse.x, mouse.y, arm2.x, arm2.y);
}

```

There is a learning curve to using PVectors but it is worth it!

`:)`