
The Matrix in JavaScript in less than 600 bytes - doublextremevil
http://timelessname.com/sandbox/matrix.html
======
atamyrat
The closest environment I got to work with Matrix-like UI but real experience
was:

There is board I'm developing on with serial port, and kernel debug prints so
much garbage it literally fills the entire screen in less than couple of
seconds. It was because of faulty/broken hardware and there is busy loop that
keeps retrying to access the device.

I could enter shell commands but I/O lines get mixed in between the verbose
kernel debug lines. After some time my eyes synced to the screen scroll rate
and I could follow the output from bottom to top to read it (repeatedly run
command until I could catch the output correctly).

For the moment, I saw "blonde" in fast scrolling random code :) Anyone else
had to work like this?

~~~
hideo
Embedded hackers of the world unite?

Everytime u-boot barfed on me or I messed up the serial port I ended up having
to scan through screenfulls of ASCII junk scrolling by at full speed to get my
commands and results out.

The closest I ever got to -real- blonde/brunette effects was when I was
debugging the output from a H264 streamer. I could figure out video resolution
and slicing properties from the tcpdump trace scrolling by :)

------
ChrisNorstrom
You're 99% there. The leading characters need to be white, with the tailing
characters being green.

<http://www.youtube.com/watch?v=Or2m7rYHb_Q>

~~~
octatone2
Let's get real picky:

\- chunks should vertically move down together, they don't just change color

\- leading char is a bright green with outer glow

\- movement doesn't always start at the top

\- there are gaps in the chars

\- there are vertical groups as small as 1 char that change chars at random

\- there is no trailing transition in the color

[http://www.endlessvideo.com/watch?v=Or2m7rYHb_Q&start=0m...](http://www.endlessvideo.com/watch?v=Or2m7rYHb_Q&start=0m31s&end=0m36s)

~~~
VexXtreme
Furthermore, the characters are supposed to be horizontally inverted (flipped)
half width katakana (Japanese) characters, not the Chinese kanji.

~~~
ygra
Also digits, flipped as well.

------
seanalltogether
here it is at 324 bytes, since your going to end up with scrollbars no matter
what, you might as well not worry about document size

    
    
        <canvas id=q width=3000 height=3000 style=margin:-10><script>for(m=Math.random,p=[],i=0;i<256;p[i++]=1);setInterval('9Style="rgba(0,0,0,.05)"9Rect(0,0,3000,3000)9Style="#0F0";p.map(function(v,i){9Text(String.fromCharCode(3e4+m()*33),i*10,v);p[i]=v>758+m()*1e4?0:v+10})'.split(9).join(';q.getContext("2d").fill'),33)</script>
    

edit... and at 319

    
    
        <canvas id=q style=margin:-10><script>for(q.width=q.height=b=3000,m=Math.random,p=[],i=0;i<256;p[i++]=1);setInterval('9Style="rgba(0,0,0,.05)"9Rect(0,0,b,b)9Style="#0F0";p.map(function(v,i){9Text(String.fromCharCode(3e4+m()*33),i*10,v);p[i]=v>758+m()*1e4?0:v+10})'.split(9).join(';q.getContext("2d").fill'),33)</script>

~~~
inoop
If this is your thing, why not enter something for js1k?
<http://js1k.com/2013-spring/>

~~~
jpwagner
They need to publicize this more. It was really fun in 2010, and I didn't even
know they decided to do it annually since!

~~~
inoop
Shameless self-promotion: <http://js1k.com/2013-spring/demo/1423>

~~~
MrNibbles
Nice work.

------
Monkeyget
I took the liberty do de-obfuscate the code :
<http://jsfiddle.net/tburette/w6npr/5/>

~~~
Maxious
Great, I changed it to one of the katakana ranges and flipped the canvas
<http://jsfiddle.net/muV99/1/>

~~~
shadeless
Now it just needs overflow:hidden to lose sidebars and it's perfect.

~~~
modarts
...Enhance

~~~
givehimagun
overflow-hiddened: <http://jsfiddle.net/muV99/1/>

------
ronilan
"Headlong motion through walls of emerald green, milky jade, the sensation of
speed beyond anything he'd known before in cyberspace... The Tessier-Ashpool
ice shattered, peeling away from the Chinese program's thrust, a worrying
impression of solid fluidity, as though the shards of a broken mirror bent and
elongated as they fell --"

<http://project.cyberpunk.ru/lib/neuromancer/> (1984)

~~~
eranation
Great book! been years since I've read it.

------
gebe
There has been some interesting discussion and code golfing on this piece over
at Reddit that may be a worthwhile read for some:

[http://www.reddit.com/r/programming/comments/1ag0c3/someone_...](http://www.reddit.com/r/programming/comments/1ag0c3/someone_posted_an_htmljavascript_implementation/)

~~~
skore
"Code golfing" is a truly marvelous term.

~~~
pazimzadeh
Reminds me of layer tennis: <http://layertennis.com/>

------
lotyrin
Why kanji instead of mirrored katakana?

------
jasonkostempski
If The Architect hadn't thought he was smarter than JSLint, they wouldn't have
ended up with that pesky anomaly.

------
thom
Attempted to upload my consciousness to this but it just crashed Chrome.
Github issues link pls.

~~~
pcg
Worked for me in Firefox nightly.

~~~
solistice
Have you gotten the Data link hardware to work? I've been trying to install it
into my spinal cord, but I'm getting Neurons_Out_Of_Bounds exceptions all the
time.

------
andrewcanis
If anyone is curious how the code actually works, I've commented up a version
below:

    
    
        <script type="text/javascript">
    
        function matrix() {
            // initialize variables
            for (s = window.screen,
                 w = q.width = s.width, // on my monitor: 1920
                 h = q.height = s.height,  // on my monitor: 1200
                 m = Math.random,   // random number from 0-1
                 p = [],
                 i = 0; 
    
                 // i ranges from 0 to 255, one element for each character horizontally
                 // this is enough characters to fill the entire screen horizontally
                 // canvas won't let you draw off the screen - so I could set this to 1000
                 i < 256;
    
                 // initialize p (the y coordinate of each character) to start at 1
                 p[i++] = 1);
    
            setInterval(
                // every time we call this function we draw the entire screen a very faint black (with a high transparency of 0.05)
                // this means every 33 milliseconds the screen is getting slightly darker
                // this also acts to darken and fade the green characters - when they are first printed they are dark green, then they slowly fade to black
                function() {
                    // draw black (0,0,0) with alpha (transparency) value 0.05
                    q.getContext('2d').fillStyle='rgba(0,0,0,0.05)';
                    // fill the entire screen
                    q.getContext('2d').fillRect(0,0,w,h);
                    // #0f0 is a short form for color green (#00FF00)
                    q.getContext('2d').fillStyle='#0F0';
    
                    p.map(
                        // this function will be called 256 times - once for each element of array p, 
                        function(v,i){
                        // map over the array p
                        //      v is the value in the array p, which represents the y-coordinate of the text going down
                        //      i is the index of the array p, which represents the x coordinate
                        // start from unicode char code 30,000 (0x7530) then add a random number from 0-33
                        // from wikipedia: http://en.wikipedia.org/wiki/List_of_CJK_Unified_Ideographs,_part_2_of_4
                        //      U+753x 	田 	由 	甲 	申 	甴 	电 	甶 	男 	甸 	甹 	町 	画 	甼 	甽 	甾 	甿
                        //      U+754x 	畀 	畁 	畂 	畃 	畄 	畅 	畆 	畇 	畈 	畉 	畊 	畋 	界 	畍 	畎 	畏
                        //      U+755x 	畐
                        randomNum = m()*33;
                        // note how the asian characters are slightly different shades
                        // of green, this depends on their line thickness etc, and doesn't
                        // really happen for english characters
                        randomAsianChar = String.fromCharCode(30000 + randomNum);
    
                        q.getContext('2d').fillText(
                            randomAsianChar, 
                            i*10,   // x coordinate - each character is 10 x 10
                            v       // y coordinate 
                        );
                        // draw at least 758 characters down before reseting to the start
                        minimumHeight=758
                        num = minimumHeight+m()*10000;
                        p[i] = (v>num) ? 0 : v+10   // increment the y coordinate by one character (10 pixels), reset when y-coord gets too big
                        })
                },
                33) // call every 33 milliseconds
        }
        </script>
    
        <body style=margin:0 onload="matrix()"><canvas id=q>

------
martin_
Looks like you improved upon the one I posted yesterday
<https://news.ycombinator.com/item?id=5387553> \- but it works much better in
canvas for sure!

------
apunic
When my eyes follow the raindrops it's impossible to see the Chinese
characters. I have really to force myself to stare at one spot to see the
characters. Interesting phenomena.

~~~
shmerl
It's pretty simple - the symbols don't move. Their brightness changes. So if
you move your view - you jump across many symbols and obviously can't "follow"
anything.

~~~
acchow
I think what apunic is noting is our natural tendency to track movement. If
you try to read something too close to the leading bright letter, your eyes
get hooked by it and get dragged along for the ride. You have to stay a safe
distance back to be able to read anything.

------
Xanza
This can be rendered directly into Chrome by:

    
    
        data:text/html, <canvas id=q style=margin:-10><script>for(q.width=q.height=b=3000,m=Math.random,p=[],i=0;i<256;p[i++]=1);setInterval('9Style="rgba(0,0,0,.05)"9Rect(0,0,b,b)9Style="#0F0";p.map(function(v,i){9Text(String.fromCharCode(3e4+m()*33),i*10,v);p[i]=v>758+m()*1e4?0:v+10})'.split(9).join(';q.getContext("2d").fill'),33)</script>

~~~
ssttoo
removing the 9 split jazz is actually shorter (and more readable)
<http://jsbin.com/idijay/1/edit>

------
Aardwolf
I think it are the wrong type of characters. The Asian characters in the
Matrix are less complex than those (Wikipedia says "half-width kana").

------
brianpgordon
Wow, what a coincidence. I just made one two weeks ago. Mine is way over 600
bytes though.

Requires Chrome:

[http://htmlpreview.github.com/?http://github.com/briangordon...](http://htmlpreview.github.com/?http://github.com/briangordon/xmatrixjs/blob/ed650310d1846e35cfcbeef47d09eb77c42536dd/xmatrix.html)

~~~
lttlrck
Doesn't work for me in Chrome 27.

I'd love to have one that accurate emulates the real animation.

~~~
brianpgordon
Ah, newer versions of Chrome broke
(<https://code.google.com/p/chromium/issues/detail?id=180007>) the htmlpreview
tool. Here's a link that should work with the newer Chrome. Please let me know
what you think! It's modeled after xmatrix rather than the original film
footage, but I think it's pretty good. Still Chrome-only:

[http://htmlpreview.github.com/?http://rawgithub.com/briangor...](http://htmlpreview.github.com/?http://rawgithub.com/briangordon/xmatrixjs/blob/ed650310d1846e35cfcbeef47d09eb77c42536dd/xmatrix.html)

------
kostya-kow
<https://github.com/KostyaKow/shell_matrix>

Bash version

~~~
benburton
All I see is this:

sed: 2: "x;s/\n//g;${p;x;} }'s) ": unexpected EOF (pending }'s)

~~~
kostya-kow
Are you using OS X?

You need GNU Sed for this to work.

~~~
benburton
Ah. Thanks.

------
baking
<http://timelessname.com/sandbox/matrix_orig.html> is the only version that
works for me. I don't have time right now to figure out why that is.

------
bluesmoon
This is what a webcam packet dump looks like on a black console with green
text: <http://bluesmoon.livejournal.com/32581.html>

------
TommyDANGerous
That is cool, wish I could make it my background.

------
Sallsa675
What's cool about 600b is you can use it for your browser start page. I'd like
to see the picky stuff implemented. :)

------
mikecane
XP SP2, Firefox 19.0.2 and all I get is a screen that quickly fades to black
and then ... nothing.

~~~
martinced
_"XP SP2"_

I'm nostalgic too (not about Windows that said) but... Windows XP is the most
exploited Windows right now: zombie botnets are made of a huge part of Windows
XP PCs. Microsoft ain't patching several critical exploits on XP and it has
been demonstrated for a fact that any local hole on XP means admin rights.

~~~
vxNsr
and "SP2" At least get to SP3

~~~
mikecane
I can't. This is a PC that is too slow for SP3 now. I tried it when SP3 was
released and it just made it slower. I had to roll back. I use defensive
measures and have been able to ward off bots and virii so far (not that they
didn't get through a few years ago...).

------
leeoniya
obligatory <http://hackertyper.com/>

------
alexvr
Makes one heck of a screen saver

