Learn creative coding writing simple programs

22. Stars blinking at night (fade out effect)

In this episode we create an interesting fade out effect. Until now, every time we animated (moved) something on the screen, we erased the whole display before drawing each new frame. But instead of using background() to erase the whole screen, we can draw a rectangle that covers every pixel. The trick is to use a low opacity. This means that the "paint" we use does not complete cover the old drawing. It's like a tinted car window or our sunglasses. So on each frame we add a new black layer that makes things a little bit darker. Then draw something new on top, in this case small circles. The result is quite interesting. You can try this for any previous animation we have made. Just replace the first call to background() inside the draw() function with two lines: fill(0, 10); and rect(0,0,width,height);


Code editor

You can make changes to the code below. Then

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
To highlight code blocks, surround it with ``` code-fences ``` like this:
``` void setup() { size(600, 600); } ```