Question

一旦我调用了正确的函数，贝塞尔曲线的形状就会随着每一步的变化而变化（曲线越来越大）。这些代码行导致了该问题：direction.mult(length); direction.rotate(angle);我附上一张照片，以更清楚地说明问题。一旦我乘以并旋转向量，问题就出现了。这是一个带有代码的草图-> https://editor.p5js.org/grzegorz.kuguar@gmail.com/sketches/Syc1qQmnQ

有什么主意我该如何解决？

enter image description here

Answer 1

在开始时，bezier()曲线的锚点垂直排列。控制点是根据这种安排（this.end.x+15, this.end.y/0.9, this.end.x-15, this.end.y/0.9）计算的：

display() {
     stroke(this.color);
     strokeWeight(this.strokeW);
     noFill();
     bezier(this.begin.x, this.begin.y, this.end.x+15, this.end.y/0.9, this.end.x-15, this.end.y/0.9, this.end.x, this.end.y);
}

但是，当旋转并缩放从第一个锚点到第二个锚点的向量时，此计算将无法再按预期工作。您必须计算相对于控制点的锚点：

class Branch {

    ....

    display() {
        stroke(this.color);
        strokeWeight(this.strokeW);
        noFill();
        let dir_x = this.end.x - this.begin.x;
        let dir_y = this.end.y - this.begin.y;
        let c1_x  = this.begin.x + dir_x / 3 - dir_y / 6;
        let c1_y  = this.begin.y + dir_y / 3 + dir_x / 6;
        let c2_x  = this.begin.x + dir_x * 2/3 + dir_y / 6;
        let c2_y  = this.begin.y + dir_y * 2/3 - dir_x / 6;
        bezier(this.begin.x, this.begin.y, c1_x, c1_y, c2_x, c2_y, this.end.x, this.end.y);
    }

    ....
}

贝塞尔曲线和旋转

1 个答案: