p5.js 沿着多边形的轨迹移动物体

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() 是你的朋友。

如果您不能让它工作，我建议 breaking your problem down into smaller pieces and taking those pieces on one at a time. In other words: don't try to get it working in your full program. Instead, create a small example sketch that just does one thing. Try using the lerp() function to show a point moving between two hard-coded points. Then add a third hard-coded point. Work your way forward in small steps like that. Then if you get stuck, you can post a MCVE 以及一个更具体的问题。祝你好运！

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

p5.js 沿着多边形的轨迹移动物体

p5.js move objects along the trajectory of polygons

javascript

canvas

p5.js