Ying and Yang P5.js - p5.js

Question

I'm currently trying to make a Ying and Yang symbol spin using a circular path. SO far I have made the medium and smaller ones rotate just fine. However, the stationary arc's are wrecking the illusion. Here is an open link to see my current code.
https://editor.p5js.org/Nathan65bmx/sketches/PAu3xx6Bd
Just looking for someone to help me make it look like it is rotating properly.

Answer 1

Draw all shapes from a common central point, then use the rotate() function. https://p5js.org/reference/#/p5/rotate Here's the link.
Do ask if you need help modifying the code.
[EDIT]
Here's the working version
function setup() {
createCanvas(600, 600);
angleMode(DEGREES);
a = 0;
x = 180;
}
let ANGLE = 0
let a;
let x;
function draw() {
background(180, 13, 123);
//Big Circle
noStroke();
//Change starts from here
push();
translate(300, 300);
rotate(a);
fill("black");
arc(0, 0, 300, 300, 0, x);
fill("white")
arc(0, 0, 300, 300, x,0);
pop();
a+=2;
//Till here
// Medium Circles
fill("black");
let CENTRE_X4 = width / 2;
let CENTRE_Y4 = height / 2;
let RADIUS4 = 75;
let X4 = RADIUS4 * cos(ANGLE);
let Y4 = RADIUS4 * sin(ANGLE);
ellipse(CENTRE_X4 + X4, CENTRE_Y4 + Y4, 150);
fill("white");
let CENTRE_X3 = width / 2;
let CENTRE_Y3 = height / 2;
let RADIUS3 = 75;
let X3 = RADIUS3 * cos(ANGLE);
let Y3 = RADIUS3 * sin(ANGLE);
ellipse(CENTRE_X3 - X3, CENTRE_Y3 - Y3, 150);
// Small Circles
fill("white");
let CENTRE_X = width / 2;
let CENTRE_Y = height / 2;
let RADIUS = 75;
let X = RADIUS * cos(ANGLE);
let Y = RADIUS * sin(ANGLE);
ellipse(CENTRE_X + X, CENTRE_Y + Y, 50);
fill("black");
let CENTRE_X2 = width / 2;
let CENTRE_Y2 = height / 2;
let RADIUS2 = 75;
let X2 = RADIUS2 * cos(ANGLE);
let Y2 = RADIUS2 * sin(ANGLE);
ellipse(CENTRE_X2 - X2, CENTRE_Y2 - Y2, 50);
ANGLE = ANGLE + 2;
}
All the edits have been done using the push() & pop() and rotate() functions.
Hope this has helped!

Answer 2

My answer is not adding anything new to Ruskin's great answer suggesting rotate() as well as push()/pop(), but wanted to mention that you could isolate the drawing instructions into a re-usable function and additionally simply reduce some of complexity and repetition (see D.R.Y):
function setup() {
createCanvas(600, 600);
angleMode(DEGREES);
}
function draw() {
background (200, 13, 123);
// isolate coordinate system
push();
// move everything to the center
translate(width / 2, height / 2);
// rotate everything from the center
rotate(frameCount % 360);
// draw ying Yang
drawYingYang(300);
// return to the original coordinate system (0,0 = top left)
pop();
}
function drawYingYang(outerDiameter){
let innerYOffset = outerDiameter / 4;
let outerRadius = outerDiameter / 2;
let innerDiameter = innerYOffset / 1.5;
// Big Circle
noStroke();
fill("black");
arc(0, 0, outerDiameter, outerDiameter, -90, -270);
fill("white")
arc(0, 0, outerDiameter, outerDiameter, 90, 270);
// Medium Circles
fill("black");
ellipse(0, innerYOffset, outerRadius);
fill("white");
ellipse(0, - innerYOffset, outerRadius);
// Small Circles
fill("white");
ellipse(0, innerYOffset, innerDiameter);
fill("black");
ellipse(0, - innerYOffset, innerDiameter);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
If that's the only thing you want to draw, removing push()/pop() won't make a difference visually, however, if you want to draw other shapes it will much easier to have independent control over where each shape is drawn