animated header of my blog

main.js

(function(){

if(!document.createElement('canvas').getContext) return; // canvas is required.

  var requestAnimFrame = (function(){
    return  window.requestAnimationFrame       || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame    || 
            window.oRequestAnimationFrame      || 
            window.msRequestAnimationFrame     || 
            function( callback ){
              window.setTimeout(callback, 1000 / 60);
            };
  })();

  var canvas = document.createElement("canvas");
  canvas.height = 100;
  canvas.width = 1000;
  canvas.className = "visualizer";

  var header = document.querySelector("body > header");
  header.appendChild(canvas);

  var ctx = canvas.getContext("2d");

  var mousex, mousey;
  
  function resize () {
    var r = header.getBoundingClientRect();
    var w = r.width;
    if (canvas.width != r.width) {
      canvas.width = r.width;
    }
    if (canvas.height != r.height) {
      canvas.height = r.height;
    }
  }

  window.addEventListener("resize", function (e) {
    resize();
  });
  resize();


  window.addEventListener("mousemove", function (e) {
    var o = header.getBoundingClientRect();
    mousex = e.clientX + window.scrollX - o.left;
    mousey = e.clientY + window.scrollY - o.top;
  });

  function constraint (min, max, value) { return Math.max(min, Math.min(max, value)) }
  function smoothstep (min, max, value) { return Math.max(0, Math.min(1, (value-min)/(max-min))); }
  function ellipse (x, y, w, h) { return x*x*w + y*y*h; }

  var width = 1000;
  var height = 90;
  var W = 100;
  var H = 9;
  var DIST1 = 300 * 300;
  var DIST2;


  var w, h;
  var start = +new Date();
  var t;
  function onRender() {
    t = +new Date()-start;
    w = width/W;
    h = height/H;
    DIST2 = 80 + 60 * Math.sin( (+new Date() - start) / 500 );
    DIST2 *= DIST2;
  }

  function getRadiusFor (x, y) {
    var ax = (x+.5)*w;
    var ay = (y+.5)*h;

    var mouse = smoothstep(0, 1, 1- ellipse(ax-(mousex || W/2), ay-(mousey || H/2), 1, 1)/DIST1);
    var curve1 = smoothstep(0, 1, 1-2*Math.abs(smoothstep(0, H, y+(0.5+Math.cos(x/5+t/200)))-0.5));
    var undertext = Math.max(0, Math.min(1, 1-ellipse(ax-130, ay-50, 1, 3)/DIST2));

    return w * Math.max(0, 0.3*mouse + 0.4*curve1 + -0.5*undertext);
  }

  var VARIATION_R = 10;
  var VARIATION_G = 20;
  var VARIATION_B = 30;

  var CYCLE_R = 2*Math.PI/(13000+Math.random()*4000);
  var CYCLE_B = 2*Math.PI/10000;
  var CYCLE_G = 2*Math.PI/5000;

  function getColor (bg) {
    var r = 50, g = 110, b = 150;

    r += VARIATION_R*(1+Math.cos(t*CYCLE_R));
    g += VARIATION_G*(1+Math.cos(t*CYCLE_G));
    b += VARIATION_B*(1+Math.sin(t*CYCLE_B));

    if (!bg) {
      var incr = 20;
      if (t%5000 < 1000)
        incr += 50*smoothstep(0, 100, t%100);
      r += incr; g += incr; b += incr;
    }

    r = Math.floor(constraint(0, 255, r));
    g = Math.floor(constraint(0, 255, g));
    b = Math.floor(constraint(0, 255, b));
    return 'rgb('+r+','+g+','+b+')';
  }

  function render () {
    if (!(window.scrollY < 140)) return;
    onRender();
    ctx.fillStyle = getColor(true);
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = getColor(false);
    for (var x = 0; x < W; ++x) {
      for (var y = 0; y < H; ++y) {
        var radius = getRadiusFor(x, y);
        ctx.beginPath();
        ctx.arc((x+.5)*w, (y+.5)*h, radius, 0, Math.PI*2);
        ctx.fill();
      }
    }
  }

  requestAnimFrame(function loop () {
    requestAnimFrame(loop);
    render();
  }, canvas);

}());