p5.js move objects along the trajectory of polygons

Question

I just started to learn p5 and canvas. So sorry if it's stupid question.

I've found gif online and decided to repeat this in p5.js. So I've wrote code to generate image below.

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 = ()=>{

    }
}

Now my goal is to make each dot move along trajectory of its polygon. I have access to each coordinate of polygon in this.vcord array, but I can't figure out how to make this right way.

score 2 · Accepted Answer · answered Jan 27 '18 at 20:14

You can use the lerp() function to get a point that's a certain percentage between two other points. More info can be found in 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);

Then just modify the third value you're passing into the lerp() function to move the point between the two other points. Hint: sin() and cos() are your friends here.

If you can't get it working, I recommend 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 along with a more specific question. Good luck!

(Also, please credit the original artist if you're planning on posting your work somewhere.)

Thx, this should help me. And I won't forget to mention beesandbombs) — supermishboy, Jan 27 '18 at 20:19

p5.js move objects along the trajectory of polygons

1 Answers1