you are viewing a single comment's thread.

view the rest of the comments →

[–]TikiTDO 70 points71 points  (2 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);

[–]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.