showcasing graphical non-performance using DOM manipulation

matrix_nocanvas.js

// https://css-tricks.com/snippets/javascript/async-script-loader-with-callback/
var Loader = function () { };
Loader.prototype = {
  require: function (scriptURLs, callback) {
    this.loadCount      = 0;
    this.totalRequired  = scriptURLs.length;
    this.callback       = callback;

    for (var i = 0; i < scriptURLs.length; i++) {
      this.writeScript(scriptURLs[i]);
    }
  },
  loaded: function (evt, src) {
    this.loadCount++;
    console.log('Loaded script #' + this.loadCount + ' = ' + src)
    if (this.loadCount == this.totalRequired && typeof this.callback == 'function') {
      console.log('callback')
      this.callback.call();
    }
  },
  writeScript: function (src) {
    var self = this;
    var newscript = document.createElement('script');
    newscript.type = 'text/javascript';
    newscript.async = false;
    newscript.src = src;
    newscript.addEventListener('load', function (e) { self.loaded(e, src); }, false);
    (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
  }
};

var generateLetter = function () {
  var charCode = _.random(33,126);
  return String.fromCharCode(charCode);
};

var addCharDiv = function (x, y, L) {
  var newCharDiv = document.createElement('div');
  newCharDiv.classList.add('L');
  newCharDiv.style.position = 'absolute';
  newCharDiv.style.left = x;
  newCharDiv.style.top = y;
  newCharDiv.dataset.step = 1;
  newCharDiv.dataset.length = L;
  newCharDiv.innerText = generateLetter();
  el_body.appendChild(newCharDiv);
};

var step = function () {
  var clientArea_px = document.documentElement.clientHeight * document.documentElement.clientWidth;
  //var el_body = document.getElementsByTagName('body')[0];
  var fontSize = parseFloat(window.getComputedStyle(el_body,null).getPropertyValue('font-size'));
  var charOffset = Math.ceil(fontSize * 1.1);
  var maxLength = Math.floor(document.documentElement.clientHeight / charOffset);
  var charSize = Math.pow(charOffset, 2);
  var charCount = Math.ceil(clientArea_px / (charSize * window.letterDuration * maxLength) * window.density);
  var xSpace = document.documentElement.clientWidth - (2 * charOffset);
  var ySpace = document.documentElement.clientHeight - (2 * charOffset);

  var tooOld = window.letterDuration + 1;
  jQuery('[data-step="' + tooOld + '"]').remove();

  jQuery('div.L')
  .each(function (i, elm) {
    elm = jQuery(this);
    var nextStep = parseInt(elm.attr('data-step')) + 1;
    elm.attr('data-step', nextStep);
    elm.css('opacity', (1 - (nextStep / window.letterDuration)) );

    var length = parseInt(elm.attr('data-length'));
    var x = parseInt(elm.css('left'));
    var y = parseInt(elm.css('top'));
    if (nextStep == 2 && length > 0) {
      if (y < ySpace) {
        addCharDiv(x, y + charOffset, length - 1);
      } else {
        addCharDiv(x, 0, length - 1);
      }
    }
  });

  for (var i = charCount; i > 0; i--) {
    addCharDiv(_.random(xSpace), _.random(ySpace), _.random(maxLength-1));
  };
};

var run = function () {
  var ms = Math.round(1000 / window.FPS);
  window.runInterval.push(setInterval(step, ms));
};

var stop = function () {
  clearInterval(window.runInterval.pop());
};

var prep = function () {
  // when finished loading
  console.log('All Scripts Loaded');
  jQuery('body').css('background-color','black').css('color','#00ff00');
  jQuery(document).keyup(function (e) {
    e.preventDefault();
    //var keyCode = e.which;
    //console.log(e.which);
    switch(e.which) {
      case 13 : // enter
        run();
        break;
      case 27 : // escape
      case 35 : // end
        stop();
        break;
      case 46 : // delete
        jQuery('body').empty();
        break;
      case 32 : // space
      case 107 : // + numpad
      case 187 : // =+
        step();
        break;
    }
  });
};

var el_body = document.getElementsByTagName('body')[0];
window.runInterval = [];

window.density = 0.01;
window.letterDuration = 5;
window.FPS = 16;

new Loader().require(
  ['https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js',
    //'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery.min.js',
   'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'],
  prep
);

/* Watch DOM manipulation graphical performance slow by comparing a density of 0.01 to a density of 1.0. */