for december.

gistfile1.js

// forked from sakef's "マウスから逃げる (JS ver.)" http://jsdo.it/sakef/uVU9
var MARGIN = 100;
var NUM_CIRCLE = 130;
var RADIUS = 30;
var PADDING = 50;

var width;
var height;
var context;
var mouxeX;
var mouseY;
var start;
var func;

function canvasinit(){
    var canvas = document.querySelector('canvas');
    if (! canvas || ! canvas.getContext ) {return false;}
    else
    {
      width = canvas.width;
      height = canvas.height;
      context = canvas.getContext('2d');

      // 背景を黒にする。
      context.beginPath();
     // context.fillStyle = "#000000";  
      // context.fillRect(0,0,width, height);

      // circleの初期化
      var prev = new Circle(((width-PADDING*2)*Math.random() + PADDING)|0, ((height-PADDING*2)*Math.random() + PADDING)|0);
      start = prev;
      var i = 0;
      var c;
      while(++i <=  NUM_CIRCLE)
      {
        c = new Circle((width*Math.random())|0, (height*Math.random())|0);
        prev.next=c;
        prev=c;
      }

      // マウス座標を取得する準備
      mouseX = mouseY = 0;
      canvas.onmousemove = function(e){
        var stageW =  document.documentElement.clientWidth;
        if(e) {
          mouseX = e.pageX;
          mouseY = e.pageY;
        }
        else {
          mouseX = event.x + document.body.scrollLeft;
          mouseY = event.y + document.body.scrollTop;
        }
        
        var elem = document.elementFromPoint( mouseX, mouseY );
        if (elem && elem.tagName != "CANVAS") return;
        
        triggerDraw();
      };
    }
}


// レンダリング開始
function triggerDraw(){
  window.DISABLE = false;
  
  func = setInterval(onFrame, 20);
  
  triggerDraw.cancel = setTimeout(function(){
    window.DISABLE = true;
  }, 2500);
}

// clear the timeout and let it keep going for another 5 sec.



window.onload = canvasinit;

function onFrame()
{
  if (window.DISABLE) return; 
  
  
  context.globalCompositeOperation = "source-over";
  context.beginPath();
  context.fillStyle = "rgba(0,0,0,1)";  
  context.fillRect(0,0,width, height);
  context.globalCompositeOperation = "lighter";

  // 各circleの座標更新
  var c = start;
  while( (c = c.next) )
  {
    c.update(mouseX, mouseY);  
  }
}

var Circle = function(x, y)
{
  
  var isWhite = Math.round(Math.random());
  
  this.fx = x;
  this.fy = y;
  this.x = x;
  this.y = isWhite ? y/3 : y;
  this.next = null;
  
  this.radius = isWhite ? RADIUS/3 : RADIUS;
  
  if (isWhite){
    this.cR = 255;
    this.cG = 255;
    this.cB = 255;
    return;
  }
  
  var redOrGreen = Math.round(Math.random());
  
  this.cR = 255 * redOrGreen;
  this.cG = 255 * (redOrGreen ? 0 : 1);
  this.cB = 50 * Math.random() | 0;
}

Circle.prototype.update = function(mX, mY)
{
  var theta = Math.atan2(this.y - mY, this.x - mX);
  var d = 1000 / Math.sqrt((mX - this.x)*(mX - this.x) + (mY - this.y)*(mY - this.y));
  
  this.x += d * Math.cos(theta) + (this.fx - this.x) * 0.1;
  this.y += d * Math.sin(theta) + (this.fy - this.y) * 0.1;
  
  var edgecolor1 = "rgba(" +  this.cR + "," + this.cG + "," + this.cB + ",0.93)";
  var edgecolor2 = "rgba(" +  this.cR + "," + this.cG + "," + this.cB + ",0.6)";
  var edgecolor3 = "rgba(" +  this.cR + "," + this.cG + "," + this.cB + ",0.1)";
  var edgecolor4 = "rgba(" +  this.cR + "," + this.cG + "," + this.cB + ",0)";
  var gradblur = context.createRadialGradient(this.x, this.y, 0, this.x, this.y, RADIUS);
  gradblur.addColorStop(0,edgecolor1);
  gradblur.addColorStop(0.4,edgecolor1);
  gradblur.addColorStop(0.7,edgecolor2);
  gradblur.addColorStop(0.9,edgecolor3);
  gradblur.addColorStop(1,edgecolor4);
  
  context.beginPath();
  context.fillStyle = gradblur;
  context.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
  context.fill();
}

canvasinit();

and also this
http://sebleedelisle.com/demos/JSSnow/snow3d.html
https://github.com/sebleedelisle/JavaScript-PixelPounding-demos
http://feedproxy.google.com/~r/sebleedelisle/~3/4PC4KrFbCbM/