Processing3.5.4のarc()またはradians()にはバグがありますか？

Question

前提・実現したいこと

これはProcessing3.5.4（2020年5月1日現在の最新版）のバグなのでしょうか。
P5.jsとProcessingで挙動が異なっているような気がします。
これってProcessing側のバグでしょうか？
それとも私が間違えていますでしょうか。
どうぞよろしくお願いいたします。

発生している問題・エラーメッセージ

arc()の挙動が両者で異なる？

該当のソースコード

void setup() {
  size(400, 400);
  ellipseMode(RADIUS);
}

void draw() {
  translate(0, height/2);
  background(220);
  noStroke();
  strokeWeight(1);
  fill(255, 255, 0);
  arc(0, 0, 200, 100, radians(-30), radians(30)); //←問題の箇所
  fill(64);
  arc(0, 0, 140, 200, radians(-30), radians(30)); //←問題の箇所
}

//実行環境はhttps://editor.p5js.org
//Processing版とほぼ同じコードです。

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

function draw() {
  translate(0, height/2);
  background(220);
  noStroke();
  strokeWeight(1);
  fill(255, 255, 0);
  arc(0, 0, 200, 100, radians(-30), radians(30)); //←こっちはうまく動く
  fill(64);
  arc(0, 0, 140, 200, radians(-30), radians(30)); //←こっちはうまく動く
}

補足情報（FW/ツールのバージョンなど）

実行環境

PC版
Processing3.5.4

P5.js版
https://editor.p5js.org

Comments

[hoshi-takanori]

JavaScript の方は開始と終了の角度が実際の角度なのに対して、Java は媒介変数 t (離心近点角？) になっているようですね。Java と JavaScript (Canvas) の描画プリミティブの仕様の違いなのかも。
https://ja.wikipedia.org/wiki/%E6%A5%95%E5%86%86

[kumasan]

ご返信頂きありがとうございます。
離心近点角という概念は初めて知りました。
勉強になりました。
ありがとうございました。

[kumasan]

Java版Processingのarc()はやはり離心近点角で描画されているような気がします。ちゃんと検証していないので、未だに曖昧ですみません。

Answer 1

よく分からなかったので結局自作して解決しました。
経緯や詳細は先日張ったURLです。
角度の処理が合っているかちょっと微妙なのですが…（特にstartdegに負の角度が与えられた場合をまだ考慮できていないような…）
ご参考にでもなれば…
白線は45度を表示しています。
xcをインデントしまくっているのは、私が混乱しないようにするためです。このように書かないと括弧の対応関係が頭の中でごちゃごちゃになってしまうため。

void settings()
{
  size(200, 200);
}

void setup()
{
  background(0);
  stroke(255);
  line(0, height, width, 0);
  //translate(width/2, height/2);
  //translate(0, height/2);
  translate(0, height);
  noStroke();
  fill(255, 255, 0, 190); // yellow
  arc2(0, 0, 200, 100, -45, 0);  
}

void arc2(float x, float y, float w, float h, float startdeg, float stopdeg){
  println("arc2");
  float a = w/2;
  println("a:"+a);
  float b = h/2;
  println("b:"+b);
  float deg_step = 1;
  
  beginShape();
    vertex(x, y);
    float xp, yp;
    for(float i = startdeg; i <= stopdeg; i+=deg_step){
      println("i:"+i);
      xp = xc(a, b, i);
      yp = yc(xp, i);
      if(0 == i){
        xp = a;
        yp = 0;
      }else if( (0 < i) && (i < 90) ){  // 1st quadrant.
        xp = abs(xp);
        yp = abs(yp);
      }else if(90 == i){
        xp = 0;
        yp = b;
      }else if( (90 < i) && (i < 180) ){  // 2nd quadrant.
        xp = -abs(xp);
        yp = abs(yp);
      }else if(180 == i){
        xp = -a;
        yp = 0;
      }else if( (180 < i) && (i < 270) ){  // 3rd quadrant.
        xp = -abs(xp);
        yp = -abs(yp);
      }else if(270 == i){
        xp = 0;
        yp = -b;
      }else if( (270 < i) && (i < 360)){  //  4th quadrant.
        xp = abs(xp);
        yp = -abs(yp);
      }
      vertex(xp+x, yp+y);
    }
  endShape(CLOSE);
}

