Forever trails on background with low alpha

Hello, here is my sketch : p5.js Web Editor

Why do i get these dark grey trails ?
I’m drawing a new background with alpha set to 7 at each frame, so i guess at some point it should get full black. But it isn’t…

I have read this : Repeatedly painting 'transparent white' does not result in full white · Issue #4743 · processing/processing · GitHub
But I dont quite understand what is going on ? Some sort of rounding error that makes the black not going down to 0…
In my sketch I really want to draw 10K particules. 10K particules all run ok on my machine in Chrome, Firefox & Safari. The only issue is the persistent trails (it does the same thing on all browsers).

How do I fix this ? I tried using the trails method described here : 9.7: Drawing Object Trails - p5.js Tutorial - YouTube …but this takes much much more cpu for 10K particules. So I want to use this method of low alpha background drawing in draw(). The only issue is the persistant dark grey trails…

PLZ help me fix this :slight_smile:

Yes, it’s a rounding error in the math that blend uses because colors are stored as 8-bit numbers.

One possible “solution” is to initialize the background to the same dark gray color as the trails. It won’t be black, but at least the trails won’t be visible. During animation, keep drawing the background as black with alpha. The initial gray color shouldn’t be further changed. I guess it shouldn’t matter what color you initialize the background to as long as it’s brighter than the dark gray since the animation will quickly fade it to that color.

Another solution would be to write your own darkening shader and render a fullscreen rectangle that checks the pixel value and does its own thing with it. When the value is dark enough, just go to black. I haven’t played with p5.js shaders, so I don’t know exactly how to implement it.

Blockquote initialize the background to the same dark gray color as the trails

1- When you say “initialize the background” do you mean to put it in the setup() ?

2- How do I know, before starting the sketch, witch grey value it will be ?

3- Is the grey value always the same everytime I restart the sketch ?

Mathematically it should always work out to the same gray value.

Yes, initialize in setup(). Look at what happens if you set the background to white in setup() and then set it to fade to black with alpha value in draw(). Play with setting the alpha to a bunch of different small values. If the alpha is too small (which would give you very long trails), then it only fades to a fairly light gray. Larger alphas (giving shorter trails) will fade closer to black. Pick your balance between length of trails and how black you want the background to be.

For 10k particles, you’re not going to have room for very long trails, so you can probably use a high enough alpha value that will let you fade pretty close to black.

1 Like