Chapter projects

Create a Matrix effect

This exercise will create a continuous animation of text moving from top to bottom. The final effect produced will show characters moving down the screen within the canvas element and appearing to disappear and fade as they approach the bottom of the screen as more new characters will be added to the canvas in their place. The random character can be either a 0 or 1, and will be in place in the position according to the number, which will represent the vertical position of where the character is drawn.

The canvas will be filled with a black background, which is going to use opacity to create the fading effect once it's redrawn:

Figure 14.11: Matrix effect desired outcome

Take the following steps:

1. Create a simple HTML document, and in JavaScript create a canvas element and add the getContent element as 2d.
2. Select that canvas element and set the attribute height and width to 500x400. Prepend it to the...