Having a hard time rotating image about a point

Processing Libraries
1 
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:

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
midarm800×450 8.18 KB

1 Like
2

Try

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

1 Like
3

Hello @Xwalt ,

Example here:

:)

4

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

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
secondarm800×450 4.23 KB

5

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

1 Like
6

Hello @Xwait,

Consider using PVectors.

References:

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

I add a few lines of code to the example:

/**
 * 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!

:)

1 Like