Into the Matrix
Become the Operator with this JavaScript implementation of the famous Matrix effect as it was shown in the first movie in 1999.
To get you started quickly, this repo comes with a demo that you can throw onto your screen in fullscreen mode as it is. If you want to embed the effect into your website, the demo shows you how it's done.
Concept
The Matrix object can be attached to a container which needs to have a defined size and height via absolute, relative or fixed positioning. The effect will work best out of the box, but it can be adjusted via an options object that is passed into the Matrix constructor. Check out ./src/matrix.js to see all options and their default values.
The Matrix object has a run() and a stop() method to start/stop the animation. Alternatively you can call the render() function directly to execute the next render step.
In each render step
- the Matrix object will create Trickles at random positions on the x-axis with a given probability
- each Trickle will drop a new Symbol one step down on the y-axis, which will create the "trickle down" effect
- each Symbol will gradually fade out and change its character with a given probability. The fade out speed varies between Symbols to create variation in the length of the Trickles
The software will also take care of deleting faded out Symbols and Trickles that have reached the container's bottom edge.
Setup
NodeJS and npm are prerequisites to build and develop this software.
Install the dependencies with $ npm install.
This software uses NodeJS dependencies which won't run in the web browser unless they are compiled into native JavaScript (a process called "building" which is done by the Webpack dependency).
Build the package with $ npm run build. This will create a file ./dist/bundle.js that you can use in your web application.
Use
The simplest way to run the matrix effect is to open ./demo/index.html in your web browser. The effect looks best if the browser is run in fullscreen mode (press F11 on most browser to enter/leave fullscreen mode).
When you load the page, the number of trickles will be determined by the width of the container. In the demo this is equal to the width of the viewport. If you change the size of the browser window, it's best to refresh the page to update the number of trickles.
The demo also comes with a toolbar that will become visible if you move the mouse pointer to the lower edge of the window. It shows stats about the rendering and buttons to start and stop the animation.
Develop
The source code of the demo will also show you how to use the package.
If you want to change the source code, you can use $ npm run watch to automatically re-build the package whenever you save changes. You still have to refresh the webpage though.
Limitations
The software is not optimized for performance yet. For a large area to render in a fluid animation, you will need a processor with strong single-thread performance (as JavaScript is not multi-threaded by its nature).
Sources & Attribution
- Matrix Digital Rain explained on Wikipedia