Click here to Skip to main content
14,176,272 members
Click here to Skip to main content
Add your own
alternative version


25 bookmarked
Posted 1 Jun 2003

JavaScript Matrix Falling Decoder

, 1 Jun 2003
Rate this:
Please Sign up or sign in to vote.
You've all seen the is a JavaScript version of the famous falling characters.

Sample Image - MatrixDecoder.jpg


After recently seeing The Matrix Reloaded, I got the urge to put that effect on my home page...which I have recently been doing a quick relocation of... Anyway the samples and things that were coming up in the searches I was doing, didn't give me much, so I wrote this from me know what you think.

Essentially how the Falling Matrix code works is very simple, you can see the iterative process the development went through, if you download early versions of the code from PlanetSourceCode.

The project started out simply as a code breaking simulation that Hollywood popularizes, the letters just sort of spin randomly until each letter locks in place, the first version I created this is all it did, but it did it in a very flexible way that allowed you to easily change the resulting message.

This was the effect that I was looking for, but it didn't look all that great in practice, so what I did is add multiple layers to the encryption process, each layer remembers the previous layer's value, and the top layer is the one that would randomly select a character. But the randomly selected character was taking a long time to lock in values sometimes...So, I then improved the character selection process, by making vowels more common, and since most of the string was lower case, I made higher odds for a lowercase character to be chosen, but I agree that this selection process could be improved, and sometimes it can take a while for the process to finally decrypt the string.

After that was accomplished, I got tired of creating all the layers to get this effect, so I made some ASP code to create the JavaScript and HTML to allow me to specify how many layers to create and how fast to randomly select letters. At this time, I thought that it'd be nice to have this effect multiple times on the page, and now with ASP doing all the creation of the script, I could...except my JavaScript was using global (page level) variables, so this had to be fixed.

I made a JavaScript class and made all the functions' instance variables, about this time is when I was trying to make the Matrix effect. I needed many falling randomly selected characters to be occurring at once. I knew I was close, but I had to create another function, one that would never lock in on a value, and would move down the page at the same increment as the layer, now vertical, were spaced. This was done so that when it fell, and all the characters shifted to the next layer, the character would seem to just fade in color, but remain in the same place on the screen.

If you'd like the script to drop letters in another color, I have a demo page on my site that will create all the code you need for this on my site...all you need to do is enter the Red, Blue, and Green amounts, and it creates all the JavaScript for you, if their seems to be enough of a demand, I'll explain the ASP code that is helping me create this dynamic effect, just go to my matrix page on my site to see this in action.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
United States United States
Lot`s going on these days in my life, moving into a new house with my long-time girlfriend, so there`s a lot going on there. The main other thing is that I`m getting my daughter for the entire summer, so that is another big time commitment for me. I work as a Web-Developer and spend most of the time there working on various Microsoft products, and we are finally moving to .Net 2003 enviroment where I get to make most of the business decision, which makes the job fun.

You may also be interested in...

Comments and Discussions

Rantbad Pin
noname-201321-Nov-08 20:30
membernoname-201321-Nov-08 20:30 
QuestionCrossbrowser? Pin
jsanjosembet.es5-Jan-05 1:02
memberjsanjosembet.es5-Jan-05 1:02 
GeneralOne of the better ones Pin
Paul Watson2-Jun-03 11:36
sitebuilderPaul Watson2-Jun-03 11:36 
GeneralRe: One of the better ones Pin
NorthSpot2-Jun-03 14:02
memberNorthSpot2-Jun-03 14:02 
GeneralRe: One of the better ones Pin
Jason McBurney5-Jun-03 10:26
memberJason McBurney5-Jun-03 10:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.190525.1 | Last Updated 2 Jun 2003
Article Copyright 2003 by NorthSpot
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid