davy_yg 2 Posting Whiz

Hello,

Cek this effect. I am trying to modify the effect so that when I click a button the water effect appears on certain location. How to do that?

http://www.advance-web-studio.com/effect/water-ripple-master2/demo/

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ripple</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../js/ripple.js"></script>

</head>
<body>

<img id="rplimg" src="image2.jpg" width="1000"/>

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#rplimg').waterripple({onclick: true});
});
</script>

</body>
</html>

ripple.js

/**
 * Water ripple effect.
 * Original code (Java) by Neil Wallis
 * Code snipplet adapted to Javascript by Sergey Chikuyonok
 * Code re-written as jQuery plugin by Andy V.
 */
;(function ( $, window, document, undefined ) {
    var pluginName = "waterripple",
        defaults = {
            delay       : 30,       //delay before re-drawing the next frame
            riprad      : 3,        //single ripple radius
            line_width  : 20,
            arbitrary   : false,        //generate a new random ripple every n-mseconds, false - turns off random ripples, 1000
            onclick     : true,  //generate a new ripple on mouse click
            onmove      : false, //generate a new ripple on mouse move
        };
    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options );
        this._defaults = defaults;
        this._name = pluginName;
        if(element.tagName == "IMG") {
            var imgSrc = $(this.element).attr("src");
        }
        else {
            var backgroundImage = $(this.element).css('background-image');
            if(backgroundImage != "none"){
                var pattern = /url\(['"]?(.+)['"]?\)/;                
                var imgSrc = pattern.exec(backgroundImage)[1];                
            }
        }
        if((typeof imgSrc !== 'undefined')) {
            var that = this;
            this.image = $("<img/>") // Make in memory copy of image to avoid css issues
            .attr("crossOrigin", "anonymous")
            .attr("src", imgSrc)
            .load(function() {
                that.init();
            });
        }
    }
    Plugin.prototype = {
        init: function() {
            var scope = {};
            scope.canvas        = document.createElement('canvas');
            $(this.element).after(scope.canvas);
            scope.ctx           = scope.canvas.getContext('2d');
            scope.width         = $(this.element).width();
            scope.height        = $(this.element).height();
            scope.delay         = this.options.delay;
            scope.riprad        = this.options.riprad;
            scope.line_width    = this.options.line_width;
            scope.half_width    = scope.width >> 1;
            scope.half_height   = scope.height >> 1;
            scope.size          = scope.width * (scope.height + 2) * 2;
            scope.oldind        = scope.width;
            scope.newind        = scope.width * (scope.height + 3);
            scope.mapind;
            scope.ripplemap     = [];
            scope.last_map      = [];
            scope.step          = scope.line_width * 2;
            scope.count         = scope.height / scope.line_width;
            scope.canvas.width  = scope.width;
            scope.canvas.height = scope.height;
            scope.ctx.drawImage(this.image[0], 0, 0);
            $(this.element).hide();
            scope.texture       = scope.ctx.getImageData(0, 0, scope.width, scope.height);
            scope.ripple        = scope.ctx.getImageData(0, 0, scope.width, scope.height);
            for (var i = 0; i < scope.size; i++) {
                scope.last_map[i] = scope.ripplemap[i] = 0;
            }
            //run main loop
            setInterval(function() { run.call(scope); }, scope.delay);
            // generate random ripples
            if(this.options.arbitrary > 0) {
                var rnd = Math.random;
                disturb.call(scope, rnd() * scope.width, rnd() * scope.height);
                setInterval(function() {
                    disturb.call(scope, rnd() * scope.width, rnd() * scope.height);
                }, this.options.arbitrary);
            }
            if(this.options.onclick) {
                scope.canvas.onclick = function(evt) {
                    disturb.call(scope, evt.offsetX || evt.layerX, evt.offsetY || evt.layerY);
                };
            }
            if(this.options.onmove) {
                scope.canvas.onmousemove = function(evt) {
                    disturb.call(scope, evt.offsetX || evt.layerX, evt.offsetY || evt.layerY);
                };
            }
        },
    };
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin( this, options ));
            }
        });
    };
    /**
     * Main loop
     */
    function run() {
        newframe(this);
        this.ctx.putImageData(this.ripple, 0, 0);
    }
    /**
     * Disturb water at specified point
     */
    function disturb(dx, dy) {
        dx <<= 0;
        dy <<= 0;
        for (var j = dy - this.riprad; j < dy + this.riprad; j++) {
            for (var k = dx - this.riprad; k < dx + this.riprad; k++) {
                this.ripplemap[this.oldind + (j * this.width) + k] += 512;
            }
        }
    }
    /**
     * Generates new ripples
     */
    function newframe(scope) {
        var i, a, b, data, cur_pixel, new_pixel, old_data;
        i = scope.oldind;
        scope.oldind = scope.newind;
        scope.newind = i;
        i = 0;
        scope.mapind = scope.oldind;
        // create local copies of variables to decrease
        // scope lookup time in Firefox
        var _width = scope.width,
            _height = scope.height,
            _ripplemap = scope.ripplemap,
            _mapind = scope.mapind,
            _newind = scope.newind,
            _last_map = scope.last_map,
            _rd = scope.ripple.data,
            _td = scope.texture.data,
            _half_width = scope.half_width,
            _half_height = scope.half_height;
        for (var y = 0; y < _height; y++) {
            for (var x = 0; x < _width; x++) {
                data = (
                    _ripplemap[_mapind - _width] + 
                    _ripplemap[_mapind + _width] + 
                    _ripplemap[_mapind - 1] + 
                    _ripplemap[_mapind + 1]) >> 1;
                data -= _ripplemap[_newind + i];
                data -= data >> 5;
                _ripplemap[_newind + i] = data;
                //where data=0 then still, where data>0 then wave
                data = 1024 - data;
                old_data = _last_map[i];
                _last_map[i] = data;
                if (old_data != data) {
                    //offsets
                    a = (((x - _half_width) * data / 1024) << 0) + _half_width;
                    b = (((y - _half_height) * data / 1024) << 0) + _half_height;
                    //bounds check
                    if (a >= _width) a = _width - 1;
                    if (a < 0) a = 0;
                    if (b >= _height) b = _height - 1;
                    if (b < 0) b = 0;
                    new_pixel = (a + (b * _width)) * 4;
                    cur_pixel = i * 4;
                    _rd[cur_pixel] = _td[new_pixel];
                    _rd[cur_pixel + 1] = _td[new_pixel + 1];
                    _rd[cur_pixel + 2] = _td[new_pixel + 2];
                }
                ++_mapind;
                ++i;
            }
        }
        scope.mapind = _mapind;
    }
})( jQuery, window, document );
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.