disco-tile.js

function() {
    // LCG courtesy of <https://gist.github.com/Protonk/5389384>
    let m = Math.pow(2, 24), a = 16598013, c = 12820163, z = 3;
    function rand() {
      return z = (a * z + c) % m / m;
    }

    function ancestors(elem:HTMLElement) {
      let ancestors = [];
      while(elem) {
        ancestors.push(elem);
        elem = elem.parentElement;
      }
      return ancestors;
    }
    function distance(aAncestors:any[], bAncestors:any[]): number {
      let aIx = 0;
      for(let a of aAncestors) {
        let bIx = bAncestors.indexOf(a);
        if(bIx !== -1) return Math.max(aIx, bIx);
        aIx++;
      }
      return Infinity;
    }

    let disco = setInterval(function() {
      let elems = <HTMLElement[]>[].slice.apply(document.querySelectorAll("*:not(.CodeMirror) .entity"));
      let prev;
      let hue, saturation, lightness, transition;
      for(let elem of elems) {
        let dist = distance(ancestors(elem), ancestors(prev)) + 1;
        prev = elem;
        if(dist > 5) {
          let seed = +elem.getAttribute("data-disco-seed");
          if(seed) z = seed;
          else elem.setAttribute("data-disco-seed", ""+z);
          hue = 240 + Math.floor(rand() * 80) - 40;
          transition = 4 + Math.floor(rand() * 3);
          saturation = Math.floor(333 + rand() * 400 - 200) / 10;
          lightness = Math.floor(500 + rand() * 600 - 300) / 10;
        }

        saturation += Math.floor(Math.random() * 40 * dist - 20 * dist) / 10;
        lightness += Math.floor(Math.random() * 30 * dist - 15 * dist) / 10;

        if("" + window.getComputedStyle(elem, null).getPropertyValue("background-color") != "rgba(0, 0, 0, 0)")
          elem.style.background = `hsla(${hue}, ${saturation}%, ${lightness}%, 1)`;
        if(!elem.style.transition)
          elem.style.transition = `background ${transition}s`;
      }
      //clearInterval(disco);
    }, 1000);
  }