How to fix rendering issue when rotating an arc in processing?

Question

I am trying to make a yin yang that rotates around its center, and I have figured out all the code for it. Except when I start rotating the yin yang, one of the white arcs that I have drawn has a very thin chord across its diameter. I have the mode set to OPEN, and the chord does not appear when the object is not rotating. I know it is a rendering error with the processing renderer, so does anyone know how to work around this issue?

here is the code:

float rot = 0;

void setup (){
  background(150);
  size(800,800);
}

void draw (){
rot = rot+0.01;
translate(400,400);
rotate(rot);
background(150);
  yinyang();
}

void yinyang (){
  fill(255);
  strokeWeight(2);
  ellipse(0,0,400,400);
  fill(0);
  arc(0,0,400,400,-HALF_PI,HALF_PI);
  ellipse(0,100,200,200);
  fill(255);
  arc(0,-100,200,200,-HALF_PI,HALF_PI,OPEN);
  ellipse(0,100,66,66);
  fill(0);
  ellipse(0,-100,66,66);
}

I am very aware that many of the objects are drawn in a very inefficient way. This was for a school project and I just wanted to get it done. The problem arc is the only one that has the class OPEN.

I tried to use other objects like circles and lines to just cover it up, but there were issues with the borders of said objects so I stopped trying to do that. It also feels like cheating and I want to know how to actually fix the issue instead of just covering it up.

Answer 1

There are a couple of solutions.

To use your code, omit the second arc. Draw a second white circle without a stroke:

float rot = 0;

void setup (){
  background(150);
  size(800,800);
}

void draw (){
rot = rot+0.01;
translate(400,400);
rotate(rot);
background(150);
  yinyang();
}

void yinyang (){
  fill(255);
  strokeWeight(2);
  ellipse(0,0,400,400);
  fill(0);
  arc(0,0,400,400,-HALF_PI,HALF_PI);
  ellipse(0,100,200,200);
  fill(255);
 
 // arc(0,-100,200,200,-HALF_PI,HALF_PI,OPEN);
  noStroke();
  ellipse(0, -100, 200, 200); // white Circle
  ellipse(0,100,66,66);
  fill(0);
  ellipse(0,-100,66,66);
}

Alternate solution (drawing order is important):

float rot = 0;

void setup () {
  size(800, 800);
}

void draw () {
  background(150);
  rot = rot+0.01;
  translate(400, 400);
  rotate(rot);
  yinyang();
}

void yinyang () {
  fill(255);
  circle(0, 0, 400); // large white circle

  fill(0);
  arc(0, 0, 400, 400, -HALF_PI, HALF_PI);
  circle(0, 100, 200); // black Circle
  fill(255);
  circle(0, 100, 66); // eye of black circle
  
  fill(255);
  noStroke();
  circle(0, -100, 200); // white Circle
  fill(0);
  circle(0, -100, 66); // eye of white circle
}