Bezier和旋转

Question

一旦我调用了正确的函数，那么bezier的形状就会随着每一步而改变(曲线变得越来越大)。这几行代码导致了这一点：direction.mult(length); direction.rotate(angle);我附加了一张照片，以更清楚地呈现问题。当我乘以并旋转向量时，问题就出现了。这是一个代码-> https://editor.p5js.org/grzegorz.kuguar@gmail.com/sketches/Syc1qQmnQ的草图

有什么好办法解决的吗？

在这里输入图像描述

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

    ....
}