# The Matrix effect, HTML5 Canvas

Mini-project of this evening has been to mimic **“The Matrix effect”** (figure 1) from the movie The Matrix, in which Neo can see the world in code.

This has been done using **HTML5** canvas and **javascript**, the result can be seen at www.jimmyliikala.se/dl/exp/matrix/.

**Update (2015-04-08):**

Now it is possible to control some variables through the URL.

Explaining through example.

- www.jimmyliikala.se/dl/exp/matrix/?matrixText=0123456789 , will only display the characters “0123456789” in the Matrix effect.
- www.jimmyliikala.se/dl/exp/matrix/?fontSize=20 ,will the font-size of the characters become “20”.
- www.jimmyliikala.se/dl/exp/matrix/?textColor=FFFFFF ,Hexadecimal value for color (RGB), will make text become white.
- www.jimmyliikala.se/dl/exp/matrix/?backgroundColor=80,0,0 , RGB-values (range 0-255 for each component) will make background slightly red.

These can also be combined like this:

Figure 1. The Matrix effect. |

**NOTE**: This has only been tested in Google Chrome 41.0.2272.118, and some new version of Safari on iPhone.