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

22 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?

5x 10x 15x 20x

22 Comments

Description