• Making Any Shape
  • Custom Shapes
    • Beginning a Shape
    • Shape Types
    • Closing a Shape
  • Plotting Vertices
  • Curve Vertices



"I am a kind of paranoid in reverse. I suspect people of plotting to make me happy." ~ J. D. Salinger

Custom Shapes

Processing has the ability to define custom shapes. Some of the shape types are shown here. The command to draw a particular shape type is:
beginShape( mode );
For each shape example the following 3 vertices were used:
vertex( 40, 40 );
vertex( 40, 80 );
vertex( 80, 80 );
Of course their y-values have changed for each example but the plotting remains the same.
The command to end a shape is:
endShape( CLOSE );
The use of CLOSE is optional but generally a good idea.

Take a look at how some shapes appear incomplete. For example the LINES shape only draws one line. That is because it expects a pair of points for each line to be drawn. Since there are only 3 points, there is only 1 line. Also note the difference between using POLYGON with CLOSE and without.

There are more shape types available in processing such as:

Every custom shape must call beginShape() and endShape()
Shapes are created by plotting vertices. Different shape types will use vertices in different ways.
Complete a shape by calling endShape(CLOSE).

Plotting Verticies

Here is a simple star shape plotted using 10 vertices. It's important to note the symmetrical vertices of a shape since this will simplify the plotting of the shape. Here we have 4 symmetrical vertices on each side of the star. Below we'll see some code for how to draw the star shape.

Here is the code for drawing the star shape:

Plotting shapes can be tedious. The best technique is to plot out shapes on paper before attempting them in processing.
Identify symmetry that can be an advantage when plotting.

Curved Vertices

Believe it or not, this is the same star shape plotted with curve vertices. curveVertex() vertices are plotted with an additional control point at the beginning and end of the list of vertices. These control points define how the curve will start and end. The rest of the vertices are plotted normally. There is an option in processing to set the curve tightness. This means that as points are plotted, they are pulled through the point more tightly causing them to twist and bunch like you see in this picture. Usually curve tightness of 1 works quite well for drawing regular shapes, but it should be experimented with to get some interesting results.

Here is the code for drawing the curve star shape:

Curved vertices begin and end with a vertex to represent the control point for the first and last point.
The curveTightness( value ) method can be useful for creating some interesting designs using the curved vertices.