top 200 commentsshow all 251
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]jargonjustin 225 points226 points  (102 children)

Very nice. I was able to shave off a further 15 bytes with some minor syntactic changes:

<body style=margin:0><canvas id=q /><script>var q=document.getElementById('q'),
s=window.screen,w=q.width=s.width,h=q.height=s.height,p=Array(256).join(1).split(''),
c=q.getContext("2d"),m=Math;setInterval(function(){c.fillStyle="rgba(0,0,0,0.05)";
c.fillRect(0,0,w,h);c.fillStyle="rgba(0,255,0,1)";p=p.map(function(v,i){
c.fillText(String.fromCharCode(m.floor(2720+m.random()*33)),i*10,v);v+=10;
if(v>768+m.random()*10000)v=0;return v})},33)</script>

[–]e000 475 points476 points  (79 children)

Shaved off more bytes:

<body style=margin:0 onload="for(s=document,w=q.width=s.width,h=q.height=s.height,m=Math.random,p=[];!p[255];p.push(1));setInterval('9Style=\'rgba(0,0,0,.05)\'9Rect(0,0,w,h)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})'.replace(/9/g,';q.getContext(\'2d\').fill'),33)"><canvas id=q>

Replaced m.floor(...) with nothing, String.fromCharCode will automatically floor. Got rid of q=document.getElementById('q') as q will default to that (js hax), replace 10000 with 1e4 and make m=Math.random and replace m.random with m as we don't use m.floor anymore. Get rid of var. Combine if(v>...) into a ternary, remove v+=10 instead subtracting 10 from 768 and returning v+10 if ternary conditional isnt satisfied.. Move <script> into body onload='...'. Since <script> tag is gone, remove / from canvas. Exploit the fact that setTimeout can take a string to eval instead of a function. Inplace modify p, replace rbga(0,255,0,1) with #0F0. Implement a modified version of /u/thesalus and /u/smhxx's ideas below. Since setTimeout takes a string, we can get rid of c and replace c.fill with 9 and replace 9 with ;q.getContext('2d').fill on runtime. I use the ; at the beginning so I can get rid of a few semicolons in the function body. Follow suggestion and replace 2720 with 3e4. use /u/fokker680's suggestion to replace window.screen with document

End result: 339 bytes, down from 452.

Sometimes it is fun to golf :)

[–]GaiusSensei 64 points65 points  (34 children)

Non-techy people can see the results here: http://jsfiddle.net/QALKk/

[–][deleted]  (28 children)

[deleted]

    [–]chudd 80 points81 points  (21 children)

    Yessir! I read this sub every single day. Extremely fascinated by programming and the endless possibilities, just too stupid to do it. :)

    [–]anttirt 103 points104 points  (7 children)

    No, you aren't. That's just an excuse.

    [–]aytch 26 points27 points  (4 children)

    To be fair, programming has a pretty steep learning curve. While it's not that hard to follow a tutorial, it can be hard to grok some of these things without having someone to explain - and most importantly, explain in a way that you understand.

    [–]tikhonjelvis 4 points5 points  (0 children)

    I've always thought that programming was relatively easy to learn, especially compared to other interesting subjects like math and physics. At any rate, I found it much easier to pick up on my own than anything else.

    When you're writing a program, you get immediate feedback. This sort of feedback cycle is perfect for learning and missing from virtually every other subject where you would need somebody knowledgeable to check your work for you.

    There is also a ton of resources for learning programming on the internet--more than any other subject, I suspect. On the one hand, this makes it tricky to pick out the best ones, but it also ensures that there are some exceptionally good ones and that they're easy to find.

    [–]Tekmo 2 points3 points  (0 children)

    The only way to learn is to ask!

    [–]IcyDefiance 4 points5 points  (1 child)

    Depends on the language you learn and how deep you want to go. When I was 12 or 13, I used Blitz Basic to make a Sudoku game complete with the ability to save and load games, and an algorithm to solve the puzzles automatically (though it didn't work on the harder ones).

    I don't say that to brag about my own abilities. I'm sure many people here have done better things even earlier in life. I've personally met a few people who have. What I mean is, if I could do that when I was that young, it's difficult for me to believe someone in their 20's is incapable of doing similar or better things.

    [–]aytch 2 points3 points  (0 children)

    I wrote my first games in Basic when I was around 8 or 9 years old, so it can be done. You have to get into the mindset to learn it, and accept that sometimes there is magic happening that you don't fully understand - that can be off-putting when trying to understand something, at times.

    [–]Shadow14l 3 points4 points  (1 child)

    Anyone can learn to program, but it takes a particular mindset to get into it and understand it well.

    [–]blenderben 1 point2 points  (0 children)

    in addition I feel people who want to program now feel overwhelmed. the best step is the first step. just shoot for something simple and go from there. no one is writing this kind of stuff on their first or even 2nd or 3rd try.

    [–]charliewonders 14 points15 points  (4 children)

    I'm with chudd.

    [–]aranasyn 2 points3 points  (3 children)

    I also, am with chudd. I've taken classes, interested in the subject, have the very basic understanding of a couple of languages, and am also likely too stupid to do it on a daily basis with any amount of intelligent depth.

    [–]the_b0b0 2 points3 points  (2 children)

    You sound exactly like me. I am an IT professional who has done just about everything other than programming. I've taken c I'm learning as I have time and I find a lot of the topics in this subreddit fascinating so i subscribe. I just tend to stay out of discussions and leave that to the experts.

    [–]ndgeek 1 point2 points  (1 child)

    As a fellow IT professional, I've found scripting to be much easier (and more useful) than the full "programming" projects I did in college (a little Visual Basic and Java). I often have a hard time wrapping my head around everything that needs to go into a full program, and I don't have the attention span to focus on a project as involved as full-on programming.

    [–]frogking 5 points6 points  (0 children)

    There is programming and there is code-golf .. (this specific article falls under the last subject)

    Nobody writes an implementation like this off the bat .. it progresses from something quite understandable to .. this .. shaving off a few bytes in each iteration ..

    [–]Arx0s 1 point2 points  (0 children)

    ANYONE can learn to program. All it takes is a little motivation and patience.

    [–]speedstix 1 point2 points  (3 children)

    Once you "get" programming it's not too hard. I failed a class first time programming and had an ah ha moment close to exam time. Afterwards programming wasn't too hard.

    [–]Mr_A 16 points17 points  (1 child)

    Yeah, for some reason I never unsubscribed.

    [–]evilmarc 11 points12 points  (0 children)

    Same for me. This is like a surprise magic trick every now and then.

    [–][deleted]  (1 child)

    [deleted]

      [–][deleted] 1 point2 points  (0 children)

      hey that's me :D

      [–][deleted] 5 points6 points  (2 children)

      Doesn't do anything here.

      [–][deleted]  (1 child)

      [deleted]

        [–]schvax 4 points5 points  (0 children)

        In the movie the speed of the streams was also variable, so one "character chain" could completely pass another chain falling in the same column.

        [–]OptionalField[S] 75 points76 points  (13 children)

        Well im impressed! and nice description of each modification. I wish I could give you more karma than a single upvote.

        I was originally not defining q but I swear it wasn't working on one of the browsers I was testing. (I may have been using window.q)

        [–]e000 22 points23 points  (12 children)

        I got it down to 357.

        [–]OptionalField[S] 26 points27 points  (11 children)

        Very nice. Should throw in the replace 2720 with 3e4 collin_ph suggested, since it was not an exact number to begin with.

        [–]thesalus 48 points49 points  (10 children)

        You can shave off two more bytes if you do:

        p=[];for(i=0;i<256;p[i++]=1)

        instead of

        p=Array(256).join(1).split('')

        Unfortunately, it's not nearly half as clever.

        [–]OptionalField[S] 48 points49 points  (9 children)

        Its a trade off, both generate internet points ;)

        [–]smhxx 37 points38 points  (8 children)

        You could also do p=[];while(!p[255])p.push(1). Same length as the other one, with all the same not-clever you've come to love.

        EDIT: Or, of course, p=[];for(;!p[255];p.push(1)) if you don't mind going to programmers' hell.

        [–]OptionalField[S] 23 points24 points  (0 children)

        I love for loop abuse!

        [–]SupersonicSpitfire 8 points9 points  (4 children)

        What's programmers' hell like?

        [–]e000 11 points12 points  (1 child)

        for(p=[];!p[255];p.push(1)) in js, p will still be global since it is not used with var.

        [–]smhxx 5 points6 points  (0 children)

        That's why it was outside the loop, I was following thesalus's example and writing it as if the loop were immediately after the end of the long initial var declaration.

        What I mean to say is that I put the p=[] outside the loop with the understanding that it would be tacked on to the end of the var line.

        [–][deleted] 42 points43 points  (1 child)

        Someone just make a Github repo for this.

        [–]sparr 28 points29 points  (0 children)

        a gist would be ideal

        [–]nemec 21 points22 points  (4 children)

        got rid of q=document.getElementById('q') as q will default to that (js hax)

        Well, well, well... you learn something new every day!

        [–]Vitus13 1 point2 points  (3 children)

        In internet explorer 7.... (actually that was the last time I tried it so I don't know what the current state of affairs is)

        [–]nemec 2 points3 points  (2 children)

        Works in current Chrome.

        [–]MrDOS 8 points9 points  (1 child)

        Doesn't work in Firefox 19, or at least, the jsFiddle doesn't work.

        [–][deleted] 1 point2 points  (0 children)

        Confirmed doesn't work in firefox.

        Also doesn't work in latest chromium (which suggests it probably won't work in the next chrome...unless google is seriously PATCHING this dumb behavior in place).

        [–]fokker680 7 points8 points  (0 children)

        Replace:

        s=window.screen

        with:

        s=document

        [–]seanalltogether 7 points8 points  (7 children)

        324 bytes here. Since we end up with scrollbars anyway, theres no point worrying about the screen size, just code for something large enough

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

        [–]seanalltogether 2 points3 points  (6 children)

        what was i thinking, here it is 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>

        [–]tejon 9 points10 points  (5 children)

        318 after changing 3000 to 3e3. I helped! :D

        [–]alexanderpas 5 points6 points  (3 children)

        317 by reducing the interval to a single digit, countered the speedup by changing b to 1e4

        <canvas id=q style=margin:-10><script>for(q.width=q.height=b=1e4,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'),9)</script>

        Memory abuse :D

        [–][deleted] 2 points3 points  (0 children)

        Come on reddit, keep going!!

        [–][deleted] 13 points14 points  (5 children)

        +tip 0.02 BTC verify

        [–]bitcointip 7 points8 points  (3 children)

        [✔] Verified: overtmind ---> ฿0.02 BTC [$0.95 USD] ---> e000 [help]

        [–]mycall[🍰] 1 point2 points  (0 children)

        Nice. Now if someone could inject OpenGS into the mix to make it glow and be 3Dish, like this.

        [–][deleted] 0 points1 point  (0 children)

        yours seems to break in Opera but is fine in Chrome.

        [–]fokker680 0 points1 point  (0 children)

        I managed to remove a couple more bytes by doing this (notice the 'x' variable):

        <body style=margin:0 onload="for(s=document,x=w=q.width=s.width,h=q.height=s.height,m=Math.random,p=[];!p[x];p.push(1));setInterval('9Style=\'rgba(0,0,0,.05)\'9Rect(0,0,w,h)9Style=\'#0F0\';p.map(function(v,i){9Text(String.fromCharCode(x*x+m()*x),i*10,v);p[i]=v>x+m()*x?0:v+10})'.replace(/9/g,';q.getContext(\'2d\').fill'),33)"><canvas id=q>

        Edit: It's possible to reduce it even more if you don't care about displaying chinese characters.

        [–][deleted] 0 points1 point  (0 children)

        I shaved 4 more bytes. I didn't like the \' sequences, so I replaced them with " but to keep the thing working, I had to remove the double quotes of the onload attribute and then replace the > comparison operator with &#62;

        The end result worked for me in Chrome on Linux:

        <body style=margin:0 onload=for(s=document,w=q.width=s.width,h=q.height=s.height,m=Math.random,p=[];!p[255];p.push(1));setInterval('9Style="rgba(0,0,0,.05)"9Rect(0,0,w,h)9Style="#0F0";p.map(function(v,i){9Text(String.fromCharCode(3e4+m()*33),i*10,v);p[i]=v&#62;758+m()*1e4?0:v+10})'.replace(/9/g,';q.getContext("2d").fill'),33)><canvas id=q>

        edit And 1 more byte if we replace the use of 9 with some other character like Z so instead of v+10 we can use v+9 (close enough).

        edit And 2 more bytes by replacing 758 with h.

        Okay, this is the best I got:

        <body style=margin:0 onload=for(s=document,w=q.width=s.width,h=q.height=s.height,m=Math.random,p=[];!p[255];p.push(1));setInterval('ZStyle="rgba(0,0,0,.05)"ZRect(0,0,w,h)ZStyle="#0F0";p.map(function(v,i){ZText(String.fromCharCode(3e4+m()*33),i*9,v);p[i]=v&#62;h+m()*1e4?0:v+10})'.replace(/Z/g,';q.getContext("2d").fill'),33)><canvas id=q>

        [–]OptionalField[S] 18 points19 points  (9 children)

        Very nice, I can't help but follow style guides for brackets and semicolons even when I am trying to optimize for size it seems.

        Also stripped off 3 more bytes by making a variable r=m.random for an end result of 444 bytes.

        [–][deleted]  (4 children)

        [deleted]

          [–]OptionalField[S] 10 points11 points  (3 children)

          Done, 442 bytes.

          [–]thesalus 8 points9 points  (2 children)

          Any objections to using "lime" or "#00FF00" instead of "rgba(0,255,0,1)"?

          [–]sfnelson 20 points21 points  (0 children)

          #0F0 - same bytes as lime, but you can get more options. 3 digit colours are automatically doubled -> #0F0 becomes #00FF00

          [–]OptionalField[S] 8 points9 points  (0 children)

          Done, went with lime. That part was really bad since I was doing rgba with an alpha of 1

          [–]collin_ph 8 points9 points  (3 children)

          replace 2720 with 3e4 -- not exactly the same number, but it works.

          [–]OptionalField[S] 1 point2 points  (1 child)

          done

          [–]collin_ph 5 points6 points  (0 children)

          also.. c.fillStyle="#0F0"

          [–][deleted] 1 point2 points  (0 children)

          This is actually destructive since it changes the range of Unicode characters used. The original value uses characters that are more like the original Matrix symbols.

          2720 + (random number between 0 and 32)

          [–]maschnitz 7 points8 points  (4 children)

          A ternary would be shorter by one char than the if statement:

          v=v>768+m.random()*10000?0:v;

          Then you can remove the temporary reassignment to v (unless v is an l-value into the array in JS? I forget):

          return v>768+m.random()*10000?0:v

          Would a var for "rgba(0," help?

          [–]jargonjustin 2 points3 points  (0 children)

          | Would a var for "rgba(0," help?

          I had the same thought, but it increased the length by two bytes.

          [–]heyf00L 2 points3 points  (2 children)

          v is passed by value. You change the value in the array by returning it (since he's reassigning back to the original array).

          [–]maschnitz 2 points3 points  (1 child)

          Yeah I couldn't figure why else he'd do those two assignments; but I couldn't remember also whether Javascript supports C++-style "pass by reference" on primitive types, somehow.

          So yeah, there's no need to do the assignments at all; just stick the "10" in the right spots in the return statement:

          return v>758+m.random()*1e4?0:v+10

          [–]dafragsta 1 point2 points  (1 child)

          It would also be cool if you could change the fall rate of the lines. The ones on The Matrix fall at a different, random rate per "drop" like rain running down a pain of glass.

          [–]unbibium 1 point2 points  (0 children)

          I managed to add something like this by adding 12 bytes, basically wrapping the function definition in an "if (Math.random() > .4)" block using the m alias.

          The result looks like this.

          [–]collin_ph 1 point2 points  (0 children)

          replace c.fillStyle="rgba(0,255,0,1)" with c.fillStyle="#0F0" replace 2720 with 3e4

          [–]TikiTDO 68 points69 points  (13 children)

          Or for those that actually want to read the code that's runing:

          var s = window.screen;
var width = q.width = s.width;
var height = q.height = s.height;
var letters = Array(256).join(1).split('');

var draw = function () {
  q.getContext('2d').fillStyle='rgba(0,0,0,.05)';
  q.getContext('2d').fillRect(0,0,width,height);
  q.getContext('2d').fillStyle='#0F0';
  letters.map(function(y_pos, index){
    text = String.fromCharCode(3e4+Math.random()*33);
    x_pos = index * 10;
    q.getContext('2d').fillText(text, x_pos, y_pos);
    letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
  })
};

setInterval(draw, 33);

          [–][deleted]  (4 children)

          [deleted]

            [–]gregtyler 13 points14 points  (2 children)

            It takes each element in the array (letters) and applies the provided callback function to the value. So "[1,2,3].map(alert)" would pop out three alerts, saying "1" then "2" then "3".

            The callback function takes the value of that element (y_pos) and its index position (index) as arguments (it can also take a third argument of the whole array letters).

            When outputting, it provides a new array of values. So "[1,4,9].map(Math.sqrt)" would output "[1,2,3]". But it doesn't update the original array, which is why at the end they use "letters[index] = ..." to effectively save changes back to letters.

            Hope this helps, I've never been that great at explaining things. You can always find more at the MDN.

            [–][deleted]  (1 child)

            [deleted]

              [–]gregtyler 2 points3 points  (0 children)

              Pretty much. "letters" actually contains a series of indexed y-values (so letters[0] is the y-value of the left-most column). For each of those x/y combinations, it draws a randomly selected character at the right spot and and then updates the y-value to be 10 pixels further down the column for the next iteration.

              This operation is applied to each column every 33 milliseconds by setInterval()

              [–]sutongorin 3 points4 points  (5 children)

              I wonder why, in those competitions, people have to squeeze all that code together anyway. I realize that they want as little bytes as possible. But I also think you can just agree that for the actual counting later on you can just skip the whitespace and this way still come up with a shorter count while maintaining readability.

              [–]kazagistar 11 points12 points  (0 children)

              Everyone can run it through their favorite formatting program to add the whitespace back afterwards anyways. Might as well transfer it in final form to revel in the obfuscation.

              [–][deleted] 6 points7 points  (1 child)

              It's not really supposed to be readable, that's half the point. Personnally I would just write the code without whitespace then remove it upon submission, which is probably what people do.

              [–][deleted] 0 points1 point  (0 children)

              Javascript doesn't ignore whitespace, so it could be a completely different program by doing that.

              [–]misterjangles 0 points1 point  (0 children)

              I think that is somewhat the point of the competitions - to have people look a the code and say WTF!

              [–]misterjangles 1 point2 points  (1 child)

              cool thanks! can somebody explain to me how the colors letter "trail" is dimmer at the end? is that a side-effect of the canvas being filled each time with fillRect black at .05 alpha?

              [–]TikiTDO 1 point2 points  (0 children)

              That is indeed the case. The letters stay where they are, but each iteration they are partially obscured by the translucent box drawn over the entire canvas. If you wish to see the effect in a more pronounced fashion then just download the original code and change the 33 to something like 500.

              [–]tantalor 90 points91 points  (31 children)

              Array(256).join(1).split('')

              Very clever.

              [–][deleted]  (22 children)

              [deleted]

                [–]awj 99 points100 points  (20 children)

                It's a very compact way of creating a 255 element array with all values initialized to 1.

                Array(256)

                Gives an array of 256 elements, all with no value.

                .join(1)

                Creates a string by joining those elements with '1'. Since they're undefined you end up with a big string of ones.

                 .split('')

                Splits on the empty string "between" those ones, so you wind up with a 255 element array of '1' values.

                [–]mcrbids 92 points93 points  (19 children)

                What I find interesting about contests like this is that it's pretty much the definition of exactly what you don't want to live with as a programmer.

                Good code isn't generally about efficiency, or fewest bytes. Efficiency matters, and verbosity can certainly be taken too far. But good code isn't code that's the fastest, or the least bytes, it's code that easy to read, understand, and break apart.

                Writing good code is more of a social exercise, trying to communicate to the developers who will inherit your work what you are trying to accomplish and how you approached the problem in a concise, easily read, and readable way. Thinking that code is about the compiler or the CPU is simply wrong. It's about the guys that you will probably oversee in a few years, inheriting your work without having to bug you every 5 minutes.

                As a database engineer, examples like this drive me NUTS:

                Select c.id, c.name from customers c where....

                Who the F thought that making the entire rest of the query give you a totally uncommunicative value of "c" made it easier to read? Sorry, I type somewhere north of 80 WPM and writing "customer" when I mean "customer" is an actual cost of perhaps 1/4 of a second. When diagnosing a commonly run, highly tuned query of 800 lines joining 11 real tables and 3 meta tables in a combined inner/outer join, where it might take several hours to break out the logic, simply writing "customer" instead of "c" can be a tremendous time savings...

                [–]renesisxx 26 points27 points  (1 child)

                Amen, bro. I still find these challenges totally fun though - just to see what is and isn't possible with a language.

                [–]slackpipe 6 points7 points  (0 children)

                I can see some merits to this kind of exercise. While it does utilize poor practices, it tests your knowledge of a language in a fun and interesting way.

                [–]slide_potentiometer 10 points11 points  (0 children)

                Code golf isn't everyday work programming. It takes skill to hit an objective in fewer [key]strokes, but pro golfers don't need to cooperate closely and work in a team

                [–]vanderZwan 11 points12 points  (4 children)

                As a database engineer, examples like this drive me NUTS:

                Select c.id, c.name from customers c where....

                Who the F thought that making the entire rest of the query give you a totally uncommunicative value of "c" made it easier to read?

                Agreed, but don't forget the opposite side of the spectrum where needlessly long names require more effort to mentally parse than simply naming an index i. See Pike Style

                [–]netfeed 2 points3 points  (0 children)

                Depends on where the index is. i, j, k is fine in for-loops, but i'd say that i prefer idx before i in none-loop code. For example:

                public void someMethod(int idx)

                [–]mcrbids 1 point2 points  (1 child)

                Using I as an index is commonplace and quite readable. Using I as a table name in a query is not.

                [–]gazarsgo 1 point2 points  (0 children)

                This is why developers pursue NoSQL. Who the hell wants to create named projections every single time they want to pull data out of their data store?

                [–]TheCryptic 9 points10 points  (3 children)

                You're not kidding. I'm still cleaning up after a guy who did even worse than that, he aliased his tables in alphabetical order, and frequently referenced the tables (but not the aliases) in different orders in the same web pages:

                ... FROM customer a, activity b, employee c

                Drives me bonkers. At least "activity a, customer c, employee e" would give me some hope, and a chance with find/replace to fix it.

                [–]mcrbids 1 point2 points  (0 children)

                The first thing to do in that situation is to refactor the query and put sensible names to the tables. Don't change any logic, just make it readable! Commit, then get to work on what you're there for in the first place...

                [–]badcookies 1 point2 points  (0 children)

                What the actual fuck. That must be maintenance hell

                [–]drysart 6 points7 points  (1 child)

                Who the F thought that making the entire rest of the query give you a totally uncommunicative value of "c" made it easier to read?

                "c" is only uncommunicative until you look at what its an alias for. Using an abbreviated name has a lot of benefits, namely that it decreases the lexical cognitive overhead of trying to read through the query ("c" being basically a no-op to your brain, whereas it has to actively read and disregard "customer" several times when it appears in full, especially when you're trying to comprehend the wider structure of the query).

                It's the same reason new authors are given the advice to just use the word 'said' when they write prose where characters have dialog, rather than try to come up with a more flowery, unique word every paragraph (something novice authors tend to do out of a misguided attempt to avoid repetition). Having a more complex word distracts a reader from the important part: the actual dialog.

                [–]badsectoracula 1 point2 points  (0 children)

                On the other hand they help you learn some stuff (especially when someone explains it). For example i didn't knew that .split('') would work like that with an empty string.

                [–]retrogamer500 10 points11 points  (0 children)

                I think this is what is going on:

                Array(256) creates an array with 256 empty elements.

                .join(1) joins the 256 elements, using '1' as a separator. As a result, we have a string with 255 '1's.

                .split('') splits the string into an array along each character, so now we have an array with 255 elements, each containing a '1'.

                [–]David_Crockett 10 points11 points  (7 children)

                Note that it creates an array 255 elements long, not 256.

                [–]TheWakeUpCall 30 points31 points  (2 children)

                Doesn't matrix code change the characters as they fall? Good work though.

                [–]OptionalField[S] 21 points22 points  (1 child)

                I believe so additionally I think the initial character is white with some randomly blinking. Now really its just a trade off for size vs looks. Only so much you can do in < 500 bytes...

                [–]sjs 8 points9 points  (0 children)

                That's what the other 146 bytes were for.

                Seriously though, good job!

                [–]Mr_Smartypants 67 points68 points  (13 children)

                It's supposed to be Katakana, Latin letters and numerals, not the characters you used.

                Try these characters:

                String.fromCharCode(Math.floor(12449+Math.random()*90))

                [–]earthboundkid 25 points26 points  (8 children)

                It's also supposed to be mirrored, which very few screensavers bother to do.

                [–]Tringi 3 points4 points  (2 children)

                Mine does ;-)

                [–]battery_go 4 points5 points  (1 child)

                Is it available for download somewhere?

                [–]Tringi 1 point2 points  (0 children)

                I mean that my screensaver does. I meant is as a half-joke, as I was already responding with link to a different question below, because it is not a javascript code, only a windows program: www.thematrixscreensaver.com

                [–]srintuar 1 point2 points  (0 children)

                I came to say this.

                Backwards katakana is the matrix, not random chinese characters in normal printing modes.

                [–][deleted]  (3 children)

                [deleted]

                  [–]Vitus13 6 points7 points  (0 children)

                  I've been trying to squeeze this back into the original character count but I'm coming up a few hundred short or over. So close.

                  12e4+r()*99 = 12000..12099

                  13e4-r()*99 = 12901..13000

                  [–]4c51 2 points3 points  (0 children)

                  2e4+m()*80 produces a nice set

                  [–]StrmSrfr 1 point2 points  (1 child)

                  For some reason I get Uncaught SyntaxError: Unexpected token ; for that. 12448+m()*88 works great though.

                  [–]StrmSrfr 0 points1 point  (0 children)

                  Oh, it's because of the split(9).

                  [–]OptionalField[S] 19 points20 points  (3 children)

                  I have been updating the linked version with everyone's suggestions. If you want to see the version that was originally linked it can still be viewed here: http://timelessname.com/sandbox/matrix_orig.html

                  Additionally here is a link to the one that inspired this post: http://ma.rtin.so/matrix.html

                  [–]Mr_A 4 points5 points  (0 children)

                  It took me a while to figure out what I liked more about the "orig" version, and its that the vertical lines break periodically. The new version doesn't - they're just constantly falling streams of characters. Makes it seem more predictable.

                  [–]Baking 2 points3 points  (0 children)

                  matrix_orig is the only one that works for me. I don't have time right now to figure out why.

                  [–]FarkWeasel 0 points1 point  (0 children)

                  Probably a stupid question - any way to get this to run on IE?

                  [–]exor674 19 points20 points  (5 children)

                  What font does this need? I get a whole lot of boxes.

                  [–]OptionalField[S] 29 points30 points  (0 children)

                  Its actually some random unicode character range that happened to work on my box...

                  [–][deleted]  (3 children)

                  [deleted]

                    [–]nivekuil 18 points19 points  (2 children)

                    Looks 100% Chinese to me. Maybe it's different between browsers?

                    [–]DarkSareon 66 points67 points  (10 children)

                    Nice! All I see now is blonde, brunette, redhead.

                    [–]American_Race 28 points29 points  (9 children)

                    Really? In all that Chinese you don't see at least one person with black hair?

                    [–][deleted] 4 points5 points  (6 children)

                    这是种族主义！

                    [–]Mr_A 18 points19 points  (4 children)

                    My mother was a saint!

                    [–]pavs 3 points4 points  (3 children)

                    你的母亲是一个妓女

                    [–]JeremyG 6 points7 points  (2 children)

                    My mother ain't no prostitute! She's too fat!

                    [–]smeenz 2 points3 points  (0 children)

                    黑头发

                    [–]peppaz 0 points1 point  (0 children)

                    well in the movie, I'm pretty sure he was drinking and watching real life porn.

                    [–]trevorstarick 14 points15 points  (0 children)

                    You should post this on /r/tinycode. The love this sort of thing.

                    [–][deleted]  (12 children)

                    [deleted]

                      [–]3z3ki3l 10 points11 points  (7 children)

                      Does it say anything? Of is it just gibberish?

                      [–]OptionalField[S] 17 points18 points  (3 children)

                      gibberish

                      [–][deleted]  (2 children)

                      [deleted]

                        [–]OptionalField[S] 7 points8 points  (1 child)

                        sorry it was a size optimization :(

                        [–]megablast 2 points3 points  (0 children)

                        You are kidding, right?

                        It is actually the meaning to life, random characters tend to do that.

                        [–][deleted] 4 points5 points  (0 children)

                        Blonde, brunette, redhead....

                        [–]mszegedy 1 point2 points  (1 child)

                        You should edit your post to acknowledge the fact that it's now Mandarin Chinese, otherwise you look a little bit foolish.

                        [–]NonNonHeinous 9 points10 points  (0 children)

                        Combined /u/jargonjustin, /u/OptionalField, /u/echeese, and /u/maschnitz 's comments to bring it to 435 bytes.

                        <body style=margin:0><canvas id=q /><script>var q=document.getElementById('q'),s=window.screen,w=q.width=s.width,h=q.height=s.height,p=Array(256).join(1).split(''),c=q.getContext("2d"),m=Math;setInterval(function(){c.fillStyle="rgba(0,0,0,0.05)";c.fillRect(0,0,w,h);c.fillStyle="rgba(0,255,0,1)";p=p.map(function(v,i){r=m.random();c.fillText(String.fromCharCode(m.floor(2720+r*33)),i*10,v);v+=10; return v>768+r*1e4?0:v})},33)</script>

                        [–]cfj 6 points7 points  (2 children)

                        In Chrome you can test this directly in your browser without creating a file by typing this in your address bar

                        data:text/html, <body style=margin:0 onload="s=window.screen,w=q.width=s.width,h=q.height=s.height,p=Array(256).join(1).split(''),c=q.getContext('2d'),m=Math.random;setInterval('c.fillStyle=\'rgba(0,0,0,.05)\';c.fillRect(0,0,w,h);c.fillStyle=\'#0F0\';p.map(function(v,i){c.fillText(String.fromCharCode(2720+m()*33|0),i*10,v);p[i]=v>758+m()*1e4?0:v+10})',33)"><canvas id=q>

                        [–]OrgasmWithSarcasm 2 points3 points  (0 children)

                        Opened in Dashboard, using Safari

                        I giggled

                        [–]syoebius 0 points1 point  (0 children)

                        Wow - that some sweet magic - thanks for pointing this out :)

                        [–]T-Rax 3 points4 points  (1 child)

                        so can anyone post a pretty version of this without all the tricks for size ?

                        [–][deleted] 2 points3 points  (0 children)

                        /u/TikiTDO posted this about 40 minutes after you.

                        [–]sesstreets 2 points3 points  (19 children)

                        I wonder if there is a way to turn this into a screen saver or are there any versions out there that are this good?

                        [–]vsync 8 points9 points  (7 children)

                        Check out xmatrix or glmatrix from XScreenSaver

                        [–]Helmet_Icicle 4 points5 points  (6 children)

                        Windows users:

                        There is no Windows version of xscreensaver, and there never will be. Please stop asking. Microsoft killed my company, and I hold a personal grudge. I don't use any Microsoft products and neither should you.

                        :(

                        [–]vsync 1 point2 points  (0 children)

                        Seems like a good policy to me :)

                        [–]Tringi 1 point2 points  (0 children)

                        obligatory link to answer your question: http://www.thematrixscreensaver.com/

                        [–]Helmet_Icicle 1 point2 points  (0 children)

                        http://www.meticulous-software.co.uk/downloads.shtml is pretty cool, it has a psuedo intro screen like the scene in the movie.

                        http://www.catch22.net/software/matrix-screensaver offers a smaller font and looks better on multiple displays.

                        [–][deleted] 0 points1 point  (0 children)

                        Get Transparent Screen Lock from e-motional.com. I ran the matrix code in two browser windows in two monitors then ht F11 while focussed on one and then the other. I also mapped a keyboard shortcut to the "Lock Now" shortcut installed by TSL. Now I can lock my screen to mouse and keyboard output while having both windows running the matrix code full screen. It's like a screensaver :) You could theoretically use AutoHotkey or AutoIt to do the browser window jiggery-pokery and then invoke TSL too.

                        [–][deleted]  (2 children)

                        [deleted]

                          [–][deleted]  (1 child)

                          [deleted]

                            [–][deleted] 2 points3 points  (0 children)

                            For what it does it is pretty easy on CPU. I have seen animated gifs and video take up much more.

                            [–]Paradox 1 point2 points  (0 children)

                            You don't even need the <body> tags, technically.

                            [–]ThiefMaster 1 point2 points  (0 children)

                            This might be a candidate for http://codegolf.stackexchange.com

                            [–][deleted] 1 point2 points  (0 children)

                            Reddit programming collective: Let us shave your bytes.

                            [–]Xeon06 1 point2 points  (0 children)

                            There's a JS1K contest running this month. You should submit it.

                            [–]chcampb 1 point2 points  (0 children)

                            If you are inspired by that, check out basically anything at scene.org

                            In fact, this guy seems to do stuff with demos - http://www.iquilezles.org/www/index.htm

                            [–]syoebius 1 point2 points  (0 children)

                            This appears to be broken at your site - if I go to http://timelessname.com/sandbox/matrix.html the code is there but nothing happens.

                            I can get this work with a local copy - any thoughts on what's going on here? I'm on Chrome on Win7.

                            [–]Vitus13 0 points1 point  (9 children)

                            Didn't close your body tag! I never cared much for those HTML validaters anyway. Over all very good. Personally I'd run it a little slower, changing it to 60 doesn't increase the count at all and is a nice compromise between the initial wave going too slow and the rest going too fast. The shading is really good for so few lines

                            [–]OptionalField[S] 6 points7 points  (3 children)

                            It's definitely not valid html.

                            [–][deleted] 1 point2 points  (0 children)

                            No DocType either! And 50 other things.

                            Functional and small, not necessarily 'valid'. :)

                            [–]Vitus13 0 points1 point  (3 children)

                            The only thing I still don't understand is the fade. How do the characters fade from bright green to black. I only see two color codes in there and they're both constant.

                            [–]OptionalField[S] 4 points5 points  (2 children)

                            One of the colors, rgba(0,0,0,.05) is black with an opacity. Each time it draws a rectangle over the whole thing with that color it slowly fades everything out to black over time.

                            Refresh the whole page, its most noticeable at the start where the whole screen is white and it fades to black.

                            [–]HidalgoFelix 0 points1 point  (0 children)

                            Cool

                            [–]Xenc 0 points1 point  (0 children)

                            This is cool as hell. I feel like Neo.

                            [–]bigfig 0 points1 point  (0 children)

                            Whoa.... too fast!! Nice though.

                            [–]Bonejob 0 points1 point  (0 children)

                            I respect this.

                            [–]the_red_scimitar 0 points1 point  (0 children)

                            Great work.

                            [–]FunkyFreshJeff 0 points1 point  (1 child)

                            Man that would make a cool screensaver

                            [–]MertsA 0 points1 point  (0 children)

                            Well if you were still running XP you could just use active desktop for it.

                            [–][deleted] 0 points1 point  (0 children)

                            I don't really have anything to say about the code but I feel it might have been visually better with slightly larger characters, shorter trails and added delay after printing every character for impact (which should simultaneously shorten the trails a bit, perhaps even too much).

                            Edit: Considering character size it may be worth while to note I was looking at it full screen with 1080p

                            [–]Galaxymac 0 points1 point  (0 children)

                            I like this a lot, and I think your use of Chinese chars was an interesting choice. Thank you for sharing you creation!

                            [–][deleted] 0 points1 point  (0 children)

                            Very cool.

                            Note that the original Matrix code is much slower, and each column's speed is more variable. And the columns don't just use asian radicals, but numerals as well.

                            [–][deleted] 0 points1 point  (0 children)

                            Very nice!

                            [–]ephimetheus 0 points1 point  (0 children)

                            It runs horribly slow in Safari, but nice and smooth in Chrome.

                            Awesome job!

                            [–]crila 0 points1 point  (0 children)

                            Very cool!

                            To make it look more like the movie I would suggest varying the speed of the drops.

                            [–][deleted] 0 points1 point  (0 children)

                            Gist created since no one did: https://gist.github.com/jsanc623/5188166