旋转由个体arcs/sectors组成的整个圆

Question

好的，所以我一直在尝试为 APCS class 编写游戏，并且我一直在使用 Processing.org/PApplet 处理图形。我的主要图像是由具有不同颜色的单个弧组成的椭圆。但是，我想旋转整个圆圈（里面有圆弧）。这是我为此编写的代码：

public void setup() { 
         size(WIDTH, HEIGHT); background(22, 105, 250); 
} 

public void draw() { 
         drawLevel(level,18); 
}

private void drawLevel(int level, int numSectors) 

{   

        translate(50, -50);
        rotate((float)PI*level/numSectors);
        fill(255,0,0);
        arc(500, 375, 500, 500, 0, (TWO_PI)/18);


        rotate((float)PI*level/numSectors);
        translate(50, -50);
        fill(255,127,0);
        arc(500, 375, 500, 500, (TWO_PI)/18, (TWO_PI*2)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(255,255,0);
        arc(500, 375, 500, 500, (TWO_PI*2)/18, (TWO_PI*3)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(0,255,0);
        arc(500, 375, 500, 500, (TWO_PI*3)/18, (TWO_PI*4)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(0,0,255);
        arc(500, 375, 500, 500, (TWO_PI*4)/18, (TWO_PI*5)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(75,0,130);
        arc(500, 375, 500, 500, (TWO_PI*5)/18, (TWO_PI*6)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(139,0,255);
        arc(500, 375, 500, 500, (TWO_PI*6)/18, (TWO_PI*7)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(255,0,0);
        arc(500, 375, 500, 500, (TWO_PI*7)/18, (TWO_PI*8)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(255,127,0);
        arc(500, 375, 500, 500, (TWO_PI*8)/18, (TWO_PI*9)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(255,255,0);
        arc(500, 375, 500, 500, (TWO_PI*9)/18, (TWO_PI*10)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(0,255,0);
        arc(500, 375, 500, 500, (TWO_PI*10)/18, (TWO_PI*11)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(0,0,255);
        arc(500, 375, 500, 500, (TWO_PI*11)/18, (TWO_PI*12)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(75,0,130);
        arc(500, 375, 500, 500, (TWO_PI*12)/18, (TWO_PI*13)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(139,0,255);
        arc(500, 375, 500, 500, (TWO_PI*13)/18, (TWO_PI*14)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(255,0,0);
        arc(500, 375, 500, 500, (TWO_PI*14)/18, (TWO_PI*15)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(255,127,0);
        arc(500, 375, 500, 500, (TWO_PI*15)/18, (TWO_PI*16)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(255,255,0);
        arc(500, 375, 500, 500, (TWO_PI*16)/18, (TWO_PI*17)/18);

        //rotate((float)PI*level/numSectors);
        //translate(50, -50);
        fill(0,255,0);
        arc(500, 375, 500, 500, (TWO_PI*17)/18, (TWO_PI*18)/18);

}

我有翻译和旋转作为评论，但我不确定如何旋转整个东西。当我运行 translate() 和 rotate() 方法时，它只运行一次（应该发生），但是当我尝试将它用于第二个弧时，它重叠第一个弧线，它非常奇怪地以自己为中心。有人可以帮助解决 "animating" 所需的循环并循环它以及如何更改 rotate() 和 translate() 方法吗？请谢谢！

Answer 1

让我们从一个更简单的例子开始：

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

void draw() {
  background(0);
  drawCircle();
}

void drawCircle() {
  fill(255, 0, 0);
  arc(width/2, height/2, 500, 500, radians(0), radians(180));

  fill(0, 0, 255);
  arc(width/2, height/2, 500, 500, radians(180), radians(360));
}

既然已经有了，我们可以谈谈旋转圆圈了。有两种主要方法可以做到这一点。

选项 1： 依靠 translate() 和 rotate() 函数为您进行旋转。

请注意，如果这样做，您要么需要平移、旋转、然后取消平移，要么需要在原点绘制所有内容。

这里使用的是平移、旋转、非平移方法：

void drawCircle() {

  translate(width/2, height/2);
  rotate(TWO_PI*mouseX/width);
  translate(-width/2, -height/2);

  fill(255, 0, 0);
  arc(width/2, height/2, 500, 500, radians(0), radians(180));

  fill(0, 0, 255);
  arc(width/2, height/2, 500, 500, radians(180), radians(360));
}

请注意，在这种情况下，我要平移到圆心，然后进行旋转，然后在绘制圆之前平移回左上角。 您的代码没有这样做，我认为这是您的主要问题之一。

这里使用的是原始方法：

void drawCircle() {

  translate(width/2, height/2);
  rotate(TWO_PI*mouseX/width);

  fill(255, 0, 0);
  arc(0, 0, 500, 500, radians(0), radians(180));

  fill(0, 0, 255);
  arc(0, 0, 500, 500, radians(180), radians(360));
}

请注意，在本例中，我在原点绘制弧线。但是因为我不是未翻译，所以原点在屏幕中央。

您的代码似乎是这些方法的混合体，这就是它不起作用的原因。另请注意，如果您想旋转圆，您只需要调用一次 rotate()。 旋转每个圆弧没有意义，因为您已经计算它们的旋转（你的数学涉及 TWO_PI）。

选项 2： 除了使用 translate() 和 rotate()，您可以自己跟踪旋转。这特别容易，因为您已经将角度传递给 arc() 函数。

方法如下：

void drawCircle() {

  float startAngle = 360 * mouseX / width;

  fill(255, 0, 0);
  arc(width/2, height/2, 500, 500, radians(startAngle), radians(startAngle+180));

  fill(0, 0, 255);
  arc(width/2, height/2, 500, 500, radians(startAngle+180), radians(startAngle+360));
}

请注意，我不再需要为 rotate() 或 translate() 操心，因为我正在自己计算旋转。

您采用哪种方法取决于最适合您的想法。但是您当前的代码似乎是几种方法的奇怪组合，这就是它不起作用的原因。

旋转由个体arcs/sectors组成的整个圆

Rotating an entire circle composed of individual arcs/sectors

eclipse

processing