The Matrix Code Generator

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

Requirements

• Node.js
• NPM

Installation

To get it running quick, run the following.

npm install
npm run serve

Controls

Control	Keybinding	Description
Toggle HUD	c	show/hide control HUD

Settings

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.

Details

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.

Streams

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.

Glowing

Canvas filters completely kill performance, so the glow is generated by applying a CSS drop-shadow filter to the canvas.

Pixelation

There is a pixelation overlay to give the code texture. This just a low-opacity linear-gradient that creates a small checkered pattern.

Musings

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.

Future Development

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.