JavaScript Matrix Falling Decoder

• Download demo project - 146 Kb

Introduction

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 scratch...like 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.