http://livecoding.io/4698648

color_shifting.js

var canvas, ctx,
    W, H, color, c_last;

function init() {
  canvas = document.getElementById('c');
  ctx = canvas.getContext('2d');
  
  W = window.innerWidth;
  H = window.innerHeight;
  
  canvas.width = W;
  canvas.height = H;
  
  requestAnimationFrame(draw);
  c_last = 0xffffff;
  color = 0xff0000;
};

function paintBlack(){
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, W, H);
  ctx.fillStyle = '#fff';
  ctx.fillText("last:   " + c_last.toString(16), 5, 15 );
  ctx.fillText("color: " + color.toString(16), 5, 25 );
}

function get_color() {
  return color = Math.random()*(255<<16) | 0;
}

function paintCircle(){
//  get_color()
  var rl = (0xff0000 & c_last)>>16,
      gl = (0x00ff00 & c_last)>>8,
      bl = (0x0000ff & c_last);
  var rc = (0xff0000 & color)>>16,
      gc = (0x00ff00 & color)>>8,
      bc = (0x0000ff & color);
  var rn = rl + (rc - rl)/10,
      gn = gl + (gc - gl)/10,
      bn = bl + (bc - bl)/10;
  if (Math.abs(rc-rl) < 11 && 
      Math.abs(gc-gl) < 11 && 
      Math.abs(bc-bl) < 11 )
    get_color();
  c_last = (rn<<16 | gn<<8 | bn) & 0xffffff;
  
  ctx.fillStyle = '#' + c_last.toString(16);
  ctx.beginPath();
  var range = 0;
  var x = (W>>1) + range+(Math.random()*-range),
      y = (H>>1) + range+(Math.random()*-range);
  ctx.arc(x, y, 190, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();
}

function draw(){
  paintBlack();
  paintCircle();
//  setTimeout(draw, 100);
  requestAnimationFrame(draw);
}

init();