Fading To Black

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” respecti

vely.

This method basically replaces a call to background() with drawing a large rectangle over the top of everything.

Let's start with a really simple mouse trails sketch, which doesn't have a call to background() in the loop so it gradually builds up over time:

 
void setup() {
 
  size(200,200);
 
  background(0);
 
}
 
 
 
void draw() {
 
  // draw some stuff, for example simple mouse trails
 
  stroke(255);
 
  line(pmouseX,pmouseY,mouseX,mouseY);
 
}

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:

 
void draw() {
 
  fill(0,10); // use black with alpha 10
 
  rectMode(CORNER);
 
  rect(0,0,width,height);
 
 
 
  // draw some stuff, for example simple mouse trails
 
  stroke(255);
 
  line(pmouseX,pmouseY,mouseX,mouseY);
 
}

And that's it! This method has some disadvantages because the way alpha works might leave artefacts from previous frames intact. On the other hand, it's fast, simple and portable to other Processing renderers such as OPENGL.

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).

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.

copy over and edit discussion from here

rewrite fade2anycolor applet for Processing beta

Alpha Blending in OpenGL