# P5.js TWO_PI not working?

I am trying to make a clock in `p5.js` after watching the Coding Train video on the topic. However, when I try to create an arc, the angle `TWO_PI` produces no output, where I expect a full circle. Every other angle I have tried has produced the expected fraction of a full circle, but the two angles corresponding to the full circle don’t seem to be working.

My code that I used to attempt to replicate this is as follows:

``````function setup()
{
createCanvas(400, 400);
//   angleMode(DEGREES);
}

function draw()
{
//   background(220);
//   let angle = 270;
//   let m = map(angle, 0, 360, mouseX, mouseY, true);

arc(width/2, height/2, 200, 200, 0, TWO_PI);
strokeWeight(4);
stroke(255);
noLoop();

//   arc(width/2, height/2, 200, 200, 0, TWO_PI);
}
``````

This problem also occurs when the angle mode is DEGREES and the ending angle is 360.
Removing the `angleMode()` command seems to solve this problem, but then how does `p5` know what angle mode you’re in?

Any help with this issue is appreciated.

1 Like

https://p5js.org/reference/#/p5/arc

Note that drawing a full circle (ex: 0 to TWO_PI) will appear blank because 0 and TWO_PI are the same position on the unit circle. The best way to handle this is by using the ellipse() function instead to create a closed ellipse, and to use the arc() function only to draw parts of an ellipse.

but i recommend

``````  arc(width/2, height/2, 200, 200, 0, TWO_PI-0.001);
``````
4 Likes

One approach is to limit your range, as @kll suggested:

``````let angle = map(mouseX, 0, width, 0, TWO_PI-.0001, true);
arc(width/2, height/2, 200, 200, 0, angle);
``````

Another is to special-case the TWO_PI value, drawing it with an ellipse instead. Here is an example of that:

``````function setup()
{
createCanvas(400, 400);
}
function draw()
{
background(220);
let angle = map(mouseX, 0, width, 0, TWO_PI, true);
if (angle==TWO_PI) {
stroke(255, 0, 0);
ellipse(width/2, height/2, 200, 200);
} else {
stroke(0);
arc(width/2, height/2, 200, 200, 0, angle);
}
}
``````

I believe your issue is that you are telling the arc function to start at 0 and then stop at TWO_PI… Why nothing happens is that the arc function starts and then immediately ends because the start and stop are at the same location… i.e. you’re telling it to start a 0 and then end at 0.

notice if you change 0 to something near zero such as 0.00000001 it will “work” but its technically not a closed circle

1 Like