# How to close a PShape with 2 arcs and two lines

**URL:** <https://discourse.processing.org/t/how-to-close-a-pshape-with-2-arcs-and-two-lines/5287>\
**Category:** Coding Questions\
**Created:** [November 7, 2018, 2:27am UTC](https://discourse.processing.org/t/how-to-close-a-pshape-with-2-arcs-and-two-lines/5287 "2018-11-07T02:27:43Z")\
**Posts on this page:** 1\
**Showing post:** 14

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [November 12, 2018, 5:42pm UTC](https://discourse.processing.org/t/how-to-close-a-pshape-with-2-arcs-and-two-lines/5287/14 "2018-11-12T17:42:01Z")

</div>

There are a few gotchas, so consult their reference pages carefully. Be careful about how you include the minimum number of points per curve-type points to get an effect, and lead and follow with the needed extra points – e.g. with a control points for curveVertex, and leading with a normal point for bezierVertex.

> “The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of a the curve.” [curveVertex() / Reference / Processing.org](https://processing.org/reference/curveVertex_.html)

You can use either to approximate a circle, then use that to draw arcs. The control point math for the bezierVertex version can get a bit complex – for discussion see [How to create circle with Bézier curves?](https://stackoverflow.com/questions/1734745/how-to-create-circle-with-b%C3%A9zier-curves). For curveVertex (Catmull-Rom splines) you really just need to find points on the circumference using the parametric equation for a circle.

Here is an example that draws an arc portion of a ring (doughnut). It draws a vertex, an arc of curveVertex, and a vertex. If you connect two of them running in different directions within the same beginShape/endShape (an inner arc and an outer arc) then you get a ring arc, and it can be closed and filled.

Notice it has the same subtle animation problems that arc has, and that the “resolution” setting is necessary to prevent distortion.

```auto
/**
 * Curve Vertex Arc Ring
 * Draw arc with curveVertex. Mouse changes angle, thickness. Key toggles points.
 * 2018-11-12 Jeremy Douglass - Processing 3.4
 * https://discourse.processing.org/t/how-to-close-a-pshape-with-2-arcs-and-two-lines/5287/12
 */
boolean seePoints;
void setup() {
  size(400, 200);
}

void draw() {
  background(192);
  // mouse-controlled angle
  float r = width / 4.0 - 20;
  float angle = mouseX/(float)width * TWO_PI;
  translate(width/4, height/2);
  // vertex arc ring
  beginShape();
  float r2 = r * mouseY/(float)height;
  curveVertexRing(0, 0, r, r2, 0, angle);
  endShape(CLOSE);
  // arc
  translate(width/2, 0);
  arc(0, 0, 2*r, 2*r, 0, angle, PIE);
}

void keyReleased() {
  seePoints = !seePoints;
}

void curveVertexRing(float cx, float cy, float r, float r2, float start, float stop) {
  curveVertexArc(cx, cy, r, start, stop);
  curveVertexArc(cx, cy, r2, stop, start);
}

void curveVertexArc(float cx, float cy, float r, float start, float stop) {
  float resolution = TWO_PI/32; // angle per curve point -- too few distorts
  float x, y;
  float a = start;
  int segments = max(ceil(abs(stop-start)/resolution), 4);
  vertex(cx + r * cos(start), cy + r * sin(start));  
  float step = (stop-start)/(float)segments;
  for (int i=0; i<=segments; i++) {
    // define curve point with parametric equation for circle
    x = cx + r * cos(a);
    y = cy + r * sin(a);
    curveVertex(x, y);
    a += step;
    if (seePoints) ellipse(x, y, 10, 10); // inspect control points
  }
  vertex(cx + r * cos(stop), cy + r * sin(stop));
}

```

![CurveVertexArcRing--screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4c1ac842c258ee9dd3589e556e19ce758622543e.png)

---

_[View the full topic](https://discourse.processing.org/t/how-to-close-a-pshape-with-2-arcs-and-two-lines/5287)._