Canvas Stuff

Water like image reflection

This is the classic wavy water effect. This used to be done with java applets, now you can do it with javascript and the canvas element.

The script is currently using 80% of my cpu so its not really practical. Hopefully we will be getting JIT'd javascript sometime soon.

Source:

	var img = new Image();
	var step = 0;

	function animate(){
	        var canvas = document.getElementById("can");
		var context = canvas.getContext("2d");
	        
	        context.fillStyle = "rgb(255,255,255)";
	        context.fillRect (0, img.height, img.width+40, img.height);
	        
	        for(var i = 0; i < img.height; i++){
	        	context.drawImage(
					img,
					0,
					0+(img.height-i),
					img.width,
			                1,
			                40+Math.sin(4*(step+i/20.0))*(i/2.0),
			                img.height-1+i,
			                img.width,
			                1);
	        }

	        step+= 0.1;
	        setTimeout("animate();",35); 
	}

	img.onload = function(){
	        var canvas = document.getElementById("can");
		var context = canvas.getContext("2d");
	        context.drawImage(img,40, 0);

	        setTimeout("animate();",100); 
	}
	img.src = "logo.png";

    

The Future

Here is a list of things that I probably won't add in the future.


Home