P5js - Why can't I apply this specific invert clip to a shape?

p5.js Coding Questions
1

Hi :slight_smile:

I’m trying to apply an invert clip to a shape, but, for this specific clip shape, the clip is not being applied to the shape. It works if the clip is not inverted, and it works with other clips, such as ellipses, simple shapes and shapes with bezier curves.

Here is the code:

function setup() {
  createCanvas(400, 400);
  background(200);

  push();
  translate(-130,50);
  
  beginClip({ invert: true });
  beginShape();
  vertex(332.83,125.59);
  bezierVertex(308.92, 125.59, 303.01, 143.18, 303.01, 153.9);
  vertex(364.44, 153.9);
  bezierVertex(364.44, 143.45, 358.67, 125.59, 332.83, 125.59);
  endShape(CLOSE);
  endClip();
  
  beginShape();
  vertex(397.15, 174.93);
  vertex(303.42, 174.93);
  bezierVertex(304.66, 187.99, 317.71, 194.58, 339.15, 194.58);
  bezierVertex(371.31, 194.58, 394.26, 186.33, 395.5, 185.92);
  vertex(395.5, 212.86);
  bezierVertex(394.54, 213.27, 376.81, 221.79, 337.23, 221.79);
  bezierVertex(289.95, 221.79, 267.96, 199.66, 267.96, 162.42);
  bezierVertex(267.96, 125.18, 292.42, 100.85, 332.56, 100.85);
  bezierVertex(379.15, 100.85, 397.43, 132.32, 397.43, 165.17);
  bezierVertex(397.43, 168.61, 397.43, 172.18, 397.16, 174.93);
  endShape(CLOSE);
  
  pop();  
}

Can you help me?

Thank you.

2

1.Try doing away with the push() and pop() and add a noStroke(); at the top.
2. Use only one beginShape() … endShape() with all of your code in between (except noStroke() and translate()).

Output:

e
e798×792 3.54 KB

1 Like
3

Thank you so much :slight_smile:
It is working.