javascript:(function(){
/* http://d.hatena.ne.jp/edvakf/20090501/1241208337 */
var Ripple = {
COLOR : [0,0,255], /* color in RGB */
R : 100, /* ripple radius */
T : 50, /* animation timesteps */
HALF_OSCIL_NUM : 4, /* number of half oscillations in T / angular velocity = HALF_OSCIL_NUM*PI/T */
RESOLUTION : 32, /* number of ColorStops to form gradient */
ripplets : [],
timer : null,
cache : {},
getRGBA : function(r,g,b,a){
return 'rgba(' + r + ',' + g + ',' + b + ',' + a +')';
},
/* ripplet generating function : time -> height */
generator : function(t){
return Math.pow(Math.sin(t*this.HALF_OSCIL_NUM*Math.PI/this.T),2).toFixed(2);
},
/* height of ripplet : (distance, time) -> height */
dampedHeight : function(r,t){
var R = this.R, T = this.T;
if (r > t*R/T) return 0;
return this.generator(t-T*r/R) * (R-r)/R * (1-t/T);
},
/* may be replaced by custom function depending on color scheme of your choice */
height2color : function(h){
return this.getRGBA(this.COLOR[0],this.COLOR[1],this.COLOR[2],h);
},
/* get height and convert to color : (distance, time) -> color */
getColorAt : function(r,t){
return this.height2color(this.dampedHeight(r,t));
},
/* set gradients for a state of ripple : (CanvasGradient,time) -> null */
setGradient : function(grad,t){
var num = this.RESOLUTION - 1;
for (var i=0;i<=num;i++) {
grad.addColorStop( i/num , this.getColorAt(this.R*i/num,t) );
}
},
/* start and/or continue animation */
animate : function(){
if (this.timer) {
var n = this.ripplets.length;
while (n--) {
var ripplet = this.ripplets[n];
ripplet.evolve();
if (ripplet.t == this.T) {
ripplet.finalize();
this.ripplets.splice(n,1);
}
}
if (!this.ripplets.length) {
clearInterval(this.timer);
this.timer = null;
}
} else {
var self = this;
this.timer = setInterval(function(){self.animate()},50);
}
},
/* add new Ripplet instance to the stack */
setRipplet : function(x,y){
this.ripplets.push(new this.Ripplet(x,y));
this.animate();
},
finalize : function(){
this.ripplets = [];
this.timer = null;
for(var x in this.cache) if(this.cache.hasOwnProperty(x)){
delete x;
}
this.cache = {};
}
};
/* Ripplet class */
Ripple.Ripplet = function(x,y){
var R = Ripple.R;
this.x = x;
this.y = y;
this.t = 0;
var canvas = this.canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.style.position = 'fixed';
canvas.style.left = x - R + 'px';
canvas.style.top = y - R + 'px';
canvas.width = R*2;
canvas.height = R*2;
this.ctx = canvas.getContext('2d');
this.ctx.clearRect(0,0,2*R,2*R);
};
Ripple.Ripplet.prototype = {
evolve : function(){
var ctx = this.ctx;
var R = Ripple.R;
ctx.clearRect(0,0,2*R,2*R);
if (Ripple.cache[this.t]) {
ctx.drawImage(Ripple.cache[this.t], 0, 0);
} else {
var R = Ripple.R;
ctx.beginPath();
var grad = ctx.createRadialGradient(R,R,0,R,R,R);
Ripple.setGradient(grad,this.t);
ctx.fillStyle = grad;
ctx.rect(0,0,2*R,2*R);
ctx.fill();
var canvas2 = document.createElement('canvas');
canvas2.height = this.canvas.height;
canvas2.width = this.canvas.width;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(this.canvas,0,0);
Ripple.cache[this.t] = canvas2;
}
this.t++;
},
finalize : function(){
document.body.removeChild(this.canvas);
delete this.canvas;
delete this;
}
};
/* mouse object */
Ripple.mouse = {
timer : null,
x : null,
y : null,
isDown : false,
delegate : function(event){
if (!event) event = window.event;
Ripple.mouse[event.type](event);
},
mousedown : function(event){
if(event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
this.x = event.clientX;
this.y = event.clientY;
this.isDown = true;
Ripple.setRipplet(this.x,this.y);
/* set timer for mousemove */
var self = this;
this.timer = setInterval(function(){
if(self.isDown) Ripple.setRipplet(self.x,self.y);
},200);
},
mouseup : function(){
this.isDown = false;
if (this.timer){
clearInterval(this.timer);
this.timer = null;
}
},
mousemove : function(event){
if(this.isDown) {
this.x = event.clientX;
this.y = event.clientY;
}
}
};
function listen(event, handler){
if (window.addEventListener) {
window.addEventListener(event,handler,false);
} else if (window.attachEvent) {
window.attachEvent('on'+event,handler);
} else {
window['on'+event] = handler;
}
};
listen('mousedown',Ripple.mouse.delegate);
listen('mouseup',Ripple.mouse.delegate);
listen('mousemove',Ripple.mouse.delegate);
})();
) is private.
