# Is there a way to pivot an image around a certain point?

**URL:** <https://discourse.processing.org/t/is-there-a-way-to-pivot-an-image-around-a-certain-point/16947>\
**Category:** Coding Questions\
**Created:** [January 8, 2020, 2:01am UTC](https://discourse.processing.org/t/is-there-a-way-to-pivot-an-image-around-a-certain-point/16947 "2020-01-08T02:01:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![laptophead](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/laptophead/32/2701_2.png) [@laptophead](https://discourse.processing.org/u/laptophead)\
**Post date:** [January 8, 2020, 2:01am UTC](https://discourse.processing.org/t/is-there-a-way-to-pivot-an-image-around-a-certain-point/16947/1 "2020-01-08T02:01:29Z")

</div>

I need to turn this image around the hole in bottom. The hole is located 323 pixels from the top and 182 from the left edge.

I tried something like:

```auto
PImage BD1;

float R;

void setup() {
  size(1790, 1100, JAVA2D);
   BD1 = loadImage("BD1_head_small.png");
   
}

void draw() {
  background(122);

  tint(255, 100);
  translate(182, 323);
  rotate(radians(R));
  translate(182, 323);
  image(BD1, 0, 0);

 println (mouseX + " " + mouseY);
}

void mouseWheel(MouseEvent event) 
{
  float e = event.getCount();
  R = R+e;
}

```

But did not work.  
Please help.  
Thanks  
Mitch

![BD1_head_small](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a584ddc602bb8c56d628b50b2206d1ac0c5ac90f.png)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 8, 2020, 2:18am UTC](https://discourse.processing.org/t/is-there-a-way-to-pivot-an-image-around-a-certain-point/16947/2 "2020-01-08T02:18:31Z")

</div>

try:

```auto
PImage BD1;
float R;

void setup() {
  size(1790, 1100);
   BD1 = loadImage("data/BD1_head_small.png");
}

void draw() {
  background(122);
  tint(255, 100);
  translate(182, 323);
  rotate(radians(R));
  image(BD1,-182, -323);
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  R += e;
}

```

---

<div class="post-metadata">

**Author:** ![laptophead](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/laptophead/32/2701_2.png) [@laptophead](https://discourse.processing.org/u/laptophead)\
**Post date:** [January 8, 2020, 8:54pm UTC](https://discourse.processing.org/t/is-there-a-way-to-pivot-an-image-around-a-certain-point/16947/3 "2020-01-08T20:54:37Z")

</div>

KLL , Thanks a lot , that worked.  
Translate and stuff is getting me confused …

I tried to take the sketch to the next level, meaning move it by atan2 and have one more segment,

```auto
PImage BD1_T;
PImage BD1_H;
float R;
float Ang_Trunk;
float Ang_Head;
float OriginX=400;
float OriginY=400;
boolean lockTrunk, lockHead;

void setup() {
  size(1790, 1100);
   BD1_T = loadImage("data/BD1_Trunk.png");
   BD1_H = loadImage("data/BD1_Head.png");
}

void draw() {
  background(122);
  //tint(255, 100);
  
 fill(#f87729);
 
  pushMatrix(); // move trunk 
   translate(OriginX, OriginY);
   //ellipse (0,0,10,10);
   if (lockTrunk)
  Ang_Trunk = atan2(mouseY-OriginY, mouseX-OriginX);
  Ang_Trunk = constrain(Ang_Trunk, -.65, 1);
  println (degrees(Ang_Trunk));
   popMatrix();
   
   
   translate( OriginX-180, OriginY-320);
    pushMatrix();
    
  translate(180, 320);
  //rotate(radians(R));
  rotate (Ang_Trunk);
  image(BD1_H,-180, -320);
    image(BD1_T,-180, -320);
   popMatrix();
   

}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  R += e;
}

void mousePressed() 
{ if (get(mouseX, mouseY) == color(#29f83c) ) // if pressed greeen
  { println("#29f83c");
    lockTrunk=true;
    return;
  }
  
   if (get(mouseX, mouseY) == color(#f87729) ) // if pressed brown
  { println("#f87729");
    lockHead=true;
    return;
  }
 
}

void mouseReleased() {
  lockTrunk=false;
  lockHead=false;
  
  }

```

I was able to move the whole thing by grabbing the brown dot, but how can I move just the head from the green dot?  
And then , the brown to move everything. (Trunk and Head)

The head pivot point is 180 pix from X0 of the pic and 170 from the Y0 of the pic.  
The trunk pivot offset is 180 and 170 pixels,

here are the files so you can duplicate

Thanks a lot, this is so complex… ![BD1_Head](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a9575a343ce2cde08fae4856bda981147d2e723d.png) ![BD1_Trunk](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c0275de7263444ff372f2b00074b00ff1760b7e8.png)

---

<div class="post-metadata">

**Author:** ![laptophead](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/laptophead/32/2701_2.png) [@laptophead](https://discourse.processing.org/u/laptophead)\
**Post date:** [January 9, 2020, 1:22am UTC](https://discourse.processing.org/t/is-there-a-way-to-pivot-an-image-around-a-certain-point/16947/4 "2020-01-09T01:22:07Z")

</div>

Actually, never mind , I think I figured it

For everyone

```auto
PImage BD1_T;
PImage BD1_H;
float R;
float Ang_Trunk;
float Ang_Head;
float OriginX=400;
float OriginY=400;
boolean lockTrunk, lockHead;

void setup() {
  size(1790, 1100);
   BD1_T = loadImage("data/BD1_Trunk.png");
   BD1_H = loadImage("data/BD1_Head.png");
}

void draw() {
  background(122);
  //tint(255, 100);
  
   pushMatrix(); // move head
    translate(180, 170);
     if (lockHead)
  Ang_Head = atan2(mouseY-170, mouseX-180); //+.98;
  Ang_Head = constrain(Ang_Head, -.65, .9);
  println (degrees(Ang_Head));
    
    popMatrix();

 
  pushMatrix(); // move trunk 
 //ellipse (0,0,10,10);
   if (lockTrunk)
  Ang_Trunk = atan2(mouseY-OriginY, mouseX-OriginX);
  Ang_Trunk = constrain(Ang_Trunk, -.65, .9);
  println (degrees(Ang_Trunk));
   popMatrix();
   
   

    pushMatrix();
  translate( OriginX-180, OriginY-340);
  translate(180, 320);
  //rotate(radians(R));
  rotate (Ang_Trunk);
  ///////Head section
        pushMatrix(); // move head
          translate(-180, -320);
        translate(180, 170);
        rotate(Ang_Head);
        image(BD1_H,-180, -170);
        popMatrix();
  /////////Head section END      
  image(BD1_T,-180, -320);
   popMatrix();
   

}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  R += e/100;
}

void mousePressed() 
{ if (get(mouseX, mouseY) == color(#29f83c) ) // if pressed greeen
  { println("#29f83c");
    lockTrunk=true;
    return;
  }
  
   if (get(mouseX, mouseY) == color(#f87729) ) // if pressed brown
  { println("#f87729");
    lockHead=true;
    return;
  }
 
}

void mouseReleased() {
  lockTrunk=false;
  lockHead=false;
  
  
}

```