wachase

jsdoit.css

body{
  background-color:white;
  font:30px sans-serif;
  margin:0px;padding:0px;
}
canvas{
  display:block;
}

jsdoit.html

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />  
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon" href="http://jsrun.it/assets/o/A/v/b/oAvbX.png" /> 
<canvas id="canvas"></canvas>

jsdoit.js

// forked from fnobi's "canvas default" http://jsdo.it/fnobi/canvasdefault
var Wa=function(x,y,size){
  this.draw=function(){
    if(alive){
      ctx.strokeStyle="rgba("+colorCode[0]+","+colorCode[1]+","+colorCode[2]+","+opacity+")";
      ctx.lineWidth=lineWidth;
      ctx.lineJoin="miter";

      ctx.translate(x,y);
      ctx.beginPath();
      if(shape==0){
        ctx.arc(0,0,size,0,Math.PI*2,true);
      }else{
        ctx.rotate(shapeDir);
        ctx.moveTo(Math.cos(0)*size,Math.sin(0)*size);
	for(var i=0;i<shape;i++){
          ctx.lineTo(Math.cos(Math.PI*2*i/shape)*size,Math.sin(Math.PI*2*i/shape)*size);
        }
        ctx.lineTo(Math.cos(0)*size,Math.sin(0)*size);
        ctx.rotate(-shapeDir);
      }
      ctx.closePath();
      ctx.stroke();
      ctx.translate(-x,-y);
	
      size*=1.01;
      lineWidth*=1.05;
      opacity*=0.95;

      if(opacity<=opacityMin){
        alive=false;
        was.shift();
	offset++;
      }
    }
  };
    
  this.putPoint=function(){
    ctx.lineTo(x,y);
  };    
    
  this.shift=function(xn,yn){
    x+=xn;
    y+=yn;
  };

  var alive=true;
    
  var lineWidth=30;
  var opacity=1;

  var colorPatterns=[
    [255,255,128],
    [255,128,255],
    [255,192,128],
    [128,128,255],
    [128,255,128],
    [255,128,128]
  ];
  var shapePatterns=[3,4,5,0];
  
  var colorCode=colorPatterns[Math.floor(Math.random()*colorPatterns.length)];
  var shape=shapePatterns[Math.floor(Math.random()*shapePatterns.length)];
  var shapeDir=Math.PI*2*Math.random();
};

var draw=function(count){
  ctx.clearRect(-width/2,-height/2,width,height);

  ctx.strokeStyle="rgba(128,128,128,1)";
  ctx.lineWidth=huseWidth;
  ctx.lineCap="round";
  ctx.lineJoin="round";

  ctx.beginPath();    
  ctx.moveTo(0,0);
  for(var i=was.length-1;i>=0;i--){
    was[i].putPoint();
  }
  ctx.stroke();
    
  for(i=0;i<was.length;i++){
    was[i].draw();
    was[i].shift(speed*Math.cos(dir),speed*Math.sin(dir));
  }

  if(count>was.length+offset){
    was.push(new Wa(0,0,speed*2));
  }
};

var init=function(){
  canvas=document.getElementById("canvas");
  width=window.innerWidth;height=window.innerHeight;
  canvas.width=width;canvas.height=height;
  ctx=canvas.getContext("2d");
  ctx.translate(width/2,height/2);

  canvas.onmousemove=updateMouse;
  canvas.ontouchstart=updateMouse;
  canvas.ontouchmove=updateMouse;
    
  was=[];
  was.push(new Wa(0,0,defSize));
  offset=0;
    
  animater=new Animater(50,3);
  animater.updater.push(draw);
  animater.start();
};

var updateMouse=function(e){
  var mouseX=e.pageX-width/2;
  var mouseY=e.pageY-height/2;
    
  dir=Math.atan2(mouseY,mouseX)+Math.PI;
  speed=Math.sqrt(mouseX*mouseX+mouseY*mouseY)/10;
  huseWidth=speed;
    
  e.preventDefault();
};

var canvas;var ctx;
var width;var height;
var animater;

var was;
var offset;
var opacityMin=0.01;
var defSize=50;

var dir=Math.PI/2;
var speed=15;
var huseWidth=20;

init();