# PShape with Contour

### Processing PShape with Contour

Examples in the tabs below show details for specifying vertices to create an inner-cutout using the PShape methods: beginContour ( ), endContour( ).  Note that vertex points specified to create a contour must be listed in reverse rotational order than what was used to specify the initial vertex points for the shape.

{% tabs %}
{% tab title="PShape w/Contour ex1" %}
![](https://2312795435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgCFUL-cVHjEcqM%2F-MW5nsOjJkX1QcnSZsxh%2F-MW5o0R1gW1Q3G6WW-R9%2FScreen%20Shot%202021-03-18%20at%202.27.06%20PM.png?alt=media\&token=97d274b9-d7e3-477a-b73f-4fcef4f72e07)

Notice: the initial 6 vertex points listed below are specified in **clockwise order**\
To specify **contour vertex points**, the order must be **reversed - counter-clockwise**.  Often you may choose to repeat points (see point 6 ), in the code. Note: when specifying contour points, complex shapes can result.

![](https://2312795435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgCFUL-cVHjEcqM%2F-MW0uhWtNquVrU_LDc75%2F-MW0vylRSzUslUjUgsuc%2FScreen%20Shot%202021-03-17%20at%203.44.47%20PM.png?alt=media\&token=8b67a32e-19d3-4d98-ab43-4f3a235801b6)
{% endtab %}

{% tab title="Code Ex1" %}
PShape with Contour - example code below corresponds to the images on the previous tab.  Note the use of s.beginContour( ), s.endContour( ) methods.  Note that s.endShape(CLOSE) is the last line of code required to specify the PShape's form.

```java
//create custom PShape usign vertex points
PShape fallShapeContour( float w, float h, color c1 ) {
  PShape s = createShape(); //initialize PShape
  s.beginShape();
  s.vertex( 0, .25*h);  //1
  s.vertex( w*.75, 0);  //2
  s.vertex( w* .10, h* .50); //3
  s.vertex( w* .25, h* .75); //4
  s.vertex( w* 0, h* .75); //5
  s.vertex( 0, .25*h);  //6
  s.beginContour();
  s.vertex( 0, .25*h);  //6
  s.vertex( w* .10, h* .45); //7
  s.vertex( w* .40, h* .20); //8
  s.vertex( w* .10, h* .30); //9
  s.endContour();
  s.endShape(CLOSE);
  s.setFill( c1);
  return s;
}
```

{% endtab %}

{% tab title="PShape Ex2" %}
![](https://2312795435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgCFUL-cVHjEcqM%2F-M0-KO91ISxRnRVYcAC8%2F-M0-KdPpGF5F19l0nCz7%2FScreen%20Shot%202018-09-04%20at%2012.22.32%20PM.png?generation=1581627413553593\&alt=media)

The image below shows how vertex points can be specified as a fractional value of len, the input parameter for our PShape functions.

The drawing shows the points that are specified in the code below. You will want to draw a similar diagram to determine points for your custom shape vertices. Notice that points used for the cutout-inner-contour are specified in counter-clockwise manner. The last point for the outershape is (0,0), it's not re-numbered in the drawing, instead, the point with label 5 has values: s.vertex(.25*len, .45*len), it is located near point 4 on the drawing.

![](https://2312795435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgCFUL-cVHjEcqM%2F-M0-KO91ISxRnRVYcAC8%2F-M0-KdPrkPhyKAW7P9Vl%2FIMG_3079.jpg?generation=1581627413833215\&alt=media)
{% endtab %}

{% tab title="Code Ex2" %}

## PShape with Contour

The code below shows that PShape can have an inner cutout created using the beginContour(), endContour() functions. The vertex points specified within those 2 functions will be cut-out of the larger shape that was specified before the beginContour() function. The point numbers correspond to the circled numbers in drawing above.

```java
  PShape s = createShape();
  s.beginShape();
  s.fill(200, 100,100 ); //HSB - blue full sat, bright
  s.vertex( 0,0); //point 1 for outer shape (clock-wise rotation for drawing points)
  s.vertex( len*.4,0); //point  2
  s.vertex( len*.6, len*.6); //point 3
  s.vertex( 0, len*.4); //point 4
  s.vertex( 0,0); //last point for outer shape

   ////start of inner cutout - counter-clockwise ordering
  s.beginContour(); //make internal cutout 
  s.vertex( len*.25,len*.45); //inner cutouts - point 5
  s.vertex(len*.5, len*.5);  //point 6
  s.vertex( len*.45, len*.25); //point 7
  s.endContour(); //end internal cutout

  s.endShape(CLOSE); //end shape
  shape( s, 0,0);  //this displays the shape on the canvas at point (0,0)
```

{% endtab %}
{% endtabs %}

## Repeat Pattern using PShape with contour

The image below shows an intricate pattern created using a recursive function and a PShape that has an inner cut-out, contour.

![](https://2312795435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0-KLgCFUL-cVHjEcqM%2F-M0-KO91ISxRnRVYcAC8%2F-M0-KdPt2DBS9nVUz_Zp%2FScreen%20Shot%202018-09-04%20at%2012.17.58%20PM.png?generation=1581627413733491\&alt=media)