Looking for help with a second pivot point (i.e. the elbow joint in an arm)

Programming Questions

jakirch

Looking for help with a second pivot point (i.e. the elbow joint in an arm)

in Programming Questions • 2 months ago

I do not know if anyone can help me but I did notice from my Google research that quite a few questions are successfully answered here. I have this robot I am working on and since I am completely new to Processing and programming in general, I decided I would try something completely new and work with an SVG file. I have the robot moving but his elbow pivot will not work properly. I originally created him with Geomerative but when I realized I wanted to put him online I moved him to PShapes. I do not know if you can even see him since he is made of pieces (SVG files) but here is the code I am using:

PShape LArm;

PShape LUpper;

PShape LLower;

PShape RArm;

PShape Body;

PShape Head;

PShape LLeg;

PShape RLeg;

int radius;

int radius2;

void setup() {

size (500, 500);

LArm= loadShape("LArm.svg");

LUpper= LArm.getChild(0);

LLower= LArm.getChild(1);

RArm= loadShape("RArm.svg");

Body= loadShape("body.svg");

Head= loadShape("head.svg");

RLeg= loadShape("RLeg.svg");

LLeg= loadShape("RLeg.svg");

}

void draw() {

background(255);

smooth();

translate(width/2, height/2);

/*translate(mouseX,mouseY);*/

noStroke();

{ //Body

pushMatrix();

translate(0, 91);

shape(Body, 0, 0);

popMatrix();

}

{ //Head

pushMatrix();

translate(0, -30);

shape(Head, 0, 0);

popMatrix();

}

{ //Left Arm

pushMatrix();

translate(-50, -10);

rotate(radians(100*float(mouseX)/width));

shape(LUpper, 0, 0);

popMatrix();

}

{

pushMatrix();

radius = (int) sqrt(sq(41) + sq(66));

radius2 = (int) sqrt(sq(37) + sq(60));

translate(-120 + radius*cos(radians(100*float(mouseX)/width)), -10 + radius*sin(radians(100*float(mouseX)/width)));

/* translate(-120+radius*cos(radians(100*float(mouseX)/width))+radius2*cos(radians(100*float(mouseX)/width+180*float(mouseX)/width)),

-10+radius*sin(radians(100*float(mouseX)/width)) + radius2*sin(radians(100*float(mouseX)/width+180*float(mouseX)/width)));*/

rotate(radians(180*float(mouseX)/width));

shape(LLower, 0, 0);

popMatrix();

}

{//Right Arm

pushMatrix();

translate(50, -10);

rotate(radians(-100*float(mouseX)/width));

shape(RArm, 0, 0);

popMatrix();

}

{ //Left Leg

pushMatrix();

scale(-1, 1);

translate(20, 90);

rotate(radians(-100*float(mouseX)/width));

shape(LLeg, 0, 0);

popMatrix();

}

{ //Right Leg

pushMatrix();

translate(30, 90);

rotate(radians(-100*float(mouseX)/width));

shape(RLeg, 0, 0);

popMatrix();

}

Again, since this is my first programming class, it could something as small as not capitalizing something but I am pretty sure it is my Maths. I have been working on it for about three weeks now and I finally decided it was time to get help outside of my class and friends. I hope you will still be able to see his issues even without his SVG files as I have no idea how to post them here....

Thank you all in advance for any help you can offer!!

**Jetty

Replies(11)

XYZZY

Re: Looking for help with a second pivot point (i.e. the elbow joint in an arm)

2 months ago

I'm certainly no expert, and I am myself starting with Processing, but I have used a number of animation programs and understand what would need to happen with your robot. Without the specific svgs it is hard to be exact, but I do know that when you move (translate and rotate) the L upper arm, you need to move the L lower arm with the same translations and rotations. Then move the lower arm outside of the code for the upper arm moves.

Check out the example here. It is probably what you are looking to do, but with a PShape.

paulr451

Re: Looking for help with a second pivot point (i.e. the elbow joint in an arm)

2 months ago

Hi Jakirch,

Your code is a little hard to follow without comments and proper formatting (where do those numbers come from - I guess it is in the SVG's). It looks like it is the math, mainly because you are trying to "hard compute" all the pieces together, it is easy to get lost keeping track of all the pieces. You should try compositing the body parts from each other. I was intrigued so I whipped up a little sample for you. See if this gives you any help or new insight:

Paul.

// Two segment arm demo
// PaulR451
// August 15, 2013
// variables
arm arm1;
PVector origin;
void setup() {
frameRate(30);
size(500,500);
// set the drawing origin to the window center
origin = new PVector(width/2, height/2);
// create an instance of the arm class
arm1 = new arm(50);
}
void draw() {
background(120);
// render arm with the origin and angle to mouse
arm1.render(origin, atan2(mouseY - origin.y, mouseX - origin.x));
}
/* simple arm class
* draws an upper arm line from point and angle
* return upper arm endpoint for use by lower arm
* expand class to add a hand, etc...
*/
class arm {
float leng;
public arm(float len) {
    leng = len;
}

void render(PVector point, float angle) {
// get lower arm data from upper arm drawing
PVector lowerpoint = drawUpperArm(point, angle);
// add a little bend at the elbow
PVector vect = PVector.fromAngle(angle);
vect.rotate(-PI/2);
float easing = PI/2 - (abs(abs(vect.heading()) - PI/2));
if((angle > -PI / 2) && (angle < PI / 2))
    angle -= easing;
else
    angle += easing;
// composite the lower arm with data returned from upper arm
drawLowerArm(lowerpoint, angle);
}
PVector drawUpperArm(PVector point, float angle) {
pushMatrix();
// set world transforms to incoming data
translate(point.x, point.y);
rotate(angle);
// compute the upper arm's endpoint
PVector endpoint = new PVector(cos(angle) * leng, sin(angle) * leng);
// draw the upper arm segment
line(0, 0, leng, 0);
// reset world transfomr
popMatrix();
// update endpoint relative to upper arm origin
endpoint.x += point.x;
endpoint.y += point.y;
// return data for use by lower arm
return endpoint;
} // end drawUpperArm
PVector drawLowerArm(PVector point, float angle) {
pushMatrix();
// set world transforms to incoming data
translate(point.x, point.y);
// compute the lower arm's endpoint
PVector endpoint = new PVector(cos(angle) * leng, sin(angle) * leng);
// draw the lower arm segment
line(0, 0, endpoint.x, endpoint.y);
// reset world transfomr
popMatrix();
// update endpoint relative to lower arm origin
endpoint.x += point.x;
endpoint.y += point.y;
// return data for use by future hand segment
return endpoint;
} // end drawLowerArm
// to do, add a hand to the lower arm
} // end class arm

paulr451

Re: Re: Looking for help with a second pivot point (i.e. the elbow joint in an arm)

2 months ago

P.S,, Now its easy to build on this, here's simple addition to make torso with 2 arms:

// variables
arm arm1, arm2;
PVector origin;

void setup() {
frameRate(30);
size(500,500);
// set the drawing origin to the window center
origin = new PVector(width/2 - 40, height/2);
// create an instance of the arm class
arm1 = new arm(50);
arm2 = new arm(52);
}

void draw() {
background(120);
// render arm with the origin and angle to mouse
arm1.render(origin, atan2(mouseY - origin.y, mouseX - origin.x));
arm2.render(new PVector(origin.x + 80, origin.y), atan2(mouseY - origin.y, mouseX - origin.x));
line(origin.x, origin.y, origin.x + 80, origin.y);
line(origin.x + 40, origin.y, origin.x + 40, origin.y - 30);
ellipse(origin.x + 40, origin.y - 30, 30, 30);
}

jakirch

Re: Looking for help with a second pivot point (i.e. the elbow joint in an arm)

2 months ago

Thanks guys! Especially Paulr451, that is quite a lot of work you put into your answer! I am going to look at it piece by piece and see if I can fully understand it and then integrate it into my project. It is very helpful because I can use the reference to learn from it. I am very happy I wrote on this forum because I never would have figured it out on my own. Thank you both again, both answers were so very helpful. :-)

paulr451

Re: Looking for help with a second pivot point (i.e. the elbow joint in an arm)

2 months ago

There are also good arm and angle following demos in the examples that come with processing!

Good luck, and post back.

jakirch

Re: Looking for help with a second pivot point (i.e. the elbow joint in an arm)

2 months ago

Ok, I tried to do it on my own, couldn't. Had my friend come and help and he said that these solutions are all perfectly great if we were working with vectors only but since we are working with SVG files it makes it more complicated. Since I know it is impossible for a solution without seeing the SVG files, I uploaded them to a zipped file online. They can be found here:

http://jettykircher.com/robot.html

After working tonight we still could not find the answer, it looks as thought we are using the same cos and sin equations but with our angles and the radius but for some reason it will not work.

Thank you again for all your help and I really wish it would have fixed it for me. Please let me know if these files do not download or work properly, I could post the SVG code but it would get long and jumbled for those helping.

Thanks so much!!!!!!!

**Jetty :-)

