Question

好的，所以我一直在尝试为APCS课程编写游戏，我一直在使用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()方法时，它只运行一次（应该会发生），但是当我尝试将它用于第二个弧时，它会重叠第一个弧并且它自身居中古怪。有人可以帮助“动画化”它并循环它以及如何更改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()大惊小怪，因为我自己正在计算轮换次数。

你采取哪种方法取决于最适合你的头脑。但是你现在的代码似乎是几种方法的奇怪组合，这就是它无法正常工作的原因。

旋转由单个弧/扇区组成的整个圆

1 个答案: