为什么线条（肌肉）与第 3 部分（蓝色）不一致？

Question

https://imgur.com/a/hDRx3SI 线条（肌肉）按照我的意愿从中心开始。（此视频开始时进入草图一两秒。）为什么肌肉不与第 3 部分（蓝色圆圈）的中心对齐？ 这只是一个三角函数问题吗？鉴于限制，我试图迫使他们进入不可能的位置？

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

这里有两个相互影响的不同问题，这就是为什么很难解决的原因。不过，您会很高兴地注意到，您的数学是无懈可击的。

第一个问题是 drawmuscle() 方法。您在绘制坐标时修改坐标，这不一定是个问题。 问题是您要对 3 个不同的部分级联执行此操作，这三个部分相互依赖以进行计算。变量最终都没有问题 - 所以在数学上它有效 - 但作为你在计算其他部分之前绘制了一些部分，它们最终会得到意想不到的坐标，既不是旧坐标也不是新坐标。

为了解决这个问题，我修改了 drawmuscle() 方法，让它只绘制肌肉，我添加了一个新方法来更新 muscles/parts 坐标。它仍然是您的所有代码，只是被转移到不同的容器中。然后我修改了draw()方法来反映这个变化：必须先计算坐标，然后才能绘制零件。

现在，蓝圈还是错位了。这也是因为 draw() 方法中的顺序问题：由于圆圈是在坐标更新之前 绘制的，因此它们可能会被误画。同样，在每一帧结束时，您的计算都是正确的，但是在应用和绘制到达那里的操作的方式中，它们会出现错误。

根据经验，我会说您需要记住这个项目中的以下规则：先计算，最后绘制。

下面是我对您的方法所做的更改：

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

希望对您有所帮助。玩得开心！

为什么线条（肌肉）与第 3 部分（蓝色）不一致？

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

processing