What's a good way of "fading out" the screen?

What’s a good way of “fading out” the screen while moving a shape around so that it looks like the shape is leaving fading trails?

Currently, I am using the method of ofSetBackgroundAuto(false) and drawing a black square with alpha; however, this doesn’t fully fade the screen out, it leaves grey trails. There are a couple of posts about this in this forum with no apparent solution.

Does anyone know a better way of doing that?

take a look at the fboTrailsExample in the gl folder

This comment https://www.funprogramming.org/22-Stars-blinking-at-night-fade-out-effect.html#isso-1912 explains why it happens.

I think the fboTrailsExample solves this elegantly by using floats instead of ints for the colors. If you don’t want to use fbos there are a few other options:

One is to use ofEnableBlendMode(OF_BLENDMODE_SUBTRACT) and a color like 1,1,1 without alpha. This will subtract 1 to the R G and B channels eventually making it pure black.

Another is to use a shader like in this Processing example. This allows you to fade not only to black but to any color, and you can even fade R G and B at different speeds.

3 Likes

Thank you! using blendmode worked for me. Like this:

ofSetBackgroundAuto(false);
    
void ofApp::draw(){
            ofEnableBlendMode(OF_BLENDMODE_SUBTRACT);
            ofSetColor(1);
            ofSetRectMode(OF_RECTMODE_CORNER);
            ofFill();
            ofDrawRectangle(0, 0, screenWidth, screenHeight);
            ofDisableBlendMode();
        }

I also set an ofxGui slider to control the amount to fade (by replacing the 1 in ofSetColor with the slider amount). Thanks!

Unfortunately, I am not yet advanced enough to work with FBOs or shaders. Eventually!