background with alpha unexpected behavior

[jacopomazzoni]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.9.3

Web browser and version

Brave ( chrome ) 1.66.110 Chromium: 125.0.6422.60 (Official Build) (64-bit)

Operating system

Windows/MacOSX

Steps to reproduce this

Actual Behavior

for alpha values < 25 in background some shapes are never fully overwritten

ie: background(0,5) has the issue
background(0,25) does not

Expected Behavior

any shape after a certain amount of frames depending on its color should be wiped away by enough overlays no matter how small the transparency

Steps to reproduce

Steps:

1. run this MRE and look at the circle never disappearing
2. change values and observe that ~25 depending on browser and os is the threshold value for shapes finally disappearing
3. fix implementation?

Snippet:

// https://editor.p5js.org/jacopom/sketches/RU0kHMjnG
function setup() {
  createCanvas(400, 400);
    background(0);

}

function draw() {
  
  background(0,5);
  fill(255);
  stroke(255);
  if(frameCount == 1 ) {
    ellipse(width/2,height/2,100);
  }
  fill(0);
  rect(0,0,100,30);
  fill(255);
  text("Frame: " + frameCount,20,20);
  
  /*********************************************************/
  /* 5 out of 255 alpha                                    */
  /* expected behaviour 255/5 = 51                         */
  /* in 51 cycles a white value of                         */
  /* 255 should be reduced to 0                            */
  /* let's test it!                                        */ 
  /* in reality for any value <~25 this does not happen    */
  /* and a faint white dot remains visible forever         */
  /*********************************************************/
}

[davepagurek]

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.