DEV Community

Making 'The Matrix' Effect in Javascript

Ganesh Prasad on September 20, 2019

I have always been a big fan of the movie series 'The Matrix Trilogy'. In this article we will make the following visual effect from the matrix ser...

Read full post

Jan Wedel • Sep 21 '19 • Edited

Nice work. I don’t recall the exact matrix effects, but I think you should remove the space character from the possible result set... It looks like some columns start somewhere in the middle. Maybe some modulo/offset calculation would do the trick.

Deepu K Sasidharan • Sep 20 '19

Nice. I remember doing this in Flash/Actionscript around 10 years ago

Jakub T. Jankiewicz • Nov 26 '23

I've created a library with the Matrix effect. It's based on CodePen demo, I think it looks much better. The original code was much simpler and also looks better because it use Japanese characters.

jcubic / cmatrix

Render Matrix effect animation on Canvas in JavaScript

CMatrix - Matrix effect in JavaScript

Matrix animation effect in JavaScript using Canvas

Installation

npm install cmatrix

Demos

ES Module (custom characters)
ES5
Matrix Font

Usage

You can use CDN:

<script src="https://cdn.jsdelivr.net/npm/cmatrix"></script>

and intialize the effect.

matrix(canvasElement, { chars: ['0', '1'], font_size: 16 }).

matrix(canvasElement, { chars: matrix.range(0x30A1, 0x30F6).concat(matrix.range(0x0030, 0x0039)), font_size: 16 }).

The matrix function return a Promise that is resolved when exit By default, q and ESC exit from the effect. Use exit: false to disable ending the animation.

Repo Link

Options

chars - array of single character strings, by default Katagana and Hiragana (Japanese characters are used).
exit - by default matrix return…

View on GitHub

Jaime Cortes • Mar 24 '22

Great work, I improve a little:

you can asign a font in http; so i doit a Matrix font like: fontmeme.com/fonts/matrix-code-nfi...
I read a text in files instead a random characters, i thing is better distribution of character sets

Look my improves:
jaimecortesproject.000webhostapp.c...

feel free to use.