home/ atoms/ p5js-custom-shapes-beginshape

beginShape/endShape with vertex() and bezierVertex() builds arbitrary polygons and smooth curves in p5.js

p5.js draws any polygon or curved shape between beginShape() and endShape(). Inside, vertex(x,y) adds a straight-edged corner point, while bezierVertex(cp1x,cp1y,cp2x,cp2y,x,y) adds a curved segment governed by two invisible control points — the same mental model as Bezier handles in vector-graphics software. endShape(CLOSE) joins the last vertex back to the first to close the outline. Transformations (translate, scale, push/pop) applied before drawing move the whole shape.

Examples

beginShape(); vertex(0, -50); bezierVertex(-20,-20, -40,20, 0,40); bezierVertex(40,20, 20,-20, 0,-50); endShape(CLOSE);

Assessment

Draw a 5-pointed star using vertex() only, then redraw one arm with bezierVertex() to round its tip.

“`bezierVertex()` works by creating invisible control points, similar to the handles used to manipulate bezier curves in vector graphics software.”