P5.js: ARC reference

[BerfinA]

Nature of issue?

• [x ] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ x] Other (specify if possible)- reference for arc

Which platform were you using when you encountered this?

• [ ] Mobile/Tablet (touch devices)
• [ x] Desktop/Laptop- web editor
• [ ] Others (specify if possible)

Details about the bug:

• p5.js version:
• Web browser and version:
• Operating System:
• Steps to reproduce this:
  

Feature enhancement details:

New feature details:

in the description of arc reference it specifies;

x | Number: x-coordinate of the arc's ellipse
y | Number: y-coordinate of the arc's ellipse
w | Number: width of the arc's ellipse by default
h | Number: height of the arc's ellipse by default
start | Number: angle to start the arc, specified in radians
stop | Number: angle to stop the arc, specified in radians
mode | Constant: optional parameter to determine the way of drawing the arc. either CHORD, PIE or OPEN
detail | Number: optional parameter for WebGL mode only. This is to specify the number of vertices that makes up the perimeter of the arc. Default value is 25.

The arc is always drawn clockwise from wherever start falls to wherever stop falls on the ellipse. Adding or subtracting TWO_PI to either angle does not change where they fall. If both start and stop fall at the same place, a full ellipse will be drawn.

However, when I put this code to the editor my arc is drawn counter clock wise. This is the case for both using radians and degrees.

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

function draw() {
   background(220);
  arc(100,100,100,100,PI/2,3*PI/2);
}

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[limzykenneth]

I believe counter clockwise is the correct behaviour and the reference probably left it out by mistake.

[outofambit]

thanks for clarifying @limzykenneth!

[joecridge]

The intended behaviour is clockwise (same as Processing), so the documentation is correct. The snippet above should draw the left half of a circle (since zero degrees is the line starting from the centre of the circle and heading off to the right [in the positive x-direction]).

I’ve tried this in the web editor and it appears to work correctly. @BerfinA can you confirm what you are seeing and which version of p5 you are using?

[limzykenneth]

@joecridge Yup, you're right. If the documentation and the behaviour are consistent then there's no problem from me. Counter clockwise is just what I'm used to in some other programs.

@BerfinA I've had a closer look at the example code you provided, the problem with the angles you've given is that visually it is going to look exactly the same whether you are drawing clockwise or counter clockwise with angles of PI/2 and 3*PI/2.

If you instead try arc(100,100,100,100,0,PI/2);, you should see the bottom right quadrant of a circle drawn. If that is not what you see let us know here.

[BerfinA]

I am a bit confused. I understand maybe the numbers I am using might be the problem so I tried the below example;

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

function draw() {
background(220);
arc(100,100,100,100,PI/2,5/3*PI);
}

Which I would expect to go from pi/2 top center of the circle to 5/3 pi which is on the lower right side of the circle but maybe I am looking at the radian numbers wrong?
My understanding is pi/2 references the top of the circle and clockwise it goes to 2pi, 3/2pi and pi and back to pi/2. Is this the case?

[limzykenneth]

@BerfinA The 0 degrees point of the circle starts from the 3 o'clock position and as long as you are defining positive angles, it will go clockwise, so pi/2 would be 90 degress clockwise from the 3 o'clock position and that's the 6 o'clock position, or the bottom center.

Then your next angle will also start from the 3 o'clock position, go clockwise 5/3 pi or 300 degrees to end at the 1 o'clock position. And so it draws clockwise from the 6 o'clock position to the 1 o'clock position.

[joecridge]

In case it’s helpful, here‘s my attempt at illustrating @limzykenneth’s explanation 😆:

[outofambit]

hey @limzykenneth and @joecridge thanks for this help! i had looked at this with @BerfinA last week and was also confused.

since it seems like the reference and code are correct, but the concept itself is confusing, i wonder how we could make this more apparent in the arc reference. perhaps there could be a section about this in https://p5js.org/learn/curves.html and the arc reference could link to it? or it could go directly in the arc method documentation?

[BerfinA]

thank you @limzykenneth and @joecridge ! yeah the images of degrees and radians online are basically upside down and thats why I got confused.Yeah, @outofambit that would be helpful.

[limzykenneth]

@BerfinA That image you attached is showing a counter clockwise angle which is used in many places (hence why I'm more used to thinking counter clockwise as the default behaviour), but clockwise or counter clockwise isn't really a right or wrong thing here in the same way that in 3D which direction the z-axis goes also splits into left hand rule and right hand rule variants. It is understandable that it is confusing but hopefully it gets more intuitive the more you deal with these kind of problems! 😉

@outofambit Would incorporating a drawing like the one from @joecridge in the reference be helpful to clear up this confusion? Maybe remove the English words so that it is a bit more i18n friendly.

[Spongman]

The diagram is semantically correct, however you have to remember that in most 2d computer graphics environments (including p5.js), the y-axis increases in the _downward_ direction (like a CRT beam scan). This results in a clockwise rotation for increasing angles.

[maxthomax]

The intended behaviour is clockwise (same as Processing), so the documentation is correct. The snippet above should draw the left half of a circle (since zero degrees is the line starting from the centre of the circle and heading off to the right [in the positive x-direction]).

As of the time of this comment the reference page (https://p5js.org/reference/#/p5/arc) states elsewhere:
Be aware that the the y-axis increases in the downward direction therefore the values of PI is counter clockwise.

Problems and nitpicks:

• In p5.js practice angles "increase" clockwise, not counter clockwise.
• PI is a constant, its value does not increase.
• There's a mismatch between "values" and "is".

One way to correct it would be:
... therefore angles are measured clockwise from the positive x-direction ("3 o'clock").

The above notwithstanding, I'm grateful to the project for the documentation, the library and the web editor!

[joecridge]

Yes I agree, would you like to submit that as a PR? 🙂

[lmccart]

fixed with #4015 although a diagram elaborating could be nice. I think last we checked we didn't have a great way to link in images into the reference and that's what stalled this. to be investigated..