float xc(float a, float b, float theta_deg){
  float xc;
  xc = 1 / (
              sqrt(
                    sq(1/a) + sq(
                                  tan(
                                       radians(theta_deg)
                                     ) / b
                                )
                  )
           );
  println("xc:"+xc);
  return xc;
}
float yc(float xc, float theta_deg){
  float yc;
  yc = xc*tan(radians(theta_deg));
  println("yc:"+yc);
  return yc;
}

Answer 2

バグというからには、なにか仕様があってそれと異なっているということを言わないと。

開始/終了の「角度」の解釈がJavaとP5.jsで異なっている、という事実だけですよね。
あなたの都合のいいほうが正、ということでもないはずですし。

回避不可能な事態ではないのだから、とりあえず対応しておいて現象はコミュニティに報告しておく、というのがオープンソース的に適切な対応だと思います。

---

真面目に座標変換とかしないで直感でなんとかならないかと別の方法でやってみましたが、
fillの描画色を使わないとか、noStroke()前提とか、制限が一杯でてしまいました。

void setup(){
  size(400,400);
}
void arc2(float x, float y, float radx, float rady, float start, float end){
  PGraphics pg=createGraphics(width,height);
  PGraphics mask=createGraphics(width,height);
  float rad=radx>rady?radx:rady; //radxとradyの大きい方
  pg.beginDraw();
  pg.background(255,255,0);//これが描画色になる
  pg.endDraw();
  mask.beginDraw();
  mask.background(0);
  mask.noStroke();
  mask.fill(255);
  mask.ellipse(x,y,radx,rady);
  mask.fill(0);
  mask.arc(x,y,rad,rad,end,start+2*PI);//円のarcは期待の角度。開始/終了角の扱いかなりいい加減
  mask.endDraw();
  pg.mask(mask);
  image(pg, 0,0);
}

void draw(){
  background(204);
  arc2(width/2,height/2,150,100,radians(-30),radians(30));

  //参照用斜め線
  translate(width/2,height/2);
  rotate(radians(30));
  stroke(0);
  line(0,0,200,0);
  rotate(radians(-60));
  line(0,0,200,0);
}

Comments

[kumasan]

ご返信頂きありがとうございます。
バグという表現は言い過ぎだったかもしれません。
そうですね、仰るとおりです。
私は数学もあまり得意では無いため、角度を指定しているのに思ったとおりには動いていなかったので、短絡的に、「バグなのかな」と思ってしまいました。
アドバイス頂いたとおりに、コミュニティに報告してみたいと思います。
ありがとうございました。

[kumasan]

thkana様
お返事が遅くなりましてすみません。
正確な検証というのはできていないのですが、投稿していただいたプログラムは正確に動作しているように見えます。
凄いです。
標準のarc()へのパラメーターの与え方でこんなにかんたんに実装できるんですね。
どうもありがとうございました。

Answer 3

皆様のご参考になればと思い、現状を報告します。

双方のサイトで多くの方々にご教示頂きました。皆様のお力あっての理解です。改めまして、ありがとうございます。
詳細はこちらにあります。
https://discourse.processing.org/t/i-have-a-question-about-arc/20396

これらはまだ確証があるものではありませんが、どうやら、

• P5.jsは楕円を指定された角度で切り取っている。
• Processing(Java)は円を指定された角度で切り取ったものを、指定された縦幅と横幅の比率の楕円にしている。

…ということなのかもしれません。

詳しくは、Processing(Java)ではAWTのarcオブジェクトを使っているようなので、そちらのソースコードか仕様書を参照する必要があるみたいです。まだ調査できていません。