Why do the lines (muscles) not line up with part3 (blue)?

Question

https://i.sstatic.net/5E2IN.jpg The lines (muscles) start out in the center as I want. (This video starts out a second or two into the sketch.) Why do the muscles not line up with the center of part3 (Blue circle)? Is it simply a trigonometric issue where I'm trying to force them into an impossible position given the constraints?

Part part1;
Part part2;
Part part3;
Muscle muscle1;
Muscle muscle2;
Muscle muscle3;

void setup() {
  size (800, 800);
  frameRate(1);
  part1 = new Part(width/2, height/2, 50, color(255, 0, 0));
  part2 = new Part(width/2 + 100, height/2, 50, color(0, 255, 0));
  part3 = new Part(width/2 + 50, height/2 - 75, 50, color(0, 0, 255));
  muscle1 = new Muscle(part1.x, part1.y, part2.x, part2.y, dist(part1.x, part1.y, part2.x,part2.y), color(0, 255, 0));
  muscle2 = new Muscle(part1.x, part1.y, part3.x, part3.y, dist(part1.x, part1.y, part3.x, part3.y), color(0, 255, 0));
  muscle3 = new Muscle(part2.x, part2.y, part3.x, part3.y, dist(part2.x, part2.y, part3.x, part3.y), color(0, 255, 0));
}

void draw() {
  background(255);
  part1.drawpart();
  part2.drawpart();
  part3.drawpart();
  muscle1.drawmuscle(part1, part2);
  muscle2.drawmuscle(part1, part3);
  muscle3.drawmuscle(part2, part3);
  part2.movepart();
}

class Muscle{
  float leftx;
  float lefty;
  float rightx;
  float righty;
  float size = 100;
  int musclecolor;
  
  Muscle(float leftpositionx, float leftpositiony, float rightpositionx, float rightpositiony, float musclesize, int musclemusclecolor) {
    leftx = leftpositionx;
    lefty = leftpositiony;
    rightx = rightpositionx;
    righty = rightpositiony;
    size = musclesize;
    musclecolor = musclemusclecolor;
  }
  
  void drawmuscle(Part obj1, Part obj2) {
    strokeWeight(5);
    float dx = obj2.x - obj1.x;
    float dy = obj2.y - obj1.y;
    float angle = atan2(dy, dx);
    obj2.x = obj1.x + cos(angle) * size;
    obj2.y = obj1.y + sin(angle) * size;
    line(obj1.x, obj1.y, obj2.x, obj2.y);
  }
}
class Part{
  float x;
  float y;
  float size;
  int partcolor;
  
  Part(float positionx, float positiony, float partsize, int partpartcolor) {
    x = positionx;
    y = positiony;
    size = partsize;
    partcolor = partpartcolor;
  }
  
  void drawpart() {
    fill(partcolor);
    strokeWeight(1);
    ellipseMode(CENTER);
    ellipse(x, y, size, size);
  }
    void movepart() {
   y += 10; 
  }
}

Answer 1

There are two different problems here which interacts with one another, which is why this is hard to solve. You'll be happy to notice, though, that your math are irreproachable.

First issue is in the drawmuscle() method. You modify coordinates while drawing them, which isn't necessarily an issue. The problem is that you're doing this in cascade for 3 different parts, which depend on each other to be calculated. The variables all end up all right - so mathematically it works - but as you draw some parts before others have been calculated, they end up with unexpected coordinates that are neither the old ones nor the new ones.

To fix this, I modified the drawmuscle() method so it only draws the muscles, and I added a new method to update the muscles/parts coordinates. It's still all your code, just displaced into different containers. Then I modified the draw() method to reflect this change: the coordinates have to be calculated first, then the parts can be drawn.

Now, the blue circle was still misplaced. That's also because of a matter of order in the draw() method: as the circles were drawn before their coordinates were updated, they were subject to be misdrawn. Again, at the end of every frame, your calculations were correct, but in the way the operations to get there were applied and drawn they would appear off.

As a rule of thumb, I would say that you need to remember from this project the following rule: calculate first, draw last.

So here are the changes I made to your methods:

void draw() {
  background(255);
  
  // calculating new positions
  muscle1.moveMuscle(part1, part2);
  muscle2.moveMuscle(part1, part3);
  muscle3.moveMuscle(part2, part3);
  
  // drawing
  part1.drawpart();
  part2.drawpart();
  part3.drawpart();  
  muscle1.drawmuscle(part1, part2);
  muscle2.drawmuscle(part1, part3);
  muscle3.drawmuscle(part2, part3);
  muscle1.growmuscle(part1, part2);
}

void drawmuscle(Part obj1, Part obj2) {
  // no calculations here
  strokeWeight(5);
  line(obj1.x, obj1.y, obj2.x, obj2.y);  
}
  
void moveMuscle(Part obj1, Part obj2) {
  // every calculations here
  float dx = obj2.x - obj1.x;
  float dy = obj2.y - obj1.y;
  float angle = atan2(dy, dx);
  obj2.x = obj1.x + cos(angle) * size;
  obj2.y = obj1.y + sin(angle) * size;
  rightx = obj2.x;
  righty = obj2.y;
}

I hope this will help. Have fun!