Add arcVertex() function to create circles arc using vertices.

Created by: jb4xx

I feel like processing could use a function that easily generate arc circles to construct PShapes.

My proposal would be to use a bezier approximation of a circle and use the already existing bezierVertex() function to create an arc.
The argument list of the function could be similar to the one use for the arc() function to keep the same logic.

Here is what the function could look like:

/**
* Use bezierVertex to approximate an arc 
* The expected parameters are similar to the one found in the arc() function
* Since it uses bezierVertex to approximate an arc, it must be prefaced with a call to vertex() to set the first anchor point of the arc.
*
* @param  cx        x-coordinate of the center of the arc
* @param  cy        y-coordinate of the center of the arc
* @param  r         radius of the arc
* @param  a1        angle to start the arc, specified in radians
* @param  a2        angle to stop the arc, specified in radians
* @param  rotation  the direction in which to draw the arc. 1 for clockwise. -1 for counterclockwise
*/
void arcVertex(float cx, float cy, float r, float a1, float a2, int rotation) {
  a1 = a1 % TWO_PI;
  a2 = a2 % TWO_PI;
  float angleSpan;
  if (rotation == 1) {
    angleSpan = ((a2 - a1) % TWO_PI + TWO_PI) % TWO_PI;
  } else {
    rotation = -1;
    angleSpan = ((a1 - a2) % TWO_PI + TWO_PI) % TWO_PI;
  }

  int nbOfExtraPts = (int)(angleSpan / HALF_PI);
  float angleStep = angleSpan / (nbOfExtraPts + 1);

  ArrayList<PVector> anchorPts = new ArrayList<PVector>();
  anchorPts.add(new PVector(cx + r * cos(a1), cy + r * sin(a1)));
  for (int i = 0; i < nbOfExtraPts; i++) {
    anchorPts.add(new PVector(cx + r * cos(a1 + rotation * (i + 1) * angleStep), cy + r * sin(a1 + rotation * (i + 1) * angleStep)));
  }
  anchorPts.add(new PVector(cx + r * cos(a2), cy + r * sin(a2)));

  for (int i = 0; i < anchorPts.size() - 1; i++) {
    PVector start = anchorPts.get(i);
    PVector end = anchorPts.get(i + 1);

    float ax = start.x - cx;
    float ay = start.y - cy;

    float bx = end.x - cx;
    float by = end.y - cy;

    float q1 = ax * ax + ay * ay;
    float q2 = q1 + ax * bx + ay * by;
    float k2 = (4/3.0) * (sqrt(2 * q1 * q2) - q2) / (ax * by - ay * bx);

    float x2 = cx + ax - k2 * ay;
    float y2 = cy + ay + k2 * ax;
    float x3 = cx + bx + k2 * by;                              
    float y3 = cy + by - k2 * bx;

    bezierVertex(x2, y2, x3, y3, end.x, end.y);
  }
}

And here is a possible use case:

final float cx = 300;                   // x-coordinate of the center of the arc
final float cy = 300;                   // y-coordinate of the center of the arc
final float r1 = 150;                   // 1st radius
final float r2 = 250;                   // 2nd radius
final float startAngle = QUARTER_PI;    // Angle at which to start drawing the arc
final float stopAngle = 3 * QUARTER_PI; // Angle at which to stop drawing the arc


void setup() {
 size(600, 600);
 background(20);
 
 // Define style
 noFill();
 stroke(230);
 strokeWeight(4);
 
 // Draw the shape
 beginShape();
 vertex(cx + r1 * cos(startAngle), cy + r1 * sin(startAngle));
 arcVertex(cx, cy, r1, startAngle, stopAngle, 1);
 vertex(cx + r2 * cos(stopAngle), cy + r2 * sin(stopAngle));
 arcVertex(cx, cy, r2, stopAngle, startAngle, -1);
 vertex(cx + r1 * cos(startAngle), cy + r1 * sin(startAngle));
 endShape();

}

/**
* Use bezierVertex to approximate an arc 
* The expected parameters are similar to the one found in the arc() function
* Since it uses bezierVertex to approximate an arc, it must be prefaced with a call to vertex() to set the first anchor point of the arc.
*
* @param  cx        x-coordinate of the center of the arc
* @param  cy        y-coordinate of the center of the arc
* @param  r         radius of the arc
* @param  a1        angle to start the arc, specified in radians
* @param  a2        angle to stop the arc, specified in radians
* @param  rotation  the direction in which to draw the arc. 1 for clockwise. -1 for counterclockwise
*/
void arcVertex(float cx, float cy, float r, float a1, float a2, int rotation) {
 a1 = a1 % TWO_PI;
 a2 = a2 % TWO_PI;
 float angleSpan;
 if (rotation == 1) {
   angleSpan = ((a2 - a1) % TWO_PI + TWO_PI) % TWO_PI;
 } else {
   rotation = -1;
   angleSpan = ((a1 - a2) % TWO_PI + TWO_PI) % TWO_PI;
 }

 int nbOfExtraPts = (int)(angleSpan / HALF_PI);
 float angleStep = angleSpan / (nbOfExtraPts + 1);

 ArrayList<PVector> anchorPts = new ArrayList<PVector>();
 anchorPts.add(new PVector(cx + r * cos(a1), cy + r * sin(a1)));
 for (int i = 0; i < nbOfExtraPts; i++) {
   anchorPts.add(new PVector(cx + r * cos(a1 + rotation * (i + 1) * angleStep), cy + r * sin(a1 + rotation * (i + 1) * angleStep)));
 }
 anchorPts.add(new PVector(cx + r * cos(a2), cy + r * sin(a2)));

 for (int i = 0; i < anchorPts.size() - 1; i++) {
   PVector start = anchorPts.get(i);
   PVector end = anchorPts.get(i + 1);

   float ax = start.x - cx;
   float ay = start.y - cy;

   float bx = end.x - cx;
   float by = end.y - cy;

   float q1 = ax * ax + ay * ay;
   float q2 = q1 + ax * bx + ay * by;
   float k2 = (4/3.0) * (sqrt(2 * q1 * q2) - q2) / (ax * by - ay * bx);

   float x2 = cx + ax - k2 * ay;
   float y2 = cy + ay + k2 * ax;
   float x3 = cx + bx + k2 * by;                              
   float y3 = cy + by - k2 * bx;

   bezierVertex(x2, y2, x3, y3, end.x, end.y);
 }
}

La issue non indica alcun file sorgente né alcun test. Inizia confrontando il comportamento proposto di arcVertex() con gli entry point esistenti arc() e bezierVertex(), quindi traccia come vengono costruiti i PShapes tra beginShape() e endShape(). Per considerare il lavoro completato sono necessari un design dell’API approvato da un maintainer e una costruzione dell’arco verificata per il caso d’uso descritto.