Why does empty draw() function change canvas?

void setup(){
  size(400,400);
  background(0);
  paint(200,200,150,10);
}

void draw()
{
}

void paint(float x, float y, float r, float v){
  noFill();
  strokeWeight(v);
  stroke(250,180,0,10);
  ellipse(x,y,r,r); 
}

Produces:

test

This is not a completely black square! It’s like the yellow circle was drawn as desired, then covered with a mostly-but-not-entirely-opaque black overlay.

If I move the paint() call into draw(), then I get the expected result of a very obvious yellow circle. (PNG omitted because I’m getting “new users can only have one attachment” error.)

Why is an empty draw() changing the canvas?

ETA: p5js behaves the same way.

1 Like

Its not really dependent on the function not being called in draw. What’s happening is that you are setting the stroke to be transparent. The stroke function, when passed 4 arguments,the last parameter is called alpha, and lower values (in your case the number 10) are more transparent. To fix this just put 3 parameters (The RGB) in stroke.

The reason this problem is fixed when you put the paint function in draw is that draw is running hundreds of times, creating layers of semi-transparent circles which then becomes opaque.

3 Likes