Reference beginShape()

beginShape()

Begins adding vertices to a custom shape.

The beginShape() and endShape() functions allow for creating custom shapes in 2D or 3D. beginShape() begins adding vertices to a custom shape and endShape() stops adding them.

The parameter, kind, sets the kind of shape to make. The available kinds are:

  • PATH (the default) to draw shapes by tracing out the path along their edges.
  • POINTS to draw a series of points.
  • LINES to draw a series of unconnected line segments.
  • TRIANGLES to draw a series of separate triangles.
  • TRIANGLE_FAN to draw a series of connected triangles sharing the first vertex in a fan-like fashion.
  • TRIANGLE_STRIP to draw a series of connected triangles in strip fashion.
  • QUADS to draw a series of separate quadrilaterals (quads).
  • QUAD_STRIP to draw quad strip using adjacent edges to form the next quad.

After calling beginShape(), shapes can be built by calling vertex(), bezierVertex(), bezierVertex(), and/or splineVertex(). Calling endShape() will stop adding vertices to the shape. Each shape will be outlined with the current stroke color and filled with the current fill color.

Transformations such as translate(), rotate(), and scale() don't work between beginShape() and endShape(). It's also not possible to use other shapes, such as ellipse() or rect(), between beginShape() and endShape().

Examples

Syntax

beginShape([kind])

Parameters

kind
POINTS|LINES|TRIANGLES|TRIANGLE_FAN|TRIANGLE_STRIP|QUADS|QUAD_STRIP|PATH: either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, QUAD_STRIP or PATH. Defaults to PATH.
Notice any errors or typos? Please let us know. Please feel free to edit src/shape/vertex.js and open a pull request!

Related References