paulr451

Re: Looking for help with a second pivot point (i.e. the elbow joint in an arm)

2 months ago

Hi Jetty,

The problem is indeed in the math, coupled with the use of SVG files. The SVG child "lowerarm" already has internal translation and rotation relative to upper arm sibling so simply apply the same translation and same rotation as the upper arm and they move together correctly. But only together:

{ //Left Arm
    pushMatrix();
    translate(-50, -10);
    rotate(radians(100*float(mouseX)/width));
    shape(LUpper, 0, 0);
    popMatrix();
}
{
    pushMatrix();
    translate(-50, -10);
    rotate(radians(100*float(mouseX)/width));
    shape(LLower, 0, 0);
    popMatrix();
}

Normally we would need to compute these other rotations and translations, but the SVG already has the "default" bend and position relative to the upper arm. So now you will run into trouble when you need to bend the lower relative to the upper arm (which I think is your next goal right?) because you will need to do multiple translations and rotations to counteract the internal translations and rotations in the SVG, it will get VERY Messy. Best bet is to avoid the use of SVG children and use separate files for each piece (all with no rotation), this will make it a lot easier. Working out the code to bend lower arm is doable, but messy. I'll look at it, but decide how you want to proceed, doing the whole body this way will be painful.

paulr451

Re: Looking for help with a second pivot point (i.e. the elbow joint in an arm)

