Ying和Yang P5.js

我现在正试图用一个圆形的路径使阴阳符号旋转。到目前为止，我已经使中等和较小的旋转刚刚好。然而，静止的弧线破坏了这种错觉。这里有一个打开的链接来查看我的当前代码

---

只是想找人帮我让它看起来旋转正常。

从一个公共中心点绘制所有形状，然后使用rotate（）函数。这是链接。 一定要询问您是否需要修改代码的帮助

[编辑] 这是工作版本

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

所有编辑都是使用push（）&pop（）和rotate（）函数完成的。

---

希望这有帮助

我的答案不是在Ruskin的伟大答案中添加任何新内容，而是想指出，您可以将绘图说明分离为一个可重用的函数，另外还可以简单地减少一些复杂性和重复性（请参阅）：

函数设置（）{
createCanvas（600600）；
角度模式（度）；
}
函数绘图（）{
背景（200、13、123）；
//隔离坐标系
推（）；
//把所有东西移到中间去
平移（宽度/2，高度/2）；
//从中心旋转所有物体
旋转（帧数%360）；
//杨颖
杨英阳（300）；
//返回到原始坐标系（0,0=左上角）
pop（）；
}
功能图应阳（外径计）{
设innerYOffset=outerDiameter/4；
设外径=外径计/2；
让内径=内径偏移/1.5；
//大圈
仰泳（）；
填充（“黑色”）；
弧（0，0，外径计，外径计，-90，-270）；
填充（“白色”）
弧（0，0，外径计，外径计，90270）；
//中圈
填充（“黑色”）；
椭圆（0，内偏移，外偏移）；
填充（“白色”）；
椭圆（0，-内偏移，外偏移）；
//小圈子
填充（“白色”）；
椭圆（0，内偏移，内直径）；
填充（“黑色”）；
椭圆（0，-内偏移，内直径）；
}

---

将半圆粘贴到圆上，并使用圆旋转它们。这是一个可以使用的rotate（）函数。