Goals

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

Resources

http://processing.org/learning/basics/vertices.html
http://processing.org/learning/curves/

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:
beginShape(TRIANGLE_STRIP);
beginShape(TRIANGLE_FAN);
beginShape(QUADS);
beginShape(QUAD_STRIP);

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:

void setup() { size(400, 400); background(255); stroke(255, 0, 0); strokeWeight(4); fill(255, 0, 0, 128); beginShape(); //top point vertex(200, 40); vertex(140, 120); vertex(40, 120); vertex(140, 180); vertex(40, 300); //bottom middle point vertex(200, 220); vertex(360, 300); vertex(260, 180); vertex(360, 120); vertex(260, 120); endShape(CLOSE); }

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:

void setup() { size(400, 400); background(255); curveTightness(5); stroke(255, 0, 0); strokeWeight(4); fill(255, 0, 0, 128); beginShape(); //First Control Point curveVertex(140, 120); //First Point curveVertex(200, 40); curveVertex(140, 120); curveVertex(40, 120); curveVertex(140, 180); curveVertex(40, 300); curveVertex(200, 220); curveVertex(360, 300); curveVertex(260, 180); curveVertex(360, 120); curveVertex(260, 120); //End Point curveVertex(200, 40); //End Control Point curveVertex(260, 120); endShape(); }

void setup() { size(400, 400); } void draw() { background(255); curveTightness( (float) (mouseX - 200) / 25 ); stroke(255, 0, 0); strokeWeight(4); fill(255, 0, 0, 128); beginShape(); //First Control Point curveVertex(140, 120); //First Point curveVertex(200, 40); curveVertex(140, 120); curveVertex(40, 120); curveVertex(140, 180); curveVertex(40, 300); curveVertex(200, 220); curveVertex(360, 300); curveVertex(260, 180); curveVertex(360, 120); curveVertex(260, 120); //End Point curveVertex(200, 40); //End Control Point curveVertex(260, 120); endShape(); }