11 ms·
The Matrix in JavaScript in less than 600 bytes
- apunic 14y agoWhen 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 14y agoIt'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 14y agoI 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.
- lotyrin 14y agoWhy kanji instead of mirrored katakana?
- Monkeyget 14y agoI took the liberty do de-obfuscate the code : http://jsfiddle.net/tburette/w6npr/5/ http://jsfiddle.net/tburette/w6npr/5/
- Maxious 14y agoGreat, I changed it to one of the katakana ranges and flipped the canvas http://jsfiddle.net/muV99/1/ http://jsfiddle.net/muV99/1/
- shadeless 14y agoNow it just needs overflow:hidden to lose sidebars and it's perfect.
- modarts 14y ago...Enhance
- givehimagun 14y agooverflow-hiddened: http://jsfiddle.net/muV99/1/ http://jsfiddle.net/muV99/1/
- seanalltogether 14y agohere 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 14y agoIf this is your thing, why not enter something for js1k? http://js1k.com/2013-spring/ http://js1k.com/2013-spring/
- jpwagner 14y agoThey need to publicize this more. It was really fun in 2010, and I didn't even know they decided to do it annually since!
- moollaza 14y agoLooks like there's already a very similar submission: http://js1k.com/2013-spring/demo/1382 http://js1k.com/2013-spring/demo/1382. This one however is significantly better.
- ChrisNorstrom 14y agoYou're 99% there. The leading characters need to be white, with the tailing characters being green. http://www.youtube.com/watch?v=Or2m7rYHb_Q http://www.youtube.com/watch?v=Or2m7rYHb_Q
- jamesrom 14y agoIf we're being picky, they aren't white. Definitely not #FFF. More of a pale green.
- baby 14y agolight green + glowing + pulsating.
- mantaslu 14y agoAlso, if we're being picky, the characters change in the trails, trails have different lengths, not every trail is lead by a brighter char, some moving/stationary single chars, etc.
- octatone2 14y agoLet'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=0m31s&end=0m36s http://www.endlessvideo.com/watch?v=Or2m7rYHb_Q&start=0m...
- gebe 14y agoThere 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_posted_an_htmljavascript_implementation/ http://www.reddit.com/r/programming/comments/1ag0c3/someone_...
- skore 14y ago"Code golfing" is a truly marvelous term.
- pazimzadeh 14y agoReminds me of layer tennis: http://layertennis.com/ http://layertennis.com/
- Aardwolf 14y agoI think it are the wrong type of characters. The Asian characters in the Matrix are less complex than those (Wikipedia says "half-width kana").
- baking 14y agohttp://timelessname.com/sandbox/matrix_orig.html 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.
- jasonkostempski 14y agoIf The Architect hadn't thought he was smarter than JSLint, they wouldn't have ended up with that pesky anomaly.
- kostya-kow 14y agohttps://github.com/KostyaKow/shell_matrix https://github.com/KostyaKow/shell_matrix Bash version
- benburton 14y agoAll I see is this: sed: 2: "x;s/\n//g;${p;x;} }'s) ": unexpected EOF (pending }'s)
- kostya-kow 14y agoAre you using OS X? You need GNU Sed for this to work.
- benburton 14y agoAh. Thanks.
- mikecane 14y agoXP SP2, Firefox 19.0.2 and all I get is a screen that quickly fades to black and then ... nothing.
- martinced 14y ago"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 14y agoand "SP2" At least get to SP3
- mikecane 14y agoI 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...).
- ronilan 14y ago"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/ http://project.cyberpunk.ru/lib/neuromancer/ (1984)
- eranation 14y agoGreat book! been years since I've read it.
- thom 14y agoAttempted to upload my consciousness to this but it just crashed Chrome. Github issues link pls.
- TommyDANGerous 14y agoThat is cool, wish I could make it my background.
- alexvr 14y agoMakes one heck of a screen saver
- Xanza 14y agoThis 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 14y agoremoving the 9 split jazz is actually shorter (and more readable) http://jsbin.com/idijay/1/edit http://jsbin.com/idijay/1/edit
- atamyrat 14y agoThe 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 14y agoEmbedded 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 :)
- samstave 14y agoHave you ever tried to config a router that has debug to console turned on? Makes me want to throttle whomever made this with no option to pause output.
- brianpgordon 14y agoWow, 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/xmatrixjs/blob/ed650310d1846e35cfcbeef47d09eb77c42536dd/xmatrix.html http://htmlpreview.github.com/?http://github.com/briangordon...
- lttlrck 14y agoDoesn't work for me in Chrome 27. I'd love to have one that accurate emulates the real animation.
- brianpgordon 14y agoAh, newer versions of Chrome broke (https://code.google.com/p/chromium/issues/detail?id=180007 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/briangordon/xmatrixjs/blob/ed650310d1846e35cfcbeef47d09eb77c42536dd/xmatrix.html http://htmlpreview.github.com/?http://rawgithub.com/briangor...
- hyh1048576 14y agoDoesn't work for me either. Moves really slow. In Chrome 25 stable.
- martin_ 14y agoLooks like you improved upon the one I posted yesterday https://news.ycombinator.com/item?id=5387553 https://news.ycombinator.com/item?id=5387553 - but it works much better in canvas for sure!
- leeoniya 14y agoobligatory http://hackertyper.com/ http://hackertyper.com/
- andrewcanis 14y agoIf 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>
- bluesmoon 14y agoThis is what a webcam packet dump looks like on a black console with green text: http://bluesmoon.livejournal.com/32581.html http://bluesmoon.livejournal.com/32581.html
- Sallsa675 14y agoWhat's cool about 600b is you can use it for your browser start page. I'd like to see the picky stuff implemented. :)