Click here to Skip to main content
Click here to Skip to main content

JavaScript Matrix Falling Decoder

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

Sample Image - MatrixDecoder.jpg

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.

License

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

NorthSpot
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.

Comments and Discussions

 
Rantbad Pinmemberykorotia21-Nov-08 20:30 
QuestionCrossbrowser? Pinmemberjsanjosem5-Jan-05 1:02 
GeneralOne of the better ones PinsitebuilderPaul Watson2-Jun-03 11:36 
GeneralRe: One of the better ones PinmemberNorthSpot2-Jun-03 14:02 
GeneralRe: One of the better ones PinmemberJason McBurney5-Jun-03 10:26 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 2 Jun 2003
Article Copyright 2003 by NorthSpot
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid