javascript - p5.j​​s 沿多边形轨迹移动对象

Question

刚刚开始学习p5和canvas。很抱歉，如果这是一个愚蠢的问题。

我在网上找到了 gif 并决定在 p5.js 中重复这个。所以我在下面编写了生成图像的代码。

var shapes = [];
function setup() {
    createCanvas(windowWidth, windowHeight);
    for(var i = 1; i < 12; i++){
        shapes.push(new Shape(i));
    }
    console.log(shapes);
}

function draw(){
    background(255);
    stroke('red')
    for(var i = 0; i < shapes.length; i++){
        shapes[i].show();
        shapes[i].moveDot();
    }
}

function Shape(n) {
    colors = ['','red','#cd8410','#cdcb10','#8dcd10','#56cea8','#47c4cc','#479ccc','#476acc','#5d47cc','#9847cc','#b547cc','#cc47a2','#cc4760'];
    this.x = width/2;
    this.y = height/2;
    this.vertices = n+2;
    this.spaceBetween = 20;
    this.edge = this.spaceBetween/(cos(PI/5)/(2*sin(TWO_PI/10))-cos(PI/4)/(2*sin(TWO_PI/8)));
    this.oR = this.edge / ( 2 * sin(TWO_PI/ (2 * this.vertices) ));
    this.iR = this.oR * cos(PI/this.vertices);
    this.degrees = asin(this.iR / this.oR);

    this.dotX = this.x;
    this.dotY = this.y + this.iR;
    this.dotSpeed = 3;
    this.dotPCT = 0;

    this.vcord = [];
    for(var i = 0; i < TWO_PI; i+= TWO_PI / this.vertices){
        this.vcord.push([this.x + cos(this.degrees + i) * this.oR, this.y + sin(this.degrees + i) * this.oR]);
    }

    this.show = ()=>{
        stroke(colors[n%14]);
        noFill();
        beginShape();
        for(var i = 0; i < this.vcord.length; i++){
            vertex(this.vcord[i][0], this.vcord[i][1]);
        }
        endShape(CLOSE);
        noStroke();
        fill(0)
        ellipse(this.dotX, this.dotY, 10);
    }

    this.moveDot = ()=>{

    }
}

现在我的目标是让每个点沿着其多边形的轨迹移动。我可以访问 this.vcord 数组中多边形的每个坐标，但我无法弄清楚如何以正确的方式进行。

Answer 1

您可以使用 lerp() 函数来获取与其他两个点之间有特定百分比的点。更多信息可以在 the reference 中找到.

var xOne = 10;
var yOne = 10;
var xTwo = 100;
var yTwo = 100;

var midX = lerp(xOne, xTwo, 0.5);
var midY = lerp(yOne, yTwo, 0.5);

ellipse(midX, midY, 20, 20);

然后只需修改您传递给 lerp() 函数的第三个值，即可在其他两个点之间移动该点。提示:sin() 和 cos() 是您的 friend 。

如果你不能让它工作，我推荐breaking your problem down into smaller pieces一次把这些碎片拼在一起。换句话说:不要试图让它在你的完整程序中工作。相反，创建一个只做一件事的小示例草图。尝试使用 lerp() 函数来显示在两个硬编码点之间移动的点。然后添加第三个硬编码点。像那样一步一步地前进。然后如果你卡住了，你可以发布一个 MCVE以及更具体的问题。祝你好运!

(此外，如果您打算在某处发布您的作品，请注明 the original artist。)