5

p5.j​​s を使ってちょっとしたプログラムを作っているところですが、何か変なものを見つけました。サイズが非常に大きい場合、arc() 関数は正しくレンダリングされないようです。

これが私のコードです：

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;
}

そして、これがレンダリングされたイメージです。黒い円は、円弧が持つべき正しい位置合わせを示しています。下に見えるように、一部のアークは予想される位置を超えています。

例

なぜこれを行うのか分かりますか？

4

1 に答える 1

1

どのレンダラーを使用しているかわかりません。デフォルトの 2D レンダラーは角度の間にベジエを使用します: https://github.com/processing/p5.js/blob/0.6.1/src/core/p5.Renderer2D.js# L430

というわけで、アーク解像度を上げる方法はありません...

sin と cosine を使用して円弧を描くことをお勧めします。

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>

于 2019-01-04T19:38:30.970 に答える