background with alpha unexpected behavior about p5.js HOT 1 CLOSED

Hi! Unfortunately this isn't an issue p5 is able to fix, as it is an issue with the data representation of all js canvases.

The first issue is that the color doesn't get reduced by 5/255 each frame. Instead, it's something closer to prevColor * 250/255 + 0 * 5/255. However, the colors are all stored as integers, so the new color is actually round(prevColor * 250/255). When the color gets dark enough, round(prevColor * 250/255) just equals prevColor and it stops changing.

So, some workarounds:

• Use additive/subtractive backgrounds instead of the default mix blend mode. This will ensure the background always makes progress, and is probably how you expected the math to work. If you're just fading to black, you can subtract 1 each frame to make sure the color values always decrease:

  push()
  blendMode(DIFFERENCE)
  background(1)
  pop()

  Or for white, use ADD instead of DIFFERENCE.

• Draw to something with higher precision color values. Unfortunately, js canvas does not give us any tools to change the precision of the main canvas. However, in WebGL, you can specify the precision for framebuffers, so you can do all your drawing to a createFramebuffer({ format: FLOAT }) to use high-precision floating point color. The annoying part about this is that you have to do all your drawing to the framebuffer and then draw the framebuffer to the main canvas at the end of each frame, because the content of the main canvas will still use integer colors.

from p5.js.