gistfile1.js

(function () {
  const canvas = document.createElement('canvas');

  canvas.style = 'position: fixed; top: 0; right: 0; z-index: -100;'


  // const canvas = document.getElementById('background');

  function charRange(start, len) {
    let chars = [];
    for (let i = 0; i < len; i++) {
      chars.push(String.fromCharCode(start + i));
    }
    return chars;
  };

  const CHARS = charRange(0xFF66, 56).concat('&?01234567890'.split(''));
  // const CHARS = charRange(0x30A0, 96);

  const CHARS_LEN = CHARS.length;
  const GRID = 24;
  const GRID_X = 14;

  const width = canvas.width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  const height = canvas.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

  const bottom = height * 0.7;

  const cols = Math.ceil(width / GRID_X);

  console.log(cols);

  const ctx = canvas.getContext('2d');
  let letters = new Array(cols);
  let speeds = new Array(cols);

  ctx.font = `${GRID}px courier`;

  letters = letters.fill(1).map(() => - Math.round(Math.random() * height));

  speeds = speeds.fill(1).map(() => 3 + Math.round(Math.random() * GRID / 4));

  let last = Date.now();

  function calcYPos(y) {
    return Math.round(y / GRID) * GRID;
  }

  function draw() {
    const now = Date.now();
    const delta = (now - last) / 32;
    last = now;

    ctx.fillStyle = 'rgba(0,0,0,.03)';
    ctx.fillRect(0, 0, width, height);

    ctx.fillStyle = '#00FF00';

    letters.forEach(function(prevY, index){
      const char = CHARS[Math.floor(Math.random() * CHARS_LEN)]

      const x = index * GRID_X;
      const y = (prevY > bottom + Math.random() * 1e4) ? 0 : prevY + (speeds[index] * delta);

      if (calcYPos(prevY) !== calcYPos(y)) {
        ctx.fillText(char, x, calcYPos(y));
      }
      letters[index] = y;
    });
  };

  document.body.appendChild(canvas);

  function loopsy() {
    draw();
    requestAnimationFrame(loopsy);
  }
  loopsy();
})();