DEV Community

Cover image for Matrix raining code effect using JavaScript

Matrix raining code effect using JavaScript

Adam Nagy on October 11, 2021

Motivation The new Matrix movie is coming this year, and I'm so hyped for it that I had to create this iconic effect with my tools. The ...
Read full post
Collapse
 
marzelin profile image
Marc Ziel •

Nice, but the start of the animation is a bit ugly, imho. Here's a quick fix:

const rainDrops = Array.from({ length: columns }).fill(canvas.height);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
javascriptacademy profile image
Adam Nagy •

Yes, this is a nice way to start it 😊. I left it because it is felt like a cool intro to me, something that signals that something big and awesome is coming.

Collapse
 
lpm0073 profile image
Lawrence McDaniel •

likewise. i originally added Marc's fix but then changed it back to your original bc i like the flicker effect.

Collapse
 
lpm0073 profile image
Lawrence McDaniel • • Edited

You're welcome to do a PR on npmjs.com/package/react-mdr with your fix :)

Collapse
 
ecfaria profile image
Emílio Faria •

I remember trying doing this circa 2004, it was MUCH MUCH MUCH more difficult than this. Impressive how web technologies evolved in the last ~20 years.

Collapse
 
javascriptacademy profile image
Adam Nagy •

Yes it is evolved a lot, and now it is evolving even rapidly. I’m really excited how it will look in ^10, ^20 years 🙂

Collapse
 
linuxuserin profile image
L •

Don't know but 4 years old code looks same as yours.

code.sololearn.com/WpFa2Yz9WP8g

Collapse
 
lpm0073 profile image
Lawrence McDaniel • • Edited

This is awesome Adam, thanks for sharing. I liked it so much that i ported it to ReactJS and created an NPM package based on your code sample: npmjs.com/package/react-mdr

Collapse
 
oojoseph67 profile image
Obinna Okolo •

hey lawrence can i also use this on my Next.JS project

Collapse
 
javascriptacademy profile image
Adam Nagy •

Awesome work Lawrance!

Collapse
 
chiu profile image
SkynetYu •

Sorry for being late and Thanks for your sharing Adam!
I liked it so much.
I have seen the react library but not Angular version.
It would be great if have one. So I publish the ngx-mdr for Angular package.
npmjs.com/package/ngx-mdr

Collapse
 
erickvivas415 profile image
Erick Vivas •

Pretty cool!

Collapse
 
javascriptacademy profile image
Adam Nagy •

Thanks for the feedback, appreciated. 😊

Collapse
 
remaster profile image
Daniel Neuman •

Very nice! 🌟
I borrowed this to make a point about how the aesthetic in The Matrix 4 should have been to replace the characters in the digital rain with emojis.
There is some idea there about how emojis are a form of digital compressed communication.
neuman.fi/daniel/emoji-digital-rai...

Collapse
 
jcubic profile image
Jakub T. Jankiewicz •

I've created a library for this:

GitHub logo jcubic / cmatrix

Render Matrix effect animation on Canvas in JavaScript

CMatrix - Matrix effect in JavaScript

npm version LICENSE MIT jsDelivr CDN download counter

Matrix animation effect in JavaScript using Canvas

Screenshot of a browser window with Matrix rain effect, green letters that look like Japanese on black background

Installation

npm install cmatrix

Demos

Usage

You can use CDN:

<script src="https://cdn.jsdelivr.net/npm/cmatrix"></script>
Enter fullscreen mode Exit fullscreen mode

and intialize the effect.

matrix(canvasElement, {
  chars: ['0', '1'],
  font_size: 16
}).
Enter fullscreen mode Exit fullscreen mode 
matrix(canvasElement, {
  chars: matrix.range(0x30A1, 0x30F6).concat(matrix.range(0x0030, 0x0039)),
  font_size: 16
}).
Enter fullscreen mode Exit fullscreen mode

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 of the animation.

Repo Link

Options

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