# Simple code for alternate stroke, does not work

**URL:** <https://discourse.processing.org/t/simple-code-for-alternate-stroke-does-not-work/13054>\
**Category:** Beginners\
**Created:** [July 29, 2019, 9:49pm UTC](https://discourse.processing.org/t/simple-code-for-alternate-stroke-does-not-work/13054 "2019-07-29T21:49:23Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Francisco](https://avatars.discourse-cdn.com/v4/letter/f/eb9ed0/32.png) [@Francisco](https://discourse.processing.org/u/Francisco)\
**Post date:** [July 29, 2019, 9:49pm UTC](https://discourse.processing.org/t/simple-code-for-alternate-stroke-does-not-work/13054/1 "2019-07-29T21:49:23Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 29, 2019, 9:54pm UTC](https://discourse.processing.org/t/simple-code-for-alternate-stroke-does-not-work/13054/2 "2019-07-29T21:54:15Z")

</div>

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;

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 29, 2019, 11:38pm UTC](https://discourse.processing.org/t/simple-code-for-alternate-stroke-does-not-work/13054/3 "2019-07-29T23:38:45Z")

</div>

Hello,

Processing is behaving exactly as expected with your code.

Learn to use the references:  
[https://processing.org/](https://processing.org/) (lots of stuff here including reference)  
[https://processing.org/reference/delay\_.html](https://processing.org/reference/delay_.html)  
[https://processing.org/reference/frameCount.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](https://processing.org/reference/modulo.html)

Execute this code and watch output on console:

```auto
void setup()
  {
  }    

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

```

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

🙂

---

<div class="post-metadata">

**Author:** ![Francisco](https://avatars.discourse-cdn.com/v4/letter/f/eb9ed0/32.png) [@Francisco](https://discourse.processing.org/u/Francisco)\
**Post date:** [July 31, 2019, 10:34pm UTC](https://discourse.processing.org/t/simple-code-for-alternate-stroke-does-not-work/13054/4 "2019-07-31T22:34:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 31, 2019, 10:39pm UTC](https://discourse.processing.org/t/simple-code-for-alternate-stroke-does-not-work/13054/5 "2019-07-31T22:39:54Z")

</div>

The first one is not visible

---

<div class="post-metadata">

**Author:** ![Francisco](https://avatars.discourse-cdn.com/v4/letter/f/eb9ed0/32.png) [@Francisco](https://discourse.processing.org/u/Francisco)\
**Post date:** [August 1, 2019, 4:15pm UTC](https://discourse.processing.org/t/simple-code-for-alternate-stroke-does-not-work/13054/6 "2019-08-01T16:15:21Z")

</div>

Thanks a lot. I have improve the code:

```auto
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?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 1, 2019, 4:32pm UTC](https://discourse.processing.org/t/simple-code-for-alternate-stroke-does-not-work/13054/7 "2019-08-01T16:32:01Z")

</div>

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  
}

🙂

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 1, 2019, 7:40pm UTC](https://discourse.processing.org/t/simple-code-for-alternate-stroke-does-not-work/13054/8 "2019-08-01T19:40:09Z")

</div>

Your solution is great! Congratulations!

> [@Francisco](#):
>
> But, if you try the original code, Why the first cycle is completed showing all the changes?

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:

```auto
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 )

```auto

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

---

<div class="post-metadata">

**Author:** ![Francisco](https://avatars.discourse-cdn.com/v4/letter/f/eb9ed0/32.png) [@Francisco](https://discourse.processing.org/u/Francisco)\
**Post date:** [August 2, 2019, 8:28pm UTC](https://discourse.processing.org/t/simple-code-for-alternate-stroke-does-not-work/13054/9 "2019-08-02T20:28:40Z")

</div>

[Video](https://drive.google.com/file/d/12jG2qvtczp6ocNRPhGtaoxKehN4tXnqX/view?usp=sharing)

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.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 2, 2019, 10:36pm UTC](https://discourse.processing.org/t/simple-code-for-alternate-stroke-does-not-work/13054/10 "2019-08-02T22:36:15Z")

</div>

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