[p5.js 2.0 Bug Report]: Transform not respected in bezier shapes for clipping masks

[pbayer8]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.2.0

Web browser and version

Chrome 143.0.7499.193

Operating system

MacOS

Steps to reproduce this

Steps:

1. Open a new sketch in the playground (use p5 version 2.2.0)
2. Paste in the snippet
3. Notice the circle is translated / shows up twice in the clipping mask, but the bezier curve only shows up once.
4. (Optional) Modify the snippet to not use a clipping mask, and just stroke the two circles and two beziers.
5. Notice all four shapes, 2 beziers, 2 circles render properly.

Snippet:

function setup() {
  createCanvas(1000, 1000);	
}

function drawClipShape() {
  circle(100, 100, 100)
  beginShape();
  bezierVertex(30, 20);
  bezierVertex(80, 0);
  bezierVertex(80, 75);
  bezierVertex(30, 75);
  endShape();
}

function draw() {
  push()
  beginClip()
  drawClipShape()
  push()
  translate(100,0)
  drawClipShape()
  pop()
  endClip()
  fill("#ff0000")

  rect(0,0,600,600)
  pop()

}

[pbayer8]

I think a bigger version of this issue #7903 was fixed with PR #8236, but this sub-issue remains. Perhaps related to #8277. @davepagurek @VANSH3104 you two seem most involved in this slice of the codebase, any thoughts?

[rakesh2OO5]

Hi! I was able to reproduce this in p5.js 2.2.0 locally and in the web editor.

I’d like to investigate the clipping + transform pipeline for bezier paths and work on a fix. My plan is to trace how bezier shapes are converted into the clip path and compare that flow with circle/primitive shapes.

If no one else is currently working on this, I’d be happy to take it on.

[VANSH3104]

@pbayer8 Thanks for catching this! You're right bezier shapes were missed in the #8236 fix.

@davepagurek Could I work on extending the same transform logic from #8236 to the drawShape() method? The fix pattern would be identical to what was implemented for primitives.

The issue is in p5.Renderer2D.js where drawShape() calls clipPath.addPath(visitor.path) without the transform parameter that primitives now use.

[VANSH3104]

@davepagurek @pbayer8, I found the fix and it’s working correctly. Can I create a PR?

[davepagurek]

Thanks @VANSH3104, go ahead!