kaleidoscope

http://jsfiddle.net/hypothete/YBMb3/

HTML

<canvas id="canvas" ></canvas>
<h1>This is kaleidoscope</h1>

CSS

body{overflow:hidden; background-color:#000;}
canvas{position:absolute; left:0; top:0; width:100%;height:100%;z-index:2}
h1{
   mix-blend-mode: difference;
   position:absolute;
   top:20%;
   left:20%;
   z-index:9;
   font-size:50px;
   color:white;
}

JavaScript

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


//static vars
var can=document.getElementById("canvas");
var context=can.getContext("2d");

//REMEMBER TO DO THIS
var cwidth= window.innerWidth;
var cheight = window.innerHeight;
can.width=cwidth;
can.height=cheight;
//ok


var points=[];
var numpoints = 5;
var decrate = Math.random()*30 - 15;
var spinrate = 1;

//initial load up of points[]

function reloadpoints(e){
   numpoints = Math.round(Math.random()*30+1);
   for(var i =0; i < numpoints; i++){
       points[i]={
               x:Math.random()*cwidth,
               y:Math.random()*cheight,
               vx:Math.random()*3.0 - 1.5,
               vy:Math.random()*3.0 - 1.5,
               radius:Math.random()*30 + 15,
               }
       points[i].grad=makeGrad(points[i].radius, points[i].r, points[i].g, points[i].b);
   }
    decrate = Math.random()*30 - 15;
    spinrate = Math.random()*2*Math.PI - Math.PI;
    //colorstring = 'rgba('+r+','+g+','+b+',255)';
    imageSmoothing(Math.round(Math.random()),context);
} 
    
reloadpoints();



canvas.addEventListener('click', reloadpoints, false);



function makeGrad(radius){
    var bc=document.createElement('canvas');
    bc.setAttribute('width',radius*2);
    bc.setAttribute('height',radius*2);
    var ctx = bc.getContext('2d');
    var radgrad = ctx.createRadialGradient(radius,radius,0,radius,radius,radius);
    imageSmoothing(false,ctx);
    //var colorstring ='#ffff00';
    //radgrad.addColorStop(0, colorstring);
    //radgrad.addColorStop(1, 'rgba(255,255,255,0)');
    radgrad.addColorStop(Math.random(), 'rgba(255,0,0,255)');
    radgrad.addColorStop(Math.random(), 'rgba(255,255,0,255)');
    radgrad.addColorStop(Math.random(),...