创建一个在另一个类创建的点之间绘制线条的类

Question

我正在制作一个使用p5.js对贝塞尔曲线进行动画处理的程序。我已经创建了这个程序一次，但是这次我正在完善它。 （我基本上是在复制Jason Davies作品here），我希望能够为曲线创建尽可能多的控制点。到目前为止，我有一个类，每当我按下按钮时，该类就会在画布上的随机点创建一个控制点。这是我已经走了多远：

let controlPoints = [];

function setup() {
    createCanvas(600, 600);

    //Adds a button called "Add controlpoint" that calls the function "addControlPoint"
    button = createButton('Add controlpoint');
    button.position(10, 10);
    button.mousePressed(addControlPoint);

    //Adds a button called "Remove controlpoint" that calls the function "removeControlPoint"
    button = createButton('Remove controlpoint');
    button.position(10, 45);
    button.mousePressed(removeControlPoint);
}

function draw() {
    background(55);

    //Draws all of the controlpoints in the array "controlPoints"
    for (let i = 0; i < controlPoints.length; i++) {
        controlPoints[i].show();
        controlPoints[i].overPoint();
    }
}

//If the button "Add controlpoint" is pressed create controlpoint att random location
function addControlPoint() {
    controlPoints.push(new controlPointBrain(random(width), random(height), 25));
}

//If the button "Remove controlpoint" is pressed remove latest controlpoint added
function removeControlPoint() {
    controlPoints.pop();
}

这是我的控制点课程

class controlPointBrain {
    constructor(x_, y_, r_) {
        this.x = x_;
        this.y = y_;
        this.r = r_;
    }

    overPoint() {
        //If the controlpoint is over the x-edge stop it from going over
        if (this.x >= width) {
            this.x = width-(this.r/2);
        } else if (this.x < 0) {
            this.x = 0+(this.r/2);
        }

        //If the controlpoint is over the y-edge stop it from going over
        if (this.y >= height) {
            this.y = height-(this.r/2);
        } else if (this.y < 0) {
            this.y = 0+(this.r/2);
        }
    }

    show() {
        strokeWeight(4);
        fill(55);

        //Checks if the mouse is over the controlpoint
        if (mouseX <= this.x+(this.r/2) && mouseX >= this.x-(this.r/2) &&
            mouseY >= this.y-(this.r/2) && mouseY <= this.y+(this.r/2))
        {
            stroke(55, 255, 50);
        } else {
            stroke(255, 50, 50);
        }

        //Draws an ellipse
        ellipse(this.x, this.y, this.r);
    }
}

现在，我想创建一个类/函数，在每次添加控制点时，在最新控制点和之前的控制点之间画一条线。是否可以创建一个自动绘制这些线条的类？还是应该创建一个执行此操作的功能？对我已经编写的程序提出的任何有帮助的批评也将不胜感激！

Answer 1

每次添加控制点时都会在最新控制点和之前的控制点之间画线的功能

那只是最后一点和最后一点？您可以从数组末尾抓取它们，并在它们之间画一条线。遍历各个点后，可以在绘制循环中执行此操作。

if ( controlPoints.length > 1 ){
    let lastPoint = controlPoints[ controlPoints.length - 1 ];
    let secondToLastPoint = controlPoints[ controlPoints.length - 2 ];

    //draw line between this point and otherPoint
    line( lastPoint.x, lastPoint.y, secondToLastPoint.x, secondToLastPoint.y );
}

代码非常简洁，看起来不错。我唯一要做的就是每帧调用controlPoints[i].overPoint();。我认为这是存在的，因为您要点可以移动吗？我只有在实际移动一个点之后才调用该函数。