2 months ago

OK, I whipped this up to show you. SVGs are now separate, and both vertical, fixed at the origin.
I added a percentage of upper arm rotation to the lower to demo the separate movement, this angle can be computed however you like, the lower arm angle is a displacement added to the upper arm angle.
You can see they move independently, but stay connected.
Check it out and let me know what you think, keeping the parts separate will be much, much easier.
The code is not long, but I put lots-o-comments. It also needs to be re-written properly, as far as the vars are declared/scoped, methods called with params, etc. I assume you will restore the code to the drawing function you made.

Now you can do the legs!

Code :

new vars declaration at top - ditch the 2 radius vars and RArm

//int radius;
//int radius2;
float UArmAngle;

//PShape LArm;
PShape LUpper;
PShape LLower;
PShape RUpper;
PShape RLower;
//PShape RArm;

new loads in setup:

//LArm= loadShape("LArm.svg");
LUpper= loadShape("UpLArm.svg");
LLower= loadShape("LoLArm.svg");
RUpper= loadShape("UpRArm.svg");
RLower= loadShape("LoRArm.svg");

//RArm= loadShape("RArm.svg");

The new arm routines:

{ //Left Arm
    pushMatrix();
    translate(-50, -10);
    // we need this angle for lower arm calc
    UArmAngle = radians(100*float(mouseX)/width);
    rotate(UArmAngle);
    shape(LUpper, 0, 0);
    popMatrix();
}
{
    pushMatrix();
    // we could just add this to the translation below,
    // but leaving it separate shows the composition clearly
    translate(-50, -10);
    // offset to next quadrant (our SVG's are vertical!)
    float newAngle = UArmAngle + PI/2;
    // move to the end point of upper arm - 60 is length in SVG file
    // from 0 to a nice attachment point, inside the ellipse
    translate(cos(newAngle) * 60, sin(newAngle) * 60);
    // add a little extra bend to show usage
    rotate(UArmAngle + map(UArmAngle, 0, 1.75, -PI/4, PI/2));
    shape(LLower, 0, 0);
    popMatrix();
}

{//Right Arm Condensed code.
    pushMatrix();
    translate(50, -10);
    UArmAngle = radians(-100*float(mouseX)/width);
    rotate(UArmAngle);
    shape(RUpper, 0, 0);
    popMatrix();
}
{
    pushMatrix();
    float newAngle = UArmAngle + PI/2;
    translate(cos(newAngle) * 60 + 50, sin(newAngle) * 60 - 10);
    rotate(UArmAngle + map(UArmAngle, 0, -1.75, PI/4, -PI/2));
    shape(RLower, 0, 0);
    popMatrix();
}

P.S. I moved the leg drawing before the arms, better this way if there's overlap.

And the SVG's, watch out for the coordinates made by Illustrator, they end up all over the place. You need to manually re-orient them to 0,0.

"UpLArm.svg"

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="10px" height="72px" viewBox="0 -10 10 72" enable-background="new 0 -10 10 72" xml:space="preserve">
<rect x="-4" y="2" fill="#C7B299" stroke="#000000" width="8" height="56"/>
<ellipse transform="matrix(0.5 -0.866 0.866 0.5 0 0)" fill="#FFD3D2" stroke="#000000" cx="0" cy="0" rx="11" ry="8.2"/>
</svg>

"LoLArm.svg"

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="10px" height="58px" viewBox="0 0 10 58" enable-background="new 0 0 10 58" xml:space="preserve">
<rect x="-3" y="2" fill="#C7B299" stroke="#000000" width="6" height="40"/>
<ellipse transform="matrix(-0.5 -0.866 0.866 -0.5 -2.114318e-004 3.662112e-004)" fill="#FFD3D2" stroke="#000000" cx="0" cy="0" rx="6.5" ry="7.8"/>
<ellipse fill="#FFD3D2" stroke="#000000" cx="0" cy="40" rx="9.8" ry="5.5"/>
</svg>

"UpRArm.svg"

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="10px" height="72px" viewBox="0 -10 10 72" enable-background="new 0 -10 10 72" xml:space="preserve">
<rect x="-4" y="2" fill="#C7B299" stroke="#000000" width="8" height="56"/>
<ellipse transform="matrix(-0.5 -0.866 0.866 -0.5 0 0)" fill="#FFD3D2" stroke="#000000" cx="0" cy="0" rx="11" ry="8.2"/>
</svg>

"LoRArm.svg"

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="10px" height="58px" viewBox="0 0 10 58" enable-background="new 0 0 10 58" xml:space="preserve">
<rect x="-3" y="2" fill="#C7B299" stroke="#000000" width="6" height="40"/>
<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -2.114318e-004 1.220701e-004)" fill="#FFD3D2" stroke="#000000" cx="0" cy="0" rx="6.5" ry="7.8"/>
<ellipse fill="#FFD3D2" stroke="#000000" cx="0" cy="40" rx="9.8" ry="5.5"/>
</svg>

paulr451

Re: Looking for help with a second pivot point (i.e. the elbow joint in an arm)

2 months ago

I made an animated gif for you. Was bored, wanted to learn how to do in Photoshop since my Premiere is non-functional at the moment. It was a pain in Photoshop, gotta be an easier way.

jakirch

Re: Looking for help with a second pivot point (i.e. the elbow joint in an arm)

2 months ago

That looks awesome! With a few alterations that code worked great! I didn't want to have to have a separate file for each limb piece but after so many weeks and this finally works, I couldn't be happier! Thank you so very, very, very much!!! :-)

**Jetty

paulr451

Re: Looking for help with a second pivot point (i.e. the elbow joint in an arm)

2 months ago

No problem, and good luck! Let me know when you have him walking around !

Top Reply