1

https://i.stack.imgur.com/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; 
  }
}
William Chandler
  • 55
  • 5
  • If you need to see anything else let me know and I'll post the rest of the code. – William Chandler Mar 28 '22 at 20:55
  • 1
    The issue will be easier to identify if you give us a [reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). Tag me when you update your question. – laancelot Mar 28 '22 at 21:10
  • @laancelot I'm not sure how to make it reproducible without just giving you the whole code. I have no problem giving you the whole code but I understand if that's too much. – William Chandler Mar 28 '22 at 21:26
  • 1
    Sometimes it's worth it to write a shorter project that focus on showing the issue. The people answering questions on SO are doing it on their own time, so it's worth the effort to make their load lighter (and also it makes your question more likely to find a good answer). If it's not possible, too much code is usually better than not enough code, providing that it can be compiled and run. – laancelot Mar 28 '22 at 21:30
  • @laancelot Thanks for getting back to me! I tried to reduce the code as much as possible. What's given should be able to run. You've already helped me and given me advice so I thank you for that, but any additional help or advice would be greatly appreciated. Thanks again! – William Chandler Mar 28 '22 at 21:48

1 Answers1

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.

Move, move!

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!

laancelot
  • 3,138
  • 2
  • 14
  • 21