Controls:

Hovering the mouse cursor on the canvas will make the vector agents follow.

Click Left Mouse Button = Activate vertex distortion.

Click Middle Mouse Button = Disable vertex distortion.

---

A class has been made to contain the vector agents as well as the curve vertexes. This project demonstrates a constant creation of new sine waves to each vertexes as time goes. To do this, the angle (in radians) are calculated and then used to create segments of the circle. For each curve vertexes, they must have "Control Points" to shape the desired object. Those Control Points are represented as the first few and last few vector points.

Link to Full Codes

                        beginShape();
                            // 1st = 1st control points / Last = 2nd control points
                            curveVertex(this.vectorPoints[this.vectorPoints.length - 1].x + this.centreX, this.vectorPoints[this.vectorPoints.length - 1].y + this.centreY);

                            for (let i = 0; i < this.vectorPoints.length; i++) {
                                curveVertex(this.vectorPoints[i].x + this.centreX, this.vectorPoints[i].y + this.centreY);
                            }
                            
                            curveVertex(this.vectorPoints[0].x + this.centreX, this.vectorPoints[0].y + this.centreY);  
                            curveVertex(this.vectorPoints[1].x + this.centreX, this.vectorPoints[1].y + this.centreY);

                            // Adds or subtracts random step to x & y on vector points
                            this.vectorPoints[round(random(0, this.vectorPoints.length - 1))].x += random(-stepX, stepX);
                            this.vectorPoints[round(random(0, this.vectorPoints.length - 1))].y += random(-stepY, stepY);
                        endShape();