创建一个 class 在另一个 class 创建的点之间画线

Question

我正在制作一个使用 p5.js 动画贝塞尔曲线的程序。我已经创建过这个程序一次，但这次我正在完善它。（我基本上是在复制 Jason Davies 的作品 here）我希望能够为曲线创建尽可能多的控制点。到目前为止，我有一个 class 每当我按下按钮时，它都会在我的 canvas 上的随机点创建一个控制点。这是我取得的进展：

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控制点

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

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

Answer 1

function that draws a line between the latest control point and the one before it every time I add a control point

这只是最后一点和倒数第二点？您可以从数组的末尾获取它们并在它们之间画一条线。迭代这些点后，您可以在绘图循环中执行此操作。

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(); 。我认为这是存在的，因为您将要移动这些点？我只会在实际移动一个点后调用该函数。

创建一个 class 在另一个 class 创建的点之间画线

Create a class that draws lines between points created by another class

javascript

class

function

p5.js