处理 - while 循环中的图像仅在最后状态打印

Question

我正在尝试通过在松开按键后将 RGB 通道的值从 255 更改为 0 来更改圆形笔划的颜色。在示例中，按下键“1”。我的问题是圆仅在 while 循环结束时打印，我看不到从 255 到 0 的颜色过渡。我只看到最后一个状态。这是代码：

int RColor = 255;
int strokeWeight;
PGraphics pg;

void setup() {
  size(640, 640);
  smooth(10);
  strokeWeight = 2;
  pg = createGraphics(width, height);
  background(0);
}

void draw() {

}

void keyReleased() {
  if (key == '1') {
    while(RColor > 0) {
      drawCircle(RColor);
      RColor -= 1;
      println(RColor);
    }
  } 
}

void drawCircle(int RColor) {
    pg.beginDraw();
    pg.background(0);
    pg.noFill();
    pg.strokeWeight(strokeWeight);
    pg.stroke(RColor, 5, 224);
    pg.ellipse(56, 46, 55, 55);
    pg.endDraw();

    image(pg, 0, 0);
}

谢谢你的帮助。

Answer 1

您将需要重新考虑您构建它的方式。 draw()已经是无限循环了，每次循环结束只渲染要显示的图片。所以 while 将一直执行直到 RColor 为 0，然后 draw() 可以渲染图像并显示给您。摆脱 while 循环并使用布尔值作为标志来控制绘图中的内容，像这样：

int RColor = 255;
int strokeWeight;
PGraphics pg;
boolean change = false;

void setup() {
  size(640, 640);
  smooth(10);
  strokeWeight = 2;
  pg = createGraphics(width, height);
  background(0);
}

void draw() {
 if(change && RColor >0){
     RColor -= 1;
     }else if (RColor ==0 && change){
          println("done!");
          change = false;
         }

 drawCircle(RColor);
}

void keyReleased() {
  if (key == '1') {
      change = true;
  } 
}

void drawCircle(int RColor) {
    pg.beginDraw();
    pg.background(0);
    pg.noFill();
    pg.strokeWeight(strokeWeight);
    pg.stroke(RColor, 5, 224);
    pg.ellipse(56, 46, 55, 55);
    pg.endDraw();

    image(pg, 0, 0);
}

Answer 2

您的主要问题是，在 keyReleased() 函数的 end 之前，不会在屏幕上绘制任何内容。您所有的绘制调用都是针对 屏幕外图像 ，然后在 keyReleased() 的结束处绘制到屏幕上。这称为双缓冲，Processing 中的所有函数都是这样工作的。

如果您想绘制圆的各个框架，则必须将它们分成 多次调用 draw() 函数 来实现。它可能看起来像这样：

int RColor = 255;
int strokeWeight;
PGraphics pg;
boolean drawing = false;

void setup() {
  size(640, 640);
  smooth(10);
  strokeWeight = 2;
  pg = createGraphics(width, height);
  background(0);
}

void draw() {
  if (drawing && RColor > 0) {
    drawCircle(RColor);
    RColor -= 1;
    println(RColor);
  }
}

void keyReleased() {
  if (key == '1') {
    drawing = true;
  }
}

void drawCircle(int RColor) {
  pg.beginDraw();
  pg.background(0);
  pg.noFill();
  pg.strokeWeight(strokeWeight);
  pg.stroke(RColor, 5, 224);
  pg.ellipse(56, 46, 55, 55);
  pg.endDraw();

  image(pg, 0, 0);
}

处理 - while 循环中的图像仅在最后状态打印

Processing - image in while loop printed only at the last state

image

while-loop

processing

shape

stroke