Add ShapePrimitive support for arcs and ellipses

src/core/p5.Renderer2D.js

@@ -661,106 +661,35 @@ class Renderer2D extends Renderer {
    *   start <= stop < start + TWO_PI
    */
   arc(x, y, w, h, start, stop, mode) {
-    const ctx = this.drawingContext;
-    const rx = w / 2.0;
-    const ry = h / 2.0;
-    const epsilon = 0.00001; // Smallest visible angle on displays up to 4K.
-    let arcToDraw = 0;
-    const curves = [];
-
-    const centerX = x + w / 2,
-      centerY = y + h / 2,
-      radiusX = w / 2,
-      radiusY = h / 2;
-    if (this._clipping) {
-      const tempPath = new Path2D();
-      tempPath.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);
-      const currentTransform = this.drawingContext.getTransform();
-      const clipBaseTransform = this._clipBaseTransform.inverse();
-      const relativeTransform = clipBaseTransform.multiply(currentTransform);
-      this.clipPath.addPath(tempPath, relativeTransform);
-      return this;
-    }
-    // Determines whether to add a line to the center, which should be done
-    // when the mode is PIE or default; as well as when the start and end
-    // angles do not form a full circle.
-    const createPieSlice = ! (
-      mode === constants.CHORD ||
-      mode === constants.OPEN ||
-      (stop - start) % constants.TWO_PI === 0
+    const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
+    shape.beginShape();
+    shape.arcPrimitive(
+      x,
+      y,
+      w,
+      h,
+      start,
+      stop,
+      mode
     );
-
-    // Fill curves
-    if (this.states.fillColor) {
-      ctx.beginPath();
-      ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);
-      if (createPieSlice) ctx.lineTo(centerX, centerY);
-      ctx.closePath();
-      ctx.fill();
-    }
-
-    // Stroke curves
-    if (this.states.strokeColor) {
-      ctx.beginPath();
-      ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);
-
-      if (mode === constants.PIE && createPieSlice) {
-        // In PIE mode, stroke is added to the center and back to path,
-        // unless the pie forms a complete ellipse (see: createPieSlice)
-        ctx.lineTo(centerX, centerY);
-      }
-
-      if (mode === constants.PIE || mode === constants.CHORD) {
-        // Stroke connects back to path begin for both PIE and CHORD
-        ctx.closePath();
-      }
-      ctx.stroke();
-    }
+    shape.endShape();
+    this.drawShape(shape);
 
     return this;
 
   }
 
   ellipse(args) {
-    const ctx = this.drawingContext;
-    const doFill = !!this.states.fillColor,
-      doStroke = this.states.strokeColor;
     const x = parseFloat(args[0]),
       y = parseFloat(args[1]),
       w = parseFloat(args[2]),
       h = parseFloat(args[3]);
-    if (doFill && !doStroke) {
-      if (this._getFill() === styleEmpty) {
-        return this;
-      }
-    } else if (!doFill && doStroke) {
-      if (this._getStroke() === styleEmpty) {
-        return this;
-      }
-    }
-    const centerX = x + w / 2,
-      centerY = y + h / 2,
-      radiusX = w / 2,
-      radiusY = h / 2;
-    if (this._clipping) {
-      const tempPath = new Path2D();
-      tempPath.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
-      const currentTransform = this.drawingContext.getTransform();
-      const clipBaseTransform = this._clipBaseTransform.inverse();
-      const relativeTransform = clipBaseTransform.multiply(currentTransform);
-      this.clipPath.addPath(tempPath, relativeTransform);
-      return this;
-    }
-    ctx.beginPath();
-    ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
-    ctx.closePath();
-    if (doFill) {
-      ctx.fill();
-    }
-    if (doStroke) {
-      ctx.stroke();
-    }
 
+    const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
+    shape.beginShape();
+    shape.ellipsePrimitive(x,y,w,h);
+    shape.endShape();
+    this.drawShape(shape);
     return this;
   }
 

src/shape/custom_shapes.js

@@ -466,6 +466,75 @@ class Quad extends ShapePrimitive {
   }
 }
 
+class ArcPrimitive extends ShapePrimitive {
+  #x;
+  #y;
+  #w;
+  #h;
+  #start;
+  #stop;
+  #mode;
+  #vertexCapacity = 2;
+
+  constructor(startVertex, endVertex, x, y, w, h, start, stop, mode) {
+    // ShapePrimitive requires at least one vertex; pass a placeholder
+    super(startVertex, endVertex);
+    this.#x = x;
+    this.#y = y;
+    this.#w = w;
+    this.#h = h;
+    this.#start = start;
+    this.#stop = stop;
+    this.#mode = mode;
+  }
+
+  get x() { return this.#x; }
+  get y() { return this.#y; }
+  get w() { return this.#w; }
+  get h() { return this.#h; }
+  get start() { return this.#start; }
+  get stop() { return this.#stop; }
+  get mode() { return this.#mode; }
+
+  get vertexCapacity() {
+    return this.#vertexCapacity;
+  }
+
+  accept(visitor) {
+    visitor.visitArcPrimitive(this);
+  }
+}
+
+class EllipsePrimitive extends ShapePrimitive {
+  #x;
+  #y;
+  #w;
+  #h;
+  #vertexCapacity = 1;
+
+  constructor(centerVertex, x, y, w, h) {
+
+    super(centerVertex);
+    this.#x = x;
+    this.#y = y;
+    this.#w = w;
+    this.#h = h;
+  }
+
+  get x() { return this.#x; }
+  get y() { return this.#y; }
+  get w() { return this.#w; }
+  get h() { return this.#h; }
+
+  get vertexCapacity() {
+    return this.#vertexCapacity;
+  }
+
+  accept(visitor) {
+    visitor.visitEllipsePrimitive(this);
+  }
+}
+
 // ---- TESSELLATION PRIMITIVES ----
 
 class TriangleFan extends ShapePrimitive {
@@ -905,6 +974,44 @@ class Shape {
     this.#generalVertex('arcVertex', position, textureCoordinates);
   }
 
+
+  arcPrimitive(x,y,w,h,start,stop,mode){
+    const centerX = x+w/2;
+    const centerY = y+h/2;
+
+    const startVertex = this.#createVertex(
+      new Vector(
+        centerX+(w/2)*Math.cos(start),
+        centerY+(h/2)*Math.sin(start)
+      )
+    );
+
+    const endVertex = this.#createVertex(
+      new Vector(
+        centerX+(w/2)*Math.cos(stop),
+        centerY+(h/2)*Math.sin(stop)
+      )
+    );
+
+    const primitive = new ArcPrimitive(
+      startVertex,
+      endVertex,
+      x, y, w, h,
+      start,
+      stop,
+      mode
+    );
+    return primitive.addToShape(this);
+
+  }
+
+  ellipsePrimitive(x,y,w,h){
+    const centerVertex = this.#createVertex(new Vector(x+w/2,y+h/2));
+
+    const primitive = new EllipsePrimitive(centerVertex, x, y, w, h);
+    return primitive.addToShape(this);
+  }
+
   beginContour(shapeKind = constants.PATH) {
     if (this.at(-1)?.kind === constants.EMPTY_PATH) {
       this.contours.pop();
@@ -1003,6 +1110,12 @@ class PrimitiveVisitor {
   visitArcSegment(arcSegment) {
     throw new Error('Method visitArcSegment() has not been implemented.');
   }
+  visitArcPrimitive(arc) {
+    throw new Error('Method visitArcPrimitive() has not been implemented.');
+  }
+  visitEllipsePrimitive(ellipse) {
+    throw new Error('Method visitEllipsePrimitive() has not been implemented.');
+  }
 
   // isolated primitives
   visitPoint(point) {
@@ -1151,6 +1264,34 @@ class PrimitiveToPath2DConverter extends PrimitiveVisitor {
       this.path.closePath();
     }
   }
+  visitArcPrimitive(arc) {
+    const centerX = arc.x + arc.w / 2;
+    const centerY = arc.y + arc.h / 2;
+    const radiusX = arc.w / 2;
+    const radiusY = arc.h / 2;
+
+    this.path.ellipse(
+      centerX, centerY, radiusX, radiusY, 0, arc.start, arc.stop
+    );
+
+    if (arc.mode === constants.OPEN) {
+      // OPEN: leave path open — arc stroke/fill is just the curve
+    } else if (arc.mode === constants.CHORD) {
+
+      this.path.closePath();
+    } else {
+      this.path.lineTo(centerX, centerY);
+      this.path.closePath();
+    }
+  }
+  visitEllipsePrimitive(ellipse) {
+    const centerX = ellipse.x + ellipse.w / 2;
+    const centerY = ellipse.y + ellipse.h / 2;
+    const radiusX = ellipse.w / 2;
+    const radiusY = ellipse.h / 2;
+
+    this.path.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
+  }
   visitQuadStrip(quadStrip) {
     for (let i = 0; i < quadStrip.vertices.length - 3; i += 2) {
       const v0 = quadStrip.vertices[i];
@@ -1277,6 +1418,69 @@ class PrimitiveToVerticesConverter extends PrimitiveVisitor {
     // WebGL itself interprets the vertices as a strip, no reformatting needed
     this.contours.push(quadStrip.vertices.slice());
   }
+  visitArcPrimitive(arc) {
+    const centerX = arc.x + arc.w / 2;
+    const centerY = arc.y + arc.h / 2;
+    const radiusX = arc.w / 2;
+    const radiusY = arc.h / 2;
+    const avgRadius = (radiusX+radiusY)/2;
+
+    const arcLength = avgRadius*Math.abs(arc.stop-arc.start);
+
+    const numPoints=Math.max(3, Math.ceil(this.curveDetail*arcLength));
+    const verts = [];
+
+    if (arc.mode === constants.PIE) {
+      verts.push(new Vertex({ position: new Vector(centerX, centerY) }));
+    }
+
+    for (let i = 0; i <= numPoints; i++) {
+      const angle = arc.start + (arc.stop - arc.start) * (i / numPoints);
+      const startVertex=arc.vertices[0];
+      const endVertex=arc.vertices[1];
+      const t=i/numPoints;
+      const props={};
+      for(const key in startVertex){
+        if(key === 'position') continue;
+        if(typeof startVertex[key] === 'number'
+          && typeof endVertex[key]=== 'number'){
+          props[key] = startVertex[key]*(1-t) + endVertex[key]*t;
+        }
+        else{
+          props[key]=startVertex[key];
+        }
+      }
+
+      props.position=new Vector(
+        centerX+radiusX*Math.cos(angle),
+        centerY+radiusY*Math.sin(angle)
+      );
+
+      verts.push(new Vertex(props));
+    }
+
+    this.contours.push(verts);
+  }
+  visitEllipsePrimitive(ellipse) {
+    const centerX = ellipse.x + ellipse.w / 2;
+    const centerY = ellipse.y + ellipse.h / 2;
+    const radiusX = ellipse.w / 2;
+    const radiusY = ellipse.h / 2;
+    const numPoints = Math.max(3, this.curveDetail);
+    const verts = [];
+
+    for (let i = 0; i <= numPoints; i++) {
+      const angle = (2 * Math.PI * i) / numPoints;
+      verts.push(new Vertex({
+        position: new Vector(
+          centerX + radiusX * Math.cos(angle),
+          centerY + radiusY * Math.sin(angle)
+        )
+      }));
+    }
+
+    this.contours.push(verts);
+  }
 }
 
 class PointAtLengthGetter extends PrimitiveVisitor {
@@ -2793,6 +2997,8 @@ export {
   Line,
   Triangle,
   Quad,
+  ArcPrimitive,
+  EllipsePrimitive,
   TriangleFan,
   TriangleStrip,
   QuadStrip,