Closed jacopomazzoni closed 4 months ago
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.
Most appropriate sub-area of p5.js?
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:
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 / // }