# Coding a hole using PShape

**URL:** <https://discourse.processing.org/t/coding-a-hole-using-pshape/19135>\
**Category:** Coding Questions\
**Created:** [March 29, 2020, 9:38am UTC](https://discourse.processing.org/t/coding-a-hole-using-pshape/19135 "2020-03-29T09:38:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 29, 2020, 9:38am UTC](https://discourse.processing.org/t/coding-a-hole-using-pshape/19135/1 "2020-03-29T09:38:53Z")

</div>

Here is the code from the processing example

```auto
/**
 * BeginEndContour
 * 
 * How to cut a shape out of another using beginContour() and endContour()
 */
 
PShape s;

void setup() {
  size(640, 360, P2D);

  // Make a shape
  s = createShape();
  s.beginShape();
  s.fill(0,150);
  s.stroke(255);
  s.strokeWeight(1);
  // Exterior part of shape
  s.vertex(-100,-100);
  s.vertex(100,-100);
  s.vertex(100,100);
  s.vertex(-100,100);
  
  // Interior part of shape
  s.beginContour();
  s.vertex(-10,-10);
  s.vertex(-10,10);
  s.vertex(10,10);
  s.vertex(10,-10);
  s.endContour();
  
  // Finishing off shape
  s.endShape(CLOSE);
}

void draw() {
  background(52);
  // Display shape
  translate(width/2, height/2);
  // Shapes can be rotated
  s.rotate(0.01);
  shape(s);
}

```

here is my code made to run in draw, using arraylists of points;

```auto
else if(b.type!=107){
          
          if(b.type!=106)fill(0,50);
          else noFill();
          if(pos(b,m)){shapeIndex=i; fill(255,50);}
          stroke(0);
          beginShape();
          
          for(int j=0;j<b.Boundaries.size();j++){
            Boundary c = b.Boundaries.get(j);
            
            vertex(c.x1,c.y1);
            vertex(c.x2,c.y2);
          }}
          if(b.type==106)endShape();
          else if(b.type!=107)endShape(CLOSE);
          
          if(b.type==107){
            if(!b.converted){
          b.bpath = createShape();
          b.bpath.beginShape();
          b.bpath.stroke(0);
          b.bpath.strokeWeight(1);
          b.bpath.fill(0,150);
          
          for(int j=0;j<b.innerBoundaries.size();j++){
            Boundary c = b.innerBoundaries.get(j);
            
            b.bpath.vertex(c.x1,c.y1);
            b.bpath.vertex(c.x2,c.y2);
          }
          
          b.bpath.beginContour();
          
          for(int j=0;j<b.outerBoundaries.size();j++){
            Boundary c = b.outerBoundaries.get(j);
            
            b.bpath.vertex(c.x1,c.y1);
            b.bpath.vertex(c.x2,c.y2);
          }
            b.bpath.endContour();
            b.bpath.endShape();
            b.converted = true;
          }
            else shape(b.bpath);
          }

```

if you need more code, happy to post.

As you can see though it doesnt work as intended  
this is what I should get

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d6dd4081e5c10dfde9474e1eea17e83601e32ed7.png)  
this is what I get  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/03641e4bbaff47228d70572c3bc12793697bc19a.png)

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [March 29, 2020, 11:03am UTC](https://discourse.processing.org/t/coding-a-hole-using-pshape/19135/2 "2020-03-29T11:03:49Z")

</div>

Solved, the order of the vertices matter, The outer vertices must be drawn either clockwise or anticlockwise, and the inner vertices must be drawn in the opposite direction.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0dfdb3d1f9288c14098ccb29955ccd625413f88b.png)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [March 29, 2020, 5:26pm UTC](https://discourse.processing.org/t/coding-a-hole-using-pshape/19135/3 "2020-03-29T17:26:15Z")

</div>

> [@paulgoux](#):
>
> The outer vertices must be drawn either clockwise or anticlockwise, and the inner vertices must be drawn in the opposite direction.

That’s right! From the reference:

> **[beginContour() / Reference](https://processing.org/reference/PShape_beginContour_.html)**
>
> The beginContour() and endContour() methods make it possible to define shapes with other shapes cut out of them. For example, the inside of a letter 'O'. These two functions are always u…

> The exterior shape and the interior contour must _wind_ in opposite directions. This means that if the points of the geometry for the exterior shape are described in a clockwise order, the points on the interior shape are defined in a counterclockwise order.