Simple code for alternate stroke, does not work

Processing Beginners
1

Processing does not detect errors, but alternates the first time and then stays that way all the time.

void setup(){
  size(500,400);
  fill(50,230,50);
}

void draw(){
  background(200);
  stroke(0);
  rect(150,100,200,200);
  delay(500);

  background(200);
  stroke(200);
  rect(150,100,200,200);
  delay(500);
}
2

Remember that draw() updates the screen only once each cycle at its end

Therefore the changes throughout will not be visible

To achieve your goal use a boolean variable that indicates which rectangle to show

Change the variable like toggle: if( flag ) flag = false else flag =true;

3

Hello,

Processing is behaving exactly as expected with your code.

Learn to use the references:
https://processing.org/ (lots of stuff here including reference)
https://processing.org/reference/delay_.html
https://processing.org/reference/frameCount.html

The last post had some good suggestions.

Using the frameCount is a “simple” counter executing in the background or you could add your own counter and increment each draw cycle. There are more exact timers that you can use once you master this.

The modulo operator is a useful one:
https://processing.org/reference/modulo.html

Execute this code and watch output on console:

void setup()
  {
  }    

void draw()
  {
  println(frameCount, frameCount%100);
  }

Use suggestions from previous post along with a simple timer and make your vision a reality.

:slight_smile:

1 Like
4

Do you mean the second background(200) is not visible?

5

The first one is not visible

6

Thanks a lot. I have improve the code:

boolean conmutar = true;

void setup(){
  size(500,400);
  fill(50,230,50);
}

void draw(){
  background(200);
  if (conmutar){
    stroke(0);
  } else {
    stroke(200);
  }
  conmutar = !conmutar;
  rect(150, 100, 200, 200);
  delay(500);
}

I see now how Processing works. It calculates all the sentences inside draw() and, at the end of each cycle, it represents the result on screen. But, if you try the original code, Why the first cycle is completed showing all the changes?

7

See references I provided in previous post.

Consider what this does:
if (frameCount%60 == 0) // Or this can be your own counter incrementing each frame.
{
// Toggle
}

:slight_smile:

8

Your solution is great! Congratulations!

not sure what you mean.

You first see a gray screen (empty) because the screen gets updated at the END OF SETUP() too.

So you see the result of setup.

Example:

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

  background(200, 0, 0);
}

void draw() {
  //
}

In your initial sketch

In your initial sketch, after setup() is finished, the delay() let’s draw() wait before it updates the screen.

Hence, we see the gray blank screen of setup() before draw() kicks in.

draw() then shows the rectangle but without the black stroke.

Here

Here you see the effect that the first rectangle gets overwritten with the second rectangle (smaller rectangle )


void setup() {
  size(500, 400);
  fill(50, 230, 50);
}

void draw() {

  background(200);
  stroke(0);
  rect(150, 100, 200, 200);
  delay(500);

  // background(200);
  stroke(200);
  //noStroke(); 
  rect(150, 100, 
    195, 195);
  delay(500);
}

Chrisir

9

Video

As you can see, the first frame is not executed at the end of draw (), but line by line. This is what I do not understand.

Then, from de second frame, you see just the rectangle with grey stroke always, as expected.

Thanks.

10

I agree and can not explain it

In fact I saw this same behavior on my machine once but when I tried to repeat it, it didn’t show up again.

It’s weird