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. By default, any irregular polygon can be drawn. The available modes for kind are:

  • 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.
  • TESS to create a filling curve by explicit tessellation (WebGL only).

After calling beginShape(), shapes can be built by calling vertex(), bezierVertex(), quadraticVertex(), and/or curveVertex(). 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
Constant:

either POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, QUAD_STRIP or TESS.

Notice any errors or typos? Please let us know. Please feel free to edit src/core/shape/vertex.js and open a pull request!

Related References