* @module Shape * @submodule Custom Shapes * @for p5
(p5, fn)
| 5 | */ |
| 6 | |
| 7 | function vertex(p5, fn){ |
| 8 | /** |
| 9 | * Begins adding vertices to a custom shape. |
| 10 | * |
| 11 | * The `beginShape()` and <a href="#/p5/endShape">endShape()</a> functions |
| 12 | * allow for creating custom shapes in 2D or 3D. `beginShape()` begins adding |
| 13 | * vertices to a custom shape and <a href="#/p5/endShape">endShape()</a> stops |
| 14 | * adding them. |
| 15 | * |
| 16 | * The parameter, `kind`, sets the kind of shape to make. The available kinds are: |
| 17 | * |
| 18 | * - `PATH` (the default) to draw shapes by tracing out the path along their edges. |
| 19 | * - `POINTS` to draw a series of points. |
| 20 | * - `LINES` to draw a series of unconnected line segments. |
| 21 | * - `TRIANGLES` to draw a series of separate triangles. |
| 22 | * - `TRIANGLE_FAN` to draw a series of connected triangles sharing the first vertex in a fan-like fashion. |
| 23 | * - `TRIANGLE_STRIP` to draw a series of connected triangles in strip fashion. |
| 24 | * - `QUADS` to draw a series of separate quadrilaterals (quads). |
| 25 | * - `QUAD_STRIP` to draw quad strip using adjacent edges to form the next quad. |
| 26 | * |
| 27 | * After calling `beginShape()`, shapes can be built by calling |
| 28 | * <a href="#/p5/vertex">vertex()</a>, |
| 29 | * <a href="#/p5/bezierVertex">bezierVertex()</a>, and/or |
| 30 | * <a href="#/p5/splineVertex">splineVertex()</a>. Calling |
| 31 | * <a href="#/p5/endShape">endShape()</a> will stop adding vertices to the |
| 32 | * shape. Each shape will be outlined with the current stroke color and filled |
| 33 | * with the current fill color. |
| 34 | * |
| 35 | * Transformations such as <a href="#/p5/translate">translate()</a>, |
| 36 | * <a href="#/p5/rotate">rotate()</a>, and |
| 37 | * <a href="#/p5/scale">scale()</a> don't work between `beginShape()` and |
| 38 | * <a href="#/p5/endShape">endShape()</a>. It's also not possible to use |
| 39 | * other shapes, such as <a href="#/p5/ellipse">ellipse()</a> or |
| 40 | * <a href="#/p5/rect">rect()</a>, between `beginShape()` and |
| 41 | * <a href="#/p5/endShape">endShape()</a>. |
| 42 | * |
| 43 | * @method beginShape |
| 44 | * @param {(POINTS|LINES|TRIANGLES|TRIANGLE_FAN|TRIANGLE_STRIP|QUADS|QUAD_STRIP|PATH)} [kind=PATH] either POINTS, LINES, TRIANGLES, TRIANGLE_FAN |
| 45 | * TRIANGLE_STRIP, QUADS, QUAD_STRIP or PATH. Defaults to PATH. |
| 46 | * @chainable |
| 47 | * |
| 48 | * @example |
| 49 | * function setup() { |
| 50 | * createCanvas(100, 100); |
| 51 | * |
| 52 | * background(200); |
| 53 | * |
| 54 | * // Start drawing the shape. |
| 55 | * beginShape(); |
| 56 | * |
| 57 | * // Add vertices. |
| 58 | * vertex(30, 20); |
| 59 | * vertex(85, 20); |
| 60 | * vertex(85, 75); |
| 61 | * vertex(30, 75); |
| 62 | * |
| 63 | * // Stop drawing the shape. |
| 64 | * endShape(CLOSE); |
no test coverage detected