CODEWITHSUNDEEP
imagewhile-loopprocessingshapesstroke
emilie zawadzki
emilie zawadzki

Reputation: 2127

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

I'm trying to change the color of a circle stroke by varying a RGB channel from 255 to 0 value after having released a key. In the example, press key '1'. My issue is that the circle is printed only at the end of the while loop, and I can't see the color transition from 255 to 0. I only see the last state. Here is the code :

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

Thanks for you help.

Upvotes: 0

Views: 235

Answers (2)

Kevin Workman
Kevin Workman

Reputation: 42176

Your main problem is that nothing will be drawn to the screen until the end of the keyReleased() function. All of your draw calls are to an off-screen image, which is then drawn to the screen at the end of keyReleased(). This is called double-buffering, and it's how all of the functions in Processing work.

If you want to draw individual frames of the circle, then you have to do that by splitting them up into multiple calls to the draw() function. It might look something like this:

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

Upvotes: 1

v.k.
v.k.

Reputation: 2854

You will need to re think the way you structured this. draw() is already an infinite loop, and it only renders the image to be displayed at the end of each cycle. So the while will hold execution until RColor is 0, then draw() can render the image and show it to you. Get rid of the while loop and use a boolean as a flag to control stuff in draw, some thing like this:

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

related article:

https://forum.processing.org/two/discussion/8085/i-display-images-in-sequence-but-i-see-only-the-last-one-why

Upvotes: 0

Related Questions