blendMode problems

p5.js
1

Hi! First post here! My name is Azur and I’m a P5js beginner, love the library and the Kadenze course!

I write this post because I’m having a problem with the blendMode function, hope somebody can help me.

Here’s an screenshot:

screenshot
screenshot.png1683×1136 73.4 KB

As you can see here it’s like the blendMode overwrites the background function and disable the refreshing of the canvas.

Does anyone knows how to solve this?

Thanks!

2 Likes
2

Use this code:

var angle = 1;
function setup() {
createCanvas(800,800);
}

function draw() {
  createCanvas(800,800);
  background(255);
  translate(300,300);
  rotate(radians(angle));
  noStroke();
  scale(2);
  blendMode(MULTIPLY);
  fill(255,0,0);
  ellipse(30,30,60,60);
  fill(0,255,0);
  ellipse(60,60,60,60);
  fill(0,0,255);
  ellipse(60,30,60,60);
  angle++;
}
1 Like
3

@madscientist Thanks! That’s a nice solution.

I thought about using clear(); but I think creating the canvas within draw() is better. Specially if you’re using windowWidth and windowHeight,

4

Does creating the canvas at each frame is not bad for performance ?

You can also reset the blendMode at the end of the draw by using blendMode(NORMAL) such as :

  background(255);
  translate(300,300);
  rotate(radians(angle));
  noStroke();
  scale(2);
  blendMode(MULTIPLY);
  fill(255,0,0);
  ellipse(30,30,60,60);
  fill(0,255,0);
  ellipse(60,60,60,60);
  fill(0,0,255);
  ellipse(60,30,60,60);
  angle++;
  
  blendMode(NORMAL);
1 Like
5

Great! thanks, I wanted to avoid creating canvas each frame, nice solution!