Function arc() doesn't render right in p5.js

Question

I am just making a little program with p5.js, but I found something weird. The arc() function doesn't seem to render correctly when the size is quite big.

Here is my code:

var ellipseSize = 200;
var strokeSize = 60;

for(var j=0; j<filteredTrees.length; j++){
  strokeWeight(strokeSize);
  var rad = 0;
  for(var i =0; i < filteredTrees[j].trees.length; i++){
    var element = filteredTrees[j].trees[i];
    var radBegin = rad;
    rad += (element.nbr/filteredTrees[j].rangeNbr)*(2*PI);
    stroke(element.color.red, element.color.green, element.color.blue);
    arc(width/2, height/2, ellipseSize, ellipseSize, radBegin, rad);
  }
  ellipseSize += (strokeSize*2);
  strokeSize *= 0.9;
}

And here is the rendered image, with black circles shwoing the correct alignment the arcs should have. Some arcs exceed their expected position, as you can see down there:

Do you have any idea why it does this ?

Answer 1

I am not sure what renderer are you using, the default 2D renderer uses beziers between the angles: https://github.com/processing/p5.js/blob/0.6.1/src/core/p5.Renderer2D.js#L430

So, there is no way to increase the arc resolution...

I would recommend you to use sin and cosine to draw the arcs:

function setup(){
  createCanvas(200, 100);
  customArc(20, 50, 20, 20, 0, PI, PI/2);
  customArc(60, 50, 20, 20, 0, PI, PI/4);
  customArc(100, 50, 20, 20, 0, PI, PI/10);
}

function customArc(x, y, w, h, start, stop, resolution){
  beginShape();
  for(var i = start; i < stop; i += resolution){
    vertex(x + sin(i) * w, y + cos(i) * h);
  }
  endShape();
}

<script src="https://github.com/processing/p5.js/releases/download/0.7.2/p5.min.js"></script>