Create version which is compatible with p5.js v.2.0

[golanlevin]

Start by auto-detecting the version of p5.js which is running, using e.g. print(VERSION);

[thrly]

Current version of plotSVG (Version 0.1.4, April 6, 2025) is working okay with p5.js v.2.0.0 for me at the moment. I'm sure there are edge cases and other breaking changes, but basic geometry output seems okay. 🤞

[golanlevin]

Hi @thrly, thank you so much for the heads up and early testing!!!! This is extremely helpful to know.

For the moment (April 2025), basic shapes like ellipses and rectangles "should" work fine using plotSVG 0.1.4–0.1.5 and p5.js v.2.0.

The main place where I'm expecting some incompatibility is in the new implementation of the wiggly vertex commands (bezierVertex(), quadraticVertex(), splineVertex(), curveVertex()) inside beginShape() / endShape() constructions. This is discussed in the mid-April PR by the excellent @GregStanton, processing/p5.js#7734 and implemented (I gather) in custom_shapes.js. The exact differences from expected behavior may be subtle.

I plan to make any necessary repairs this summer. Until then, if anyone is experiencing weird issues making precise curves with p5.plotSVG in p5.js 2.0, I recommend using the "1.x compatibility add-on for shapes", located here,
https://github.com/processing/p5.js-compatibility/blob/main/src/shapes.js, and discussed here: https://github.com/processing/p5.js-compatibility

[golanlevin]

Note to self.
p5.js v.2.2.0 is currently not working with p5.plotSvg 0.18. The issue is:

In p5.js v2, both window.line and _p5Instance.line are defined with writable: false. Simple assignment silently
fails.

Fix: Use Object.defineProperty() to override the non-writable properties.

Now we need to:

1. Apply this fix to ALL override functions (not just line)
2. Also fix the restore functions to use defineProperty
3. Clean up the debug code

I'll be applying this fix systematically to all the override functions:

1. Create a helper function for the override pattern
2. Update all ~25 override functions to use it
3. Update restoreP5Functions() similarly

This would make p5.plotSvg compatible with p5.js v2 for basic shapes (while the curve vertex behavior differences would still
need the separate compatibility work later).

[golanlevin]

DEBUG before override: window.line === _p5Instance.line? true
p5.plotSvg.js:270 DEBUG before override: typeof window.line function
p5.plotSvg.js:272 DEBUG: window.line property descriptor: {writable: false, enumerable: true, configurable: true, value:
ƒ}
p5.plotSvg.js:273 DEBUG: is it a getter? false
p5.plotSvg.js:511 DEBUG overrideLineFunction: _p5Instance.line exists? function
p5.plotSvg.js:512 DEBUG overrideLineFunction: line on prototype? undefined
p5.plotSvg.js:514 DEBUG: _p5Instance.line descriptor: {writable: false, enumerable: true, configurable: true, value: ƒ}
p5.plotSvg.js:532 DEBUG: assignment worked? _p5Instance.line === newLineFunc: false
p5.plotSvg.js:534 DEBUG: _p5Instance.line has marker? undefined
p5.plotSvg.js:535 DEBUG: window.line has marker? undefined
p5.plotSvg.js:538 DEBUG: After defineProperty, window.line === newLineFunc? true
p5.plotSvg.js:283 DEBUG after override: window.line === _p5Instance.line? true
sketch.js:28 DEBUG in sketch: line has marker? true
sketch.js:29 DEBUG in sketch: this.line has marker? true
sketch.js:30 DEBUG in sketch: line === this.line? true
p5.plotSvg.js:519 DEBUG line called #1, _bRecordingSvg = true
p5.plotSvg.js:525 DEBUG line command pushed, total commands: 1
p5.plotSvg.js:231 DEBUG endRecordSvg: window.line still has marker? true
p5.plotSvg.js:232 DEBUG endRecordSvg: _commands.length = 1
p5.plotSvg.js:233 DEBUG endRecordSvg: _bRecordingSvg = true

[golanlevin]

Here's a summary of the p5.js v2 compatibility fix for line() and circle():

Key issues discovered:

1. In v2, global functions (window.line, etc.) are defined with writable: false - simple assignment fails silently
2. In v2 global mode, this inside draw() is window, not the p5 instance
3. p5.instance provides access to the actual p5 instance in v2
4. _renderer._ellipseMode is undefined until explicitly set (defaults to 'center')

The fix pattern for v2-compatible overrides:

1. Detect version and use p5.instance when user passes window as the p5 instance
2. Save original from window.func (not _p5Instance.func)
3. Use Object.defineProperty with writable: true to override
4. Call original with _originalFunc.apply(_p5Instance, arguments) to ensure correct context
5. Use optional chaining with fallbacks for internal state access (e.g., _ellipseMode)
6. Restore with Object.defineProperty keeping writable: true

To extend this to other functions, the same pattern needs to be applied.