Add ShapePrimitive support for arcs and ellipses

[VANSH3104]

Resolves #8277

Changes:

• Add ArcPrimitive and EllipsePrimitive classes extending ShapePrimitive
• Implement visitor methods in PrimitiveToPath2DVisitor for 2D rendering
• Add vertex tessellation for WebGL in PrimitiveToVerticesVisitor
• Update arc() and ellipse() to use new ShapePrimitive system

PR Checklist

• [ x] npm run lint passes
• [ x] Inline reference is included / updated
• Unit tests are included / updated

[VANSH3104]

@ksen0, @davepagurek could you please review this and suggest any changes?

[davepagurek]

Thanks for taking this on! I left a few comments about how to make these primitives work more like the others. We should also add some unit visual in both 2D and WebGL mode of these methods if we don't already have some to make sure things keep working.

[davepagurek]

It looks like drawShape already handles clipping so we can remove the clipping code above:

p5.js/src/core/p5.Renderer2D.js

Lines 269 to 279 in 01aa360

	drawShape(shape) {
	const visitor = new PrimitiveToPath2DConverter({
	strokeWeight: this.states.strokeWeight
	});
	shape.accept(visitor);
	if (this._clipping) {
	const currentTransform = this.drawingContext.getTransform();
	const clipBaseTransform = this._clipBaseTransform.inverse();
	const relativeTransform = clipBaseTransform.multiply(currentTransform);
	this.clipPath.addPath(visitor.path, relativeTransform);
	this.clipPath.closePath();

[davepagurek]

Rather than making an object that isn't a full p5.Shape, could we instead make a new real p5.Shape and create a method on it that adds an ellipse primitive? similar to the relation between these methods and their corresponding primitives:

p5.js/src/shape/custom_shapes.js

Lines 891 to 906 in 618e4c8

	vertex(position, textureCoordinates, { isClosing = false } = {}) {
	const added = this.#generalVertex('vertex', position, textureCoordinates);
	added.isClosing = isClosing;
	}
	bezierVertex(position, textureCoordinates) {
	this.#generalVertex('bezierVertex', position, textureCoordinates);
	}
	splineVertex(position, textureCoordinates) {
	this.#generalVertex('splineVertex', position, textureCoordinates);
	}
	arcVertex(position, textureCoordinates) {
	this.#generalVertex('arcVertex', position, textureCoordinates);
	}

[davepagurek]

curveDetail is a multiplier on the length, so numPoints should be something like ceil(this.curveDetail * arcLength)

[davepagurek]

Rather than a capacity of zero, possibly we can contain a vertex representing the start and the end so that we can include all the other properties on a general vertex, which might include texture coordinates, fill, and stroke colors in webgl? Ideally it should go through #generalVertex in Shape to get all of that functionality.

[davepagurek]

Similar to what I mentioned above in ArcPrimitive, ideally we should have some vertices in the primitive already so we can copy their data all around the ellipse but update the position part (the first 2 elements) for arcs and ellipses. For arcs, ideally we would also interpolate the properties of the vertex from the start to the end.