Coding a hole using PShape

Processing Coding Questions
1

Here is the code from the processing example

/**
 * 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;

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
image1366×768 61.5 KB

this is what I get
image

2

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

3

That’s right! From the reference:

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.