PShape Objects
Last updated
Last updated
PShape is a wrapper class for shapes in processing. It provides a class that can be used to create objects using scalable vector graphic format (.svg), processing primitive shape functions, and shapes created by specifying vertex points. In this project, we'll use the PShapes created by specifying a set of vertex points. Processing expects the points to be specified in a clockwise rotating pattern.
The image below shows how we can create a simple polygon using the Processing PShape, createShape( ), beginShape( ), endShape( ) functions.
There are a variety of ways to create PShape Objects. The most simple way is to create PShape objects using Processing primitive shapes, and the PShape: createShape( ) method. As shown in the code snipped below, you must first declare a variable of the type: PShape, then you can call the createShape( ) method by specifying Processing constant values of kind: either POINT, LINE, TRIANGLE, QUAD, RECT, ELLIPSE, ARC, BOX, SPHERE
It is required to input values for the corresponding parameters used to create the Processing shape primitive: ex. ELLIPSE requires: float x, float y, float w, float h
Display using the PShape method: shape( PShape s, float x, float y )
For the code below, we've created a variable: length, which we'll use to constrain the shape to a rectangle of (length x length ) dimensions. The points must be ordered in clockwise direction, starting from point at the beginning of the shape, listing all intermediate vertices, and ending with s.endShape( CLOSE) if we want the shape to have a colored fill.
For our recursive pattern project, it will be important to create a simple pattern that can be defined by a location point (shape's origin point) and one len value.
vertexPattern( len );
If we design our pattern based on points on a rectangle, the code below shows this requires us to specify 4 corners as vertex points.
Defining the shape based on a variable length means that if length=100, it should create a pattern that is 10 times larger than if we'd set length = 10.
Finally, to simplify further, we can specify the object's position at the canvas origin, (0,0), we can use translate( x, y) for drawing the object at (x, y).
Below is an example vertex pattern function that takes in 2 input-parameters: xWidth, yHeight. Within the function, those input parameters define the vertices of a rectangle. We've now created a function that will allow us to draw a rectangle of any size, and any location if we use the transform function to move the origin to the desired location prior to calling this function. We've just redesigned the processing rectangle function using PShape objects. What's much more interesting is that we can create functions to generate our own design motifs, as long as we design the pattern using parameters variables to define the actual design geometry.
In the example below, a custom function is used to create and return a PShape object.
The image above shows that we could define our own drawRectangle(w, h) function, where we define xWidth, xHeight input parameters. This will work just like the processing rectangle function, except that it doesn't take in x,y location input parameters. Instead, we're hard-coding the position vertex at (0,0); We can see from the code on the diagram how the input parameters are used to define 4 vertex points that represent the rectangle corners. This way, if we call the function 2 times with different inputs, we'll have 2 different rectangles scaled according to the input values:
