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

Processing Coding Questions
1

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:

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

2

try:

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;
}
2 Likes
3

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,

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 BD1_Trunk

4

Actually, never mind , I think I figured it

For everyone

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