Эффект вождения пальцем по воде

#jquery #css #css3 #svg

Не знал, как точно сформировать вопрос, поэтому сразу прошу прощения.

У меня есть картинка (svg) с линиями, они не прямые, но это не важно. Мне нужен плагин
или что то другое, который при неведении курсора будет создавать эффект, как будто
водить пальцем по воде. То есть в том месте, где курсор, линии как бы расходятся, а
когда убрать курсор - снова стают на место
    

Ответы

Ответ 1

Вот вариант водной поверхности на canvas, за основу взято демо от Jonas Wagner.



var floor = Math.floor;

function loadImage(callback) {
    var img = document.getElementById('bg');
    callback(img);
}

function getDataFromImage(img) {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.clearRect(0, 0, img.width, img.height);
    ctx.drawImage(img, 0 ,0);
    return ctx.getImageData(0, 0, img.width, img.height);
}

function disturb(x, y, z){
    if(x < 2 || x > width-2 || y < 1 || y > height-2)
        return;
    var i = x+y*width;
    buffer0[i] += z;
    buffer0[i-1] -= z;
}

function process(){
    var img = ctx.getImageData(0, 0, width, height),
        data = img.data,
        i, x;

    // average cells to make the surface more even
    for(i=width+1;i size ? size : ti;
            // some very fake lighting and caustics based on the wave height
            // and angle
            var light = waveHeight*2.0-buffer1[i-2]*0.6,
                i4 = i*4,
                ti4 = ti*4;
            // clamping
            light = light < -10 ? -10 : light > 100 ? 100 : light;
            data[i4] = texture.data[ti4]+light;
            data[i4+1] = texture.data[ti4+1]+light;
            data[i4+2] = texture.data[ti4+2]+light;
        }
    }
    aux = buffer0;
    buffer0 = buffer1;
    buffer1 = aux;
    ctx.putImageData(img, 0, 0);
}
var canvas = document.getElementById('c'),
    ctx = canvas.getContext('2d'),
    width = 320,
    height = 240,
    size = width*height,
    buffer0 = [],
    buffer1 = [],
    aux, i, texture;

for(i=0;i