I have the following code for a p5js project where I draw 10 eccentric squares and set the blend mode to DIFFERENCE. But the screen starts aggressively flashing and flickering.
let size = 50;
let c = ["red", "green", "blue"];
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
translate(width / 2, height / 2);
push();
blendMode(DIFFERENCE);
for (let i = 10; i > 0; i--) {
fill(c[i % 3]);
rect(0 - (i * size) / 2, 0 - (i * size) / 2, size * i, size * i);
}
pop();
}
I tried adding push()
and pop()
but it doesn’t seem to make a difference.
Why is it happening and how do i stop it? Also, is push()
and pop()
doing anything in this example?