# Flickering in Exclusion

**URL:** <https://discourse.processing.org/t/flickering-in-exclusion/16760>\
**Category:** Coding Questions\
**Created:** [December 31, 2019, 2:51pm UTC](https://discourse.processing.org/t/flickering-in-exclusion/16760 "2019-12-31T14:51:18Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![musiciantriescoding](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/musiciantriescoding/32/7662_2.png) [@musiciantriescoding](https://discourse.processing.org/u/musiciantriescoding)\
**Post date:** [December 31, 2019, 2:51pm UTC](https://discourse.processing.org/t/flickering-in-exclusion/16760/1 "2019-12-31T14:51:18Z")

</div>

Hi everyone! I’m trying to play with the blend modes in P5, specifically to play around with black and white. When I use the code below, I expected a black line across a white canvas. However, I got the line and the canvas flickering between black and white alternately, so that whenever the canvas is black, the line is white and so on.

```auto
function draw() {
  background(255);
  blendMode(DIFFERENCE);
  stroke(255);
  line(0,height/2,width,height/2);
}

```

Using the same code in Processing, there wasn’t this flickering problem. Is this possibly a problem with my browser? I’m on Chrome 79. Thanks!

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 31, 2019, 2:52pm UTC](https://discourse.processing.org/t/flickering-in-exclusion/16760/2 "2019-12-31T14:52:54Z")

</div>

I had the exact same issue yesterday. Before giving you the answer however, I’d like you to try something: set the frameRate to 1. Does the flickering slow down?

---

<div class="post-metadata">

**Author:** ![musiciantriescoding](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/musiciantriescoding/32/7662_2.png) [@musiciantriescoding](https://discourse.processing.org/u/musiciantriescoding)\
**Post date:** [December 31, 2019, 2:55pm UTC](https://discourse.processing.org/t/flickering-in-exclusion/16760/3 "2019-12-31T14:55:51Z")

</div>

Hey Tiemen! I just tried it. It does slow down, switching black and white every second.

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 31, 2019, 2:58pm UTC](https://discourse.processing.org/t/flickering-in-exclusion/16760/4 "2019-12-31T14:58:42Z")

</div>

For some reason P5 doesn’t reset blend modes like Processing Java does. So what happens at each loop is that it applies that same blend mode on the previous blended frame, which causes the flickering.

It can simply be solved by using push and pop within your draw loop.

---

<div class="post-metadata">

**Author:** ![musiciantriescoding](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/musiciantriescoding/32/7662_2.png) [@musiciantriescoding](https://discourse.processing.org/u/musiciantriescoding)\
**Post date:** [December 31, 2019, 3:01pm UTC](https://discourse.processing.org/t/flickering-in-exclusion/16760/5 "2019-12-31T15:01:34Z")

</div>

Thanks Tiemen. Your solution works. Very strange of P5 😂

---

<div class="post-metadata">

**Author:** ![musiciantriescoding](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/musiciantriescoding/32/7662_2.png) [@musiciantriescoding](https://discourse.processing.org/u/musiciantriescoding)\
**Post date:** [December 31, 2019, 3:11pm UTC](https://discourse.processing.org/t/flickering-in-exclusion/16760/6 "2019-12-31T15:11:12Z")

</div>

This was the sketch I was trying to do 😁  
[https://www.openprocessing.org/sketch/817145](https://www.openprocessing.org/sketch/817145)

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 31, 2019, 3:17pm UTC](https://discourse.processing.org/t/flickering-in-exclusion/16760/7 "2019-12-31T15:17:25Z")

</div>

Haha yeah, was a bit surprised myself as well when I came across it. Not sure why it is, might be a good reason for it.

> [@musiciantriescoding](#):
>
> [Blend Mode Circles - OpenProcessing](https://www.openprocessing.org/sketch/817145)

Woops, it shows an error in Firefox (trying to reload it but it’s not showing the same error, just a blank page). Works in Chrome though, although a bit clunky. Keep in mind that P5 fullscreen might be too intense for bigger screens.

**edit**  
was able to reload it and get a screenshot of the error

 ![Screenshot (66)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/81753734028b363e2a84c6e73ca03e229cbfb45b.png)

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [December 31, 2019, 3:20pm UTC](https://discourse.processing.org/t/flickering-in-exclusion/16760/8 "2019-12-31T15:20:34Z")

</div>

If you want to work with bigger P5 sketches, this might be an interesting article for you: [https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance](https://github.com/processing/p5.js/wiki/Optimizing-p5.js-Code-for-Performance)

---

<div class="post-metadata">

**Author:** ![musiciantriescoding](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/musiciantriescoding/32/7662_2.png) [@musiciantriescoding](https://discourse.processing.org/u/musiciantriescoding)\
**Post date:** [December 31, 2019, 10:01pm UTC](https://discourse.processing.org/t/flickering-in-exclusion/16760/9 "2019-12-31T22:01:33Z")

</div>

Thanks again! I’ll look into it 😁