Matrix rain animation using HTML5 canvas and javascript

View code Play Walkthrough

Experiments

Description

This tutorial is inspired by this cool demo. The code is simplified and recorded as a walkthrough covering basic concepts like drawing and animating text on canvas.

This version uses a different character set(Japanese+Engish+Numbers) taken from the original matrix animation.

Add New Comment

27 Comments

(close)
muni

muni

Simply superb….

Amit

Amit

Greate, Superb and awesome!!
Very Amazing

Anish Sheela

Anish Sheela

What is the license of the code?

Pugazhvendan

Pugazhvendan

class look

Duke0200

Duke0200

Very nice to mess with and try to make a representation of binary code!

Thanks for the “template!”

Vicky

Vicky

Awesome Bro…

?

?

I thought this was cool to add to my site for a school project, but for me there are only numbers and punctuation. I tried setting the charset to UTF-8, but it didnt work. Help?

drew

drew

Very, very sexy.

egg

egg

cool,还是中文的

James

James

I cannot get this javascript to work on my website.

Sam

Sam

Can Someone explain how the letters are to become more transparent as the loop continues to do its thing?

alex

alex

Really nice!

I didn’t know this is possible with HTML5 canvas.

izulthea

izulthea

just say, WOW!!

i like what you write about matrix, its amazing JS.

kevin

kevin

is their a wallpaper where i can edit the text that’s displayed like this

ders

ders

Can’t get this to work anywhere. Wrote it from scratch based on the tutorial didn’t work, copy and pasted everything still didn’t work.
What am I missing?

Mike

Mike

Don’t forget to link the CSS and JS in your HTML if you’re trying this outside TCP (hint: use and

ajhai

ajhai

not working on me

ajhai

ajhai

now its working haha….awesome

zak

zak

Total noob here. Can someone explain how to link the docs/get this running on a local system after writing the code presented here?

Perry Johnson

Perry Johnson

I am just starting out to learn Java. I was wondering if there was a way to get this to put certain letters in the waterfall and then stop together and spell a name or say something specific?

Zroom

Zroom

That’s what im trying to figure out too
I want to put a specific text and not have my letters random all over the screen ..
I tried to delete the math.floor function but my words wont print in a vertical line

Jay

Jay

It worked on me, but I’m still having a hard time tweaking it for transparency! I hope I can use the matrix as a background overlay for my website soon.

Trevor

Trevor

while watching this,some people behind me thought I was hacking… LOL

manivel

manivel

Matrix not working for me.. only i can see black background on browser

5x 10x 15x 20x

27 Comments

Description