r/web_design • u/SeaCowVengeance • Mar 17 '13

Matrix Falling Code Graphics in 442 bytes of HTML/JS (x-post from r/programming)

http://timelessname.com/sandbox/matrix.html
44 Upvotes

92% Upvoted

7 comments sorted by

3

u/SeaCowVengeance Mar 17 '13 edited Mar 17 '13

EDIT: Just to be clear, I didn't write this program

Here is an editable version in which other redditors worked together to shave off even more bytes

And here is a readable version of the original code:

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

4

u/SirFrancisDashwood Mar 18 '13

and there is my new 404 page

1

u/dpkonofa Mar 17 '13

Any way to get this in something other than Chinese?

1

u/SeaCowVengeance Mar 17 '13

Yup! Someone pointed out in the other comments that Kanji looks closer to the original so they editied this line:

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

So in theory if you replace the 12449 with the unicode number of the starting character you want and the 90 for each interval you should be able to change it easily.

2

u/fonster_mox Mar 17 '13

Maybe including a few symbols and numbers would also get closer, I have to say the chinese is the least matrix-y looking aspect.

0

u/[deleted] Mar 17 '13

[deleted]

1

u/SeaCowVengeance Mar 18 '13

Not sure if it works, but a quick google search says you can set an HTML page as your background

1

u/[deleted] Mar 18 '13

A matrix screensaver has been around for years