You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
run this MRE and look at the circle never disappearing
change values and observe that ~25 depending on browser and os is the threshold value for shapes finally disappearing
fix implementation?
Snippet:
// https://editor.p5js.org/jacopom/sketches/RU0kHMjnGfunctionsetup(){createCanvas(400,400);background(0);}functiondraw(){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 *//*********************************************************/}
The text was updated successfully, but these errors were encountered:
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:
The text was updated successfully, but these errors were encountered: