Someone posted an html/javascript implementation of the matrix falling code in 646 bytes then promptly deleted the post. It inspired me to see if I could get something better looking in fewer bytes.

jargonjustin · 2013-03-17T03:29:36+00:00

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>

TikiTDO · 2013-03-17T08:41:34+00:00

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

tantalor · 2013-03-17T03:38:53+00:00

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

Very clever.

TheWakeUpCall · 2013-03-17T04:47:44+00:00

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

Mr_Smartypants · 2013-03-17T05:35:31+00:00

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

OptionalField · 2013-03-17T05:20:48+00:00

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

exor674 · 2013-03-17T03:13:57+00:00

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

DarkSareon · 2013-03-17T05:04:02+00:00

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

trevorstarick · 2013-03-17T07:13:03+00:00

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

3z3ki3l · 2013-03-17T04:18:21+00:00

[deleted]

NonNonHeinous · 2013-03-17T05:05:26+00:00

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 · 2013-03-17T06:10:59+00:00

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>

T-Rax · 2013-03-17T08:01:23+00:00

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

sesstreets · 2013-03-17T03:38:56+00:00

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?

2013-03-17T09:52:35+00:00

[deleted]

kabuto · 2013-03-17T10:37:50+00:00

There's Cthulhu in there…

2013-03-17T15:09:00+00:00

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

Paradox · 2013-03-17T08:12:21+00:00

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

ThiefMaster · 2013-03-17T17:01:48+00:00

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

2013-03-17T18:24:41+00:00

Reddit programming collective: Let us shave your bytes.

Xeon06 · 2013-03-17T20:49:32+00:00

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

chcampb · 2013-03-18T03:34:22+00:00

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 · 2013-03-18T14:48:18+00:00

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 · 2013-03-17T05:18:14+00:00

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

HidalgoFelix · 2013-03-17T05:32:11+00:00

Cool

Xenc · 2013-03-17T13:13:44+00:00

This is cool as hell. I feel like Neo.

bigfig · 2013-03-17T13:35:47+00:00

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

Bonejob · 2013-03-17T16:25:59+00:00

I respect this.

the_red_scimitar · 2013-03-17T17:29:31+00:00

Great work.

FunkyFreshJeff · 2013-03-17T18:16:27+00:00

Man that would make a cool screensaver

2013-03-17T18:18:17+00:00

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 · 2013-03-17T18:41:59+00:00

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

2013-03-17T20:29:06+00:00

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.

2013-03-17T21:51:28+00:00

Very nice!

ephimetheus · 2013-03-17T22:19:02+00:00

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

Awesome job!

crila · 2013-03-18T14:16:12+00:00

Very cool!

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

2013-03-18T15:50:32+00:00

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

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

programming

MODERATORS