Shapes So Far

But real shapes get a lot more complicated than this!

We really don't want to try to draw this with just circles and beziers...

Creating Shapes from Vertices

1. Use beginShape() to start the shape
2. Specify points defining the shape with vertex()
3. Complete the shape with endShape()

fill(), stroke(), noFill(), noStroke() and strokeWeight() control the shape attributes

endShape() ends the shape

endShape(CLOSE) ends the shape and closes it by drawing a line back to the starting point

Example

endShape(CLOSE) would add a line connecting back to the first vertex

Geometry

beginShape() accepts different parameters to define the drawing of vertex data

• POINTS
• LINES
• TRIANGLES
• TRIANGLE_STRIP
• TRIANGLE_FAN
• QUADS
• QUAD_STRIP

Curves

If there is no parameter passed to beginShape(), we can also draw curves using special vertex functions.
 

• curveVertex() draws curves which are defined by a first control point, intermediate points, and a second control point.
   
• bezierVertex() is defined by an initial anchor point, then triples of (control, control, anchor) points.

Contours

We can also cut holes into shapes via contours.

Call beginContour() and endContour() inside of a beginShape()/endShape() block

Defining Shapes with Vertices

...is really hard.

Even harder in 3D. Quick, what are the points needed for an approximate sphere?

PShape

A class for storing Shapes

• Allows us to load and display SVGs and OBJs
  • SVG is an open standard for storing 2D vector graphics
  • OBJ is a standard for storing 3D vector geometry
     
• Call loadShape(filename) to load a file into a PShape
   
• shape(PShape, x, y) or shape(PShape, x, y, width, height) to display it

Pretty similar to PImages!

Example SVG

Aside: Vector vs Raster Images

We saw that images are grids of pixels, where each pixel has a color.

These are more specifically known as raster images.

Formats like SVG are known as vector images (or vector graphics).

https://www.simplyprint.net/raster-versus-vector/

Build-A-PShape

If we want to draw to a PShape, we can use the shape's beginShape() and endShape() methods.

Modifying PShapes

If you created a PShape by placing vertices, you can get the k-th vertex by using getVertex() and modify it by using setVertex()

This won't work if you created the shape by doing something like createShape(RECT, 20, 20, 80, 80).

Grouping PShapes

We can also group multiple PShapes to make a more complex shape.

Hands-On: Using PShapes

1. Create a free-hand shape using vertex() points
2. Create a shape using TRIANGLE_STRIP or TRIANGLE_FAN
3. Create a Shape using curveVertex()
4. Place your shape from step 1 into a PShape and display it
5. Load an SVG (get one from from https://www.svgrepo.com/ if you don't have one lying around) into a PShape and display it to the screen.

Remember, most of these will need to be sandwiched inside beginCurve() and endCurve()