# I have a question about arc()

**URL:** <https://discourse.processing.org/t/i-have-a-question-about-arc/20396>\
**Category:** Processing\
**Created:** [May 2, 2020, 3:16pm UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396 "2020-05-02T15:16:23Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![356](https://avatars.discourse-cdn.com/v4/letter/3/58956e/32.png) [@356](https://discourse.processing.org/u/356)\
**Post date:** [May 2, 2020, 3:16pm UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/1 "2020-05-02T15:16:23Z")

</div>

I have a question about arc().

I’m not good at English, so I’m using machine translation.

The behavior below seems intuitive.

```auto
// P5.js

function setup(){
  createCanvas(200, 400);
}
function draw(){
  translate(0, height/2);
  background(0, 0, 0);
  noStroke();
  ellipseMode(RADIUS);
  fill(255, 255, 0); // yellow
  arc(0, -100, 200, 100, radians(-30), radians(30));
  fill(255, 0, 255); // magenta
  arc(0, 100, 200, 200, radians(-30), radians(30));
}

```

The behavior below seems counterintuitive to me.

```auto
// Processing3.5.4

size(200, 400);
translate(0, height/2);
background(0, 0, 0);
noStroke();
ellipseMode(RADIUS);
fill(255, 255, 0); // yellow
arc(0, -100, 200, 100, radians(-30), radians(30));
fill(255, 0, 255); // magenta
arc(0, 100, 200, 200, radians(-30), radians(30));

```

Is this a Processing spec?  
What’s the difference between the two?  
Is there a way to deal with it? I’d like to specify an intuitive angle for this program.

Thank you for reading this.

---

<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:** [May 2, 2020, 3:22pm UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/2 "2020-05-02T15:22:49Z")

</div>

I don’t know which should be more intuitive. But it is odd that those don’t match.  
**(That the two yellows, the yellow Processing and the yellow p5.js, do not match even though they take the same arguments)**

p5.js

 ![Screen Shot 2020-05-02 at 8.21.32 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cc00d691c94879edc37a19bb38096677671df96e.png)

Processing (Java)

 ![Screen Shot 2020-05-02 at 8.20.49 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/da0f2657049dbb7a34efc14c6c9a88a8263bee05.png)

Perhaps you could open an issue on the Processing and/or p5.js github repo?

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [May 2, 2020, 3:37pm UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/3 "2020-05-02T15:37:50Z")

</div>

The third parameter in the two arc statement are not the same that’s explains the difference between the yellow and magenta arcs.

```auto
arc(0, -100, 200, 100, radians(-30), radians(30));
arc(0, 100, 200, 200, radians(-30), radians(30));
// ^^^

```

---

<div class="post-metadata">

**Author:** ![behreajj](https://avatars.discourse-cdn.com/v4/letter/b/b5a626/32.png) [@behreajj](https://discourse.processing.org/u/behreajj)\
**Post date:** [May 2, 2020, 3:49pm UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/4 "2020-05-02T15:49:09Z")

</div>

Hi all,

I’m guessing that variations in how arcs deal with nonuniform scales (where the width and height of the arc are different) would be of interest.

The implementation for the p5.js arc is here

> <https://github.com/processing/p5.js/blob/446252d6a7609bf50d0fa53b1a13e46836ab99a2/src/core/p5.Renderer2D.js#L428>

Maybe p5.js rolls its own because the HTML5 canvas arc doesn’t support nonuniform scaling for an [arc](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc).

The Java AWT renderer uses an [arc object](https://github.com/processing/processing/blob/8e86389c7e017d0e4d61f81fb942c25e3ed348c7/core/src/processing/awt/PGraphicsJava2D.java#L92), which it sets in draw

> <https://github.com/processing/processing/blob/8e86389c7e017d0e4d61f81fb942c25e3ed348c7/core/src/processing/awt/PGraphicsJava2D.java#L1279>

Looks like the AWT arc object does support non-uniform scaling, so the next step would be to look at a specification or the source code for that.

It might also be interesting to see how the SVG spec for arcs differs from HTML5 and AWT, and what Processing does to bridge any differences when importing.

Best,  
Jeremy

---

<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:** [May 2, 2020, 4:03pm UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/5 "2020-05-02T16:03:06Z")

</div>

It seems like the p5.js interpretation is an elliptical arc (a 60 degree slice of an ellipse)

The Java interpretation seems to be a circular arc scaled by the height/width ratio (a 60 degree slice, scaled by y=y\*0.5).

---

<div class="post-metadata">

**Author:** ![356](https://avatars.discourse-cdn.com/v4/letter/3/58956e/32.png) [@356](https://discourse.processing.org/u/356)\
**Post date:** [May 3, 2020, 2:10am UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/6 "2020-05-03T02:10:59Z")

</div>

Thank you for your reply.  
What I think is more intuitive is the p5.js.  
Because p5.js looks like it’s showing the angle I set in arc().  
It may be a matter of difference of opinion as to which one you think is more intuitive.  
Thank you so much for sharing github with me.

---

<div class="post-metadata">

**Author:** ![356](https://avatars.discourse-cdn.com/v4/letter/3/58956e/32.png) [@356](https://discourse.processing.org/u/356)\
**Post date:** [May 3, 2020, 2:24am UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/7 "2020-05-03T02:24:06Z")

</div>

Thank you for your reply.  
I may have asked the wrong question.  
In Processing(Java), I’m wondering why the angle between yellow and magenta is different, even if the same angle is set between yellow and magenta.

---

<div class="post-metadata">

**Author:** ![356](https://avatars.discourse-cdn.com/v4/letter/3/58956e/32.png) [@356](https://discourse.processing.org/u/356)\
**Post date:** [May 3, 2020, 2:27am UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/8 "2020-05-03T02:27:11Z")

</div>

Thank you for showing these images!

---

<div class="post-metadata">

**Author:** ![356](https://avatars.discourse-cdn.com/v4/letter/3/58956e/32.png) [@356](https://discourse.processing.org/u/356)\
**Post date:** [May 3, 2020, 4:13am UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/9 "2020-05-03T04:13:01Z")

</div>

Thank you for your reply.  
I first learned that Processing uses the AWT arc object.  
I’m going to check it out.  
Thank you for the detailed commentary.

---

<div class="post-metadata">

**Author:** ![356](https://avatars.discourse-cdn.com/v4/letter/3/58956e/32.png) [@356](https://discourse.processing.org/u/356)\
**Post date:** [May 3, 2020, 4:32am UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/10 "2020-05-03T04:32:31Z")

</div>

> The Java interpretation seems to be a circular arc scaled by the height/width ratio (a 60 degree slice, scaled by y=y\*0.5).

It certainly looks like it.  
I think that’s a great tips.  
Thank you very much.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [May 3, 2020, 9:00am UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/11 "2020-05-03T09:00:09Z")

</div>

> [@356](#):
>
> Thank you for your reply.  
> I may have asked the wrong question.  
> In Processing(Java), I’m wondering why the angle between yellow and magenta is different, even if the same angle is set between yellow and magenta.

As I said before the difference between the colours is because you are not comparing like with like if you can the code as I suggested to

```auto
size(200, 400);
translate(0, height/2);
background(0, 0, 0);
noStroke();
ellipseMode(RADIUS);
fill(255, 255, 0); // yellow
arc(0, -100, 200, 200, radians(-30), radians(30));
fill(255, 0, 255); // magenta
arc(0, 100, 200, 200, radians(-30), radians(30));

```

then you get

 ![Screenshot 2020-05-03 at 09.54.58](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1cdc8627052468bd44fa034c115d012c240c8875.png)

There maybe a difference between the Javascript and Java rendering probably down to the implementations of `ellipseMode(RADIUS);`

---

<div class="post-metadata">

**Author:** ![356](https://avatars.discourse-cdn.com/v4/letter/3/58956e/32.png) [@356](https://discourse.processing.org/u/356)\
**Post date:** [May 3, 2020, 12:38pm UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/12 "2020-05-03T12:38:25Z")

</div>

Thank you for explaining.

> [@quark](#):
>
> There maybe a difference between the Javascript and Java rendering probably down to the implementations of `ellipseMode(RADIUS);`

I tried about ellipseMode(RADIUS);.  
I commented it out to remove its impact.  
I made one arc for simplicity.

```auto
//Processing(Java)
size(200, 200);
translate(0, height/2);
background(0, 0, 0);
noStroke();
//ellipseMode(RADIUS);
fill(255, 255, 0); // yellow
arc(0, 0, 200, 100, radians(-30), radians(30));

```

![Processing](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d73a89e625106bb5323c736025ff3517b32cd593.png)

```auto
//p5.js
function setup(){
  createCanvas(200, 200);
}
function draw(){
  translate(0, height/2);
  background(0, 0, 0);
  noStroke();
  //ellipseMode(RADIUS);
  fill(255, 255, 0); // yellow
  arc(0, 0, 200, 100, radians(-30), radians(30));
}

```

![P5js](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c8a7b3a5c6b8ec8c9d0cbabc3e78361bcf13338c.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [May 3, 2020, 1:06pm UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/13 "2020-05-03T13:06:28Z")

</div>

Hello @356,

My exploration of this while doing laundry.  
If I divide the angle by width/height ratio in the P5.js mode the results are the same as Processing Java mode in each ellipseMode().

A mouse click will toggle through the modes.

```auto
//Processing (Java)

int num = 0;

void setup()
  {
  size(200, 200);
  }
  
void draw()
  {
  background(0);
  translate(0, height/2);

  noStroke();
  
  switch(num)
    {
    case 0:
      ellipseMode(CENTER);
      break;
    case 1:
      ellipseMode(RADIUS);
      break;
    case 2:
      ellipseMode(CORNER);
      break;
    case 3:
      ellipseMode(CORNERS);
      break;
    default:
      ellipseMode(CENTER);
      break;
    }

  fill(0, 255, 0);
  ellipse(0, 0, 200, 100);

  fill(255, 255, 0); // yellow
  arc(0, 0, 200, 100, radians(-30), radians(30));  
  }
  
void mousePressed()
  {
  num++;
  if (num>4) num = 0;
  }

```

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

```auto
//p5.js (JavaScript)

let num = 0;

function setup()
  {
  createCanvas(200, 200);
  }

function draw()
  {
  background(0);
  translate(0, height/2);

  noStroke();
  
  switch(num)
    {
    case 0:
      ellipseMode(CENTER);
      break;
    case 1:
      ellipseMode(RADIUS);
      break;
    case 2:
      ellipseMode(CORNER);
      break;
    case 3:
      ellipseMode(CORNERS);
      break;
    default:
      ellipseMode(CENTER);
      break;
    }

  fill(0, 255, 0);
  ellipse(0, 0, 200, 100);

  fill(255, 255, 0); // yellow
  arc(0, 0, 200, 100, radians(-30)/2.0, radians(30/2.0));  
  }
  

function mousePressed()
  {
  num++;
  if (num>4) 
    {
    num = 0;
    }
  }

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/84e1e3711780770e427d79ebdb80965c9a2b6163.png)

That was fun!

This was just a start…

`:)`

---

<div class="post-metadata">

**Author:** ![356](https://avatars.discourse-cdn.com/v4/letter/3/58956e/32.png) [@356](https://discourse.processing.org/u/356)\
**Post date:** [May 4, 2020, 9:47am UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/14 "2020-05-04T09:47:51Z")

</div>

Hello @glv,

It’s an interesting program.  
I think I’ve been given an important point of view.  
Thank you.

---

<div class="post-metadata">

**Author:** ![356](https://avatars.discourse-cdn.com/v4/letter/3/58956e/32.png) [@356](https://discourse.processing.org/u/356)\
**Post date:** [May 6, 2020, 7:28pm UTC](https://discourse.processing.org/t/i-have-a-question-about-arc/20396/15 "2020-05-06T19:28:52Z")

</div>

I was able to create the program as I envisioned it.  
I’m not sure if it’s completely correct.  
The white line is the 45-degree line of the landmark.  
Note that the angle used for arc2() is not radian.  
Also, ellipseMode() is not supported.  
Other than that, I think it’s pretty much the same as Processing’s standard arc().

```auto
//Processing(Java)

void settings()
{
  size(200, 200);
}

void setup()
{
  background(0);
  stroke(255);
  line(0, height, width, 0);
  //translate(width/2, height/2);
  //translate(0, height/2);
  translate(0, height);
  noStroke();
  fill(255, 255, 0, 190); // yellow
  arc2(0, 0, 200, 100, -45, 0);  
}

void arc2(float x, float y, float w, float h, float startdeg, float stopdeg){
  println("arc2");
  float a = w/2;
  println("a:"+a);
  float b = h/2;
  println("b:"+b);
  float deg_step = 1;
  
  beginShape();
    vertex(x, y);
    float xp, yp;
    for(float i = startdeg; i <= stopdeg; i+=deg_step){
      println("i:"+i);
      xp = xc(a, b, i);
      yp = yc(xp, i);
      if(0 == i){
        xp = a;
        yp = 0;
      }else if( (0 < i) && (i < 90) ){ // 1st quadrant.
        xp = abs(xp);
        yp = abs(yp);
      }else if(90 == i){
        xp = 0;
        yp = b;
      }else if( (90 < i) && (i < 180) ){ // 2nd quadrant.
        xp = -abs(xp);
        yp = abs(yp);
      }else if(180 == i){
        xp = -a;
        yp = 0;
      }else if( (180 < i) && (i < 270) ){ // 3rd quadrant.
        xp = -abs(xp);
        yp = -abs(yp);
      }else if(270 == i){
        xp = 0;
        yp = -b;
      }else if( (270 < i) && (i < 360)){ // 4th quadrant.
        xp = abs(xp);
        yp = -abs(yp);
      }
      vertex(xp+x, yp+y);
    }
  endShape(CLOSE);
}

float xc(float a, float b, float theta_deg){
  float xc;
  xc = 1 / (
              sqrt(
                    sq(1/a) + sq(
                                  tan(
                                       radians(theta_deg)
                                     ) / b
                                )
                  )
           );
  println("xc:"+xc);
  return xc;
}
float yc(float xc, float theta_deg){
  float yc;
  yc = xc*tan(radians(theta_deg));
  println("yc:"+yc);
  return yc;
}

```

![sketch_arc2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8b204458b3573604302eab939fe84927e270a614.png)