This is a screen-accurate Matrix Code generator built with HTML canvas.
I'm a big fan of The Matrix and have always wanted a code generator that truly matched the films. So I watched the opening sequence about 100 times, and with screen shots and video reference, built this over a weekend.
Feel free to copy, adapt, use in fan films, whatever you want. If you happen to be a VFX artist or set decorator who uses this on the new film, you'd make my dreams come true by giving me a credit.
Demo: matrix-code.mlathrom.com
- Node.js
- NPM
To get it running quick, run the following.
npm install
npm run serve
Control | Keybinding | Description |
---|---|---|
Toggle HUD | c |
show/hide control HUD |
This is pretty configurable. You can change the color, font, glyphs used. The defaults are set to look as Matrixy as possible.
Setting | Type | Default | Description |
---|---|---|---|
nullStreamDensity |
{Number} |
4 |
Controls the amount of null streams. |
nullStreamLengthMin |
{Number} |
1 |
Minimum block length of null streams. |
nullStreamLengthMax |
{Number} |
42 |
Minimum block length of null streams. |
streamSpeedMin |
{Number} |
1 |
Minimum speed of streams. |
streamSpeedMax |
{Number} |
20 |
Maximum speed of streams. |
streamSpeedRandom |
{Boolean} |
true |
Randomizes the speed at which streams move. Streams can change speed during life. |
streamSpeedRandomHalf |
{Boolean} |
false |
Give half of the streams random changing speed, and the other half consistent. |
streamSpeedBoost |
{Number} |
0 |
Increases the "blocks per frame" speed of streams. |
streamJumperMin |
{Number} |
0 |
Minimum number of highlighted glyphs that make quick jumps. |
streamJumperMax |
{Number} |
0 |
Miximum number of highlighted glyphs that make quick jumps. |
glyphSpeedMin |
{Number} |
5 |
Minimum transition speed of glyphs. |
glyphSpeedMax |
{Number} |
50 |
Maximum transition speed of glyphs. |
glyphTransitionRandom |
{Boolean} |
true |
Randomizes the time and speed at which glyphs change. |
highlightGlyphDensity |
{Number} |
2 |
Controls the density of highlighted glyphs |
glyphOpacityMin |
{Number} |
0.5 |
Maximum opacity of glyphs. |
glyphOpacityMax |
{Number} |
1 |
Maximum opacity of glyphs. |
reduceFrameRate |
{Number} |
1 |
Maximum opacity of glyphs. |
colors.default |
{Number} |
2 |
Reduces the rate at which new a new frame are drawn. |
colors.highlight |
{String} |
'rgba(200, 255, 215, 1)' |
Color of highlight glyphs. |
glyphs |
{String} |
'qwertyuiopasdfghjklzxcvbnm.:"*<>|123457890-_=+QWERTYUIOP ' |
String of glyphs to use. |
fontSize |
{Number} |
14 |
Font size of glyphs. |
fontFace |
{String} |
'matrix-code' |
Font face of glyphs. |
The glyphs were built in Adobe Illustrator using screenshots from the first film as reference. I took particular care to make sure the glyphs maintained consistent thickness, proportion, and style.
The streaming effect actually works in reverse. You're not seeing streams of code over empty space, it's streams of empty space over code. This turned out to be the simplest implementation.
Canvas filters completely kill performance, so the glow is generated by applying a CSS drop-shadow filter to the canvas.
There is a pixelation overlay to give the code texture. This just a low-opacity linear-gradient that creates a small checkered pattern.
Some of the screen accuracy was incidental. Turns out the way HTML canvas draws lends itself to the little details of randomness. For example, the short trails on highlighted glyphs and the way bits of code pop in and out of existence are the result of null streams moving past each other at random speeds.
I'll probably tinker with this some more, but I have no specific plans. Here's a list of features I'd like to add if I get the time:
- Improve performance.
- Change direction of stream.
- Adapt to screen resize.
- Brighter highlighted glyphs. (tough to do because of the stream clearing)
- Add frame rate counter.
- Add controls for code settings.