P5.js TWO_PI not working?

p5.js Beginners
1

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);
  angleMode(RADIANS);
}

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
2

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
3

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);
  angleMode(RADIANS);
}
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);
  }
}
4

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