贝塞尔曲线和旋转

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

    ....
}

贝塞尔曲线和旋转

Bezier and rotating

javascript

bezier

vector-graphics

p5.js