Flickering in Exclusion

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.

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!

1 Like

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?

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

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.

2 Likes

Thanks Tiemen. Your solution works. Very strange of P5 :joy:

This was the sketch I was trying to do :grin:
https://www.openprocessing.org/sketch/817145

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.

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

1 Like

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

2 Likes

Thanks again! I’ll look into it :grin: