Fading the screen to black/any color

From Processing

Clearing the previous frame seems over the top and barbaric? Has background() got you down? Do you feel yourself clinging onto the past? Then these quick background hacks are for you.

If you want your sketches to fade to black, or another colour, instead of being totally cleared with background(), then there are two different ways covered here, which we'll call “drawing big translucent rectangles” and “modifying every pixel” respectively.

Option 1: Translucent Rectangles

If you want the mouse trails to slowly fade out instead, then at the start of every frame you can cover them up with a translucent rectangle. First set the fill color to have a low alpha value, and then draw over the whole window. This method has some disadvantages because the way alpha works might leave artifacts from previous frames intact. On the other hand, it's fast, simple and portable to other Processing renderers such as OPENGL. Why are there ghosts of previous frames?

When pixels are drawn with an alpha value, the output color depends on the existing color of the destination pixel and the color and alpha value of the source pixel being drawn. Internally, the alpha value is scaled between 0.0 and 1.0, and the following formula1) is used to calculate the output:

color_out = color_src * alpha_src + (1 - alpha_src) * color_dst

So you can see that when alpha is 0.0, the output color is the same as the existing color of the destination pixel. When the alpha is 1.0 then the output color is the same as the color of the source pixel currently being drawn. For other alpha values the output pixel is a mixture of the source and destination.

Ghosting occurs when the internal graphics engine rounds the fractions in the calculation to be whole numbers. Different graphics engines handle this in different ways, for example the above mouse trails will not leave ghosts with the P3D Processing renderer (which was written for speed) but will leave ghosts with the OPENGL and JAVA2D renderers (which are generally more accurate).

Option 2: Modify Every Pixel

This method has the advantage of absolute control over precision and rate of change, but the disadvantage is that it won't take advantage of your graphics hardware when using the OPENGL renderer.

Source Code

void setup() { 
  size(200,200); 
  background(0); 
}
 
void draw() {
 
  // Uncomment Option 1 or 2 to see the fade
 
  // Option 1: 
  // Replaces a call to background() with drawing a 
  // large rectangle over the top of everything 
 
  //fill(0,10); // use black with alpha 10
  //rectMode(CORNER);
  //rect(0,0,width,height);
 
 
  // Option 2: 
  // Replaces a call to background() by modifying 
  // every pixel on screen. 
 
  // fadescr(25,0,100);
 
 
  // Draw some stuff, for example simple mouse trails
  stroke(255);
  line(pmouseX,pmouseY,mouseX,mouseY);
}
 
// NOTE: This function is currently NOT WORKING
void fadescr(int r, int g, int b) { 
  int red, green, blue;
  loadPixels();
  for (int i = 0; i < pixels.length; i++) {
    red = (pixels[i] >> 16) & 0x000000ff; 
    green = (pixels[i] >> 8) & 0x000000ff; 
    blue = pixels[i] & 0x000000ff; 
    pixels[i] = (((red+((r-red)>>3)) << 16) | ((green+((g-green)>>3)) << 8) | (blue+((b-blue)>>3)));
  } 
  updatePixels();
}

Downloads

Related Links

Alpha Forum discussion fade2anycolor