De rimpel procedure werkt niet in oude IE-browsers (werkt perfect vanaf IE9), en Mozilla heeft wat moeite met het renderen. Maar dat wordt meer dan goed gemaakt door Opera, Safari en Chrome. In deze browsers worden de plaatjes helemaal "vloeibaar". Ondanks de tekortkomingen van de oude IE-browsers is de procedure, zelf, foutloos volgens de JSLint-norm, en alle validators zullen "groen" geven.
Plaats de css in de head-sectie van jouw pagina, de html regels ergens in de body-sectie (waar het plaatje moet verschijnen) en plaats tot slot het javascript zo laag als mogelijk in de body-sectie van jouw pagina.
<style type="text/css">
#ripple_border{
margin:0;
border:1px solid #808080}
canvas{
position:absolute;
position:relative}
</style>
<div id="ripple_border">
<!--[if IE]>
<img src="image/ripple.jpg" alt="ripple voorbeeld" />
<![endif]-->
<canvas></canvas>
</div>
<script>
/*global nieuw_frame: false */
/*global window: false */
/*global alert: false */
/*global welke_ie_versie: false */
var ie_9 = 0;
function check_ie_versie() {
var de_versie = welke_ie_versie();
if (de_versie > -1) {
if (de_versie >= 9.0) {
ie_9 = 1;
} else {
ie_9 = 0;
}
}
}
function welke_ie_versie() {
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");
if (re.exec(ua) !== null) {
rv = parseFloat(RegExp.$1);
}
}
return rv;
}
check_ie_versie();
var rimpel = (function(bronplaatje, ripple_div) {
var img = new Image(),
vertraging = 20,
de_breedte,
de_hoogte,
helft_breedte,
helft_hoogte,
afmeting_rimpel = 2,
index_oud,
index_nieuw,
index_map,
afmeting,
ripple_map = [],
laatste_map = [],
rimpel,
rimpel_data,
texture,
texture_data,
gerimpeld = false,
de_klok,
canvas = document.createElement('canvas'),
inhoud_twee;
var de_user_agent = navigator.userAgent.toLowerCase();
function stop() {
if (de_klok) {
clearInterval(de_klok);
}
}
function de_procedure() {
if (gerimpeld) {
nieuw_frame(de_breedte, de_hoogte);
inhoud_twee.putImageData(rimpel, 0, 0);
}
}
function start() {
stop();
de_klok = setInterval(de_procedure, vertraging);
}
function rimpelen(dx, dy) {
dx <<= 0;
dy <<= 0;
gerimpeld = true;
for (var j = dy - afmeting_rimpel; j < dy + afmeting_rimpel; j++) {
for (var k = dx - afmeting_rimpel; k < dx + afmeting_rimpel; k++) {
ripple_map[index_oud + (j * de_breedte) + k] += 1024;
}
}
}
function doe_variabelen() {
if ((ie_9 === 0) && (!window.opera && de_user_agent.indexOf("msie") != -1)) {
return true;
}
de_breedte = img.width;
de_hoogte = img.height;
helft_breedte = de_breedte >> 1;
helft_hoogte = de_hoogte >> 1;
afmeting = de_breedte * (de_hoogte + 2) * 2;
canvas.width = de_breedte;
canvas.height = de_hoogte;
index_oud = de_breedte;
index_nieuw = de_breedte * (de_hoogte + 3);
inhoud_twee = canvas.getContext('2d');
ripple_div.appendChild(canvas);
inhoud_twee.drawImage(img, 0, 0, de_breedte, de_hoogte);
for (var i = 0; i < afmeting; i++) {
laatste_map[i] = ripple_map[i] = 0;
}
texture = inhoud_twee.getImageData(0, 0, de_breedte, de_hoogte);
texture_data = texture.data;
rimpel = inhoud_twee.getImageData(0, 0, de_breedte, de_hoogte);
rimpel_data = rimpel.data;
canvas.addEventListener('mousemove',
function(evt) {
rimpelen(evt.offsetX || evt.layerX, evt.offsetY || evt.layerY);
},
false);
start();
}
function nieuw_frame() {
var i,
a,
b,
data,
huidige_pixel,
nieuwe_pixel,
de_oude_data;
i = index_oud;
index_oud = index_nieuw;
index_nieuw = i;
i = 0;
index_map = index_oud;
var _breedte = de_breedte,
_hoogte = de_hoogte,
_ripple_map = ripple_map,
_index_map = index_map,
_index_nieuw = index_nieuw,
_laatste_map = laatste_map,
_rd = rimpel.data,
_td = texture.data,
_helft_breedte = helft_breedte,
_helft_hoogte = helft_hoogte,
_gerimpeld = false;
for (var y = 0; y < _hoogte; y++) {
for (var x = 0; x < _breedte; x++) {
data = (_ripple_map[_index_map - _breedte] + _ripple_map[_index_map + _breedte] + _ripple_map[_index_map - 1] + _ripple_map[_index_map + 1]) >> 1;
data -= _ripple_map[_index_nieuw + i];
data -= data >> 5;
_ripple_map[_index_nieuw + i] = data;
data = 1024 - data;
de_oude_data = _laatste_map[i];
_laatste_map[i] = data;
if (de_oude_data != data) {
_gerimpeld = true;
a = (((x - _helft_breedte) * data / 1024) << 0) + _helft_breedte;
b = (((y - _helft_hoogte) * data / 1024) << 0) + _helft_hoogte;
if (a >= _breedte) {
a = _breedte - 1;
}
if (a < 0) {
a = 0;
}
if (b >= _hoogte) {
b = _hoogte - 1;
}
if (b < 0) {
b = 0;
}
nieuwe_pixel = (a + (b * _breedte)) * 4;
huidige_pixel = i * 4;
_rd[huidige_pixel] = _td[nieuwe_pixel];
_rd[huidige_pixel + 1] = _td[nieuwe_pixel + 1];
_rd[huidige_pixel + 2] = _td[nieuwe_pixel + 2];
}++_index_map; ++i;
}
}
index_map = _index_map;
gerimpeld = _gerimpeld;
}
img.onload = doe_variabelen;
img.src = bronplaatje;
return {
start: start,
stop: stop,
rimpelen: rimpelen
};
});
rimpel('image/ripple.jpg', document.getElementById('ripple_border'));
</script>