diff --git a/jquery.ripples-min.js b/jquery.ripples-min.js index 65ab7f2..0ea1d2c 100644 --- a/jquery.ripples-min.js +++ b/jquery.ripples-min.js @@ -3,4 +3,4 @@ * MIT License * @author sirxemic / http://sirxemic.com/ */ -+function($){var gl;var $window=$(window);function isPercentage(str){return str[str.length-1]=="%"}function hasWebGLSupport(){var canvas=document.createElement("canvas");var context=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");var result=context&&context.getExtension("OES_texture_float");return result}var supportsWebGL=hasWebGLSupport();function createProgram(vertexSource,fragmentSource,uniformValues){function compileSource(type,source){var shader=gl.createShader(type);gl.shaderSource(shader,source);gl.compileShader(shader);if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS)){throw new Error("compile error: "+gl.getShaderInfoLog(shader))}return shader}var program={};program.id=gl.createProgram();gl.attachShader(program.id,compileSource(gl.VERTEX_SHADER,vertexSource));gl.attachShader(program.id,compileSource(gl.FRAGMENT_SHADER,fragmentSource));gl.linkProgram(program.id);if(!gl.getProgramParameter(program.id,gl.LINK_STATUS)){throw new Error("link error: "+gl.getProgramInfoLog(program.id))}program.uniforms={};program.locations={};gl.useProgram(program.id);gl.enableVertexAttribArray(0);var match,name,type,regex=/uniform (\w+) (\w+)/g,shaderCode=vertexSource+fragmentSource;while((match=regex.exec(shaderCode))!=null){name=match[2];program.locations[name]=gl.getUniformLocation(program.id,name)}return program}function bindTexture(texture,unit){gl.activeTexture(gl.TEXTURE0+(unit||0));gl.bindTexture(gl.TEXTURE_2D,texture)}function extractUrl(value){var urlMatch=/url\(["']?([^"']*)["']?\)/.exec(value);if(urlMatch==null){return null}return urlMatch[1]}function isDataUri(url){return url.match(/^data:/)}$("head").prepend("");var Ripples=function(el,options){var that=this;this.$el=$(el);this.interactive=options.interactive;this.resolution=options.resolution;this.textureDelta=new Float32Array([1/this.resolution,1/this.resolution]);this.perturbance=options.perturbance;this.dropRadius=options.dropRadius;this.crossOrigin=options.crossOrigin;this.imageUrl=options.imageUrl;var canvas=document.createElement("canvas");canvas.width=this.$el.innerWidth();canvas.height=this.$el.innerHeight();this.canvas=canvas;this.$canvas=$(canvas);this.$canvas.css({position:"absolute",left:0,top:0,right:0,bottom:0,zIndex:-1});this.$el.addClass("jquery-ripples").append(canvas);this.context=gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");gl.getExtension("OES_texture_float");var linearSupport=gl.getExtension("OES_texture_float_linear");$(window).on("resize",function(){var newWidth=that.$el.innerWidth(),newHeight=that.$el.innerHeight();if(newWidth!=that.canvas.width||newHeight!=that.canvas.height){canvas.width=newWidth;canvas.height=newHeight}});this.$el.on("mousemove.ripples",function(e){if(that.visible&&that.running&&that.interactive){that.dropAtMouse(e,that.dropRadius,.01)}}).on("mousedown.ripples",function(e){if(that.visible&&that.running&&that.interactive){that.dropAtMouse(e,that.dropRadius*1.5,.14)}});this.textures=[];this.framebuffers=[];for(var i=0;i<2;i++){var texture=gl.createTexture();var framebuffer=gl.createFramebuffer();gl.bindFramebuffer(gl.FRAMEBUFFER,framebuffer);framebuffer.width=this.resolution;framebuffer.height=this.resolution;gl.bindTexture(gl.TEXTURE_2D,texture);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,linearSupport?gl.LINEAR:gl.NEAREST);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,linearSupport?gl.LINEAR:gl.NEAREST);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,this.resolution,this.resolution,0,gl.RGBA,gl.FLOAT,null);gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,texture,0);if(gl.checkFramebufferStatus(gl.FRAMEBUFFER)!=gl.FRAMEBUFFER_COMPLETE){throw new Error("Rendering to this texture is not supported (incomplete framebuffer)")}gl.bindTexture(gl.TEXTURE_2D,null);gl.bindFramebuffer(gl.FRAMEBUFFER,null);this.textures.push(texture);this.framebuffers.push(framebuffer)}this.quad=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,this.quad);gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,+1,-1,+1,+1,-1,+1]),gl.STATIC_DRAW);this.initShaders();this.initTexture();this.setTransparentTexture();this.loadImage();gl.clearColor(0,0,0,0);gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA);this.visible=true;this.running=true;this.inited=true;function step(){that.step();requestAnimationFrame(step)}requestAnimationFrame(step)};Ripples.DEFAULTS={imageUrl:null,resolution:256,dropRadius:20,perturbance:.03,interactive:true,crossOrigin:""};Ripples.prototype={loadImage:function(){var that=this;gl=this.context;var newImageSource=this.imageUrl||extractUrl(this.originalCssBackgroundImage)||extractUrl(this.$el.css("backgroundImage"));if(newImageSource==this.imageSource){return}this.imageSource=newImageSource;if(!this.imageSource){this.setTransparentTexture();return}var image=new Image;image.onload=function(){gl=that.context;function isPowerOfTwo(x){return(x&x-1)==0}var wrapping=isPowerOfTwo(image.width)&&isPowerOfTwo(image.height)?gl.REPEAT:gl.CLAMP_TO_EDGE;gl.bindTexture(gl.TEXTURE_2D,that.backgroundTexture);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,wrapping);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,wrapping);gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,image);that.backgroundWidth=image.width;that.backgroundHeight=image.height;that.hideCssBackground()};image.onerror=function(){gl=that.context;that.setTransparentTexture()};image.crossOrigin=isDataUri(this.imageSource)?null:this.crossOrigin;image.src=this.imageSource},step:function(){gl=this.context;if(!this.visible){return}this.computeTextureBoundaries();if(this.running){this.update()}this.render()},drawQuad:function(){gl.bindBuffer(gl.ARRAY_BUFFER,this.quad);gl.vertexAttribPointer(0,2,gl.FLOAT,false,0,0);gl.drawArrays(gl.TRIANGLE_FAN,0,4)},render:function(){gl.viewport(0,0,this.canvas.width,this.canvas.height);gl.enable(gl.BLEND);gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);gl.useProgram(this.renderProgram.id);bindTexture(this.backgroundTexture,0);bindTexture(this.textures[0],1);gl.uniform1f(this.renderProgram.locations.perturbance,this.perturbance);gl.uniform2fv(this.renderProgram.locations.topLeft,this.renderProgram.uniforms.topLeft);gl.uniform2fv(this.renderProgram.locations.bottomRight,this.renderProgram.uniforms.bottomRight);gl.uniform2fv(this.renderProgram.locations.containerRatio,this.renderProgram.uniforms.containerRatio);gl.uniform1i(this.renderProgram.locations.samplerBackground,0);gl.uniform1i(this.renderProgram.locations.samplerRipples,1);this.drawQuad();gl.disable(gl.BLEND)},update:function(){gl.viewport(0,0,this.resolution,this.resolution);for(var i=0;i<2;i++){gl.bindFramebuffer(gl.FRAMEBUFFER,this.framebuffers[i]);bindTexture(this.textures[1-i]);gl.useProgram(this.updateProgram[i].id);this.drawQuad()}gl.bindFramebuffer(gl.FRAMEBUFFER,null)},computeTextureBoundaries:function(){var backgroundSize=this.$el.css("background-size");var backgroundAttachment=this.$el.css("background-attachment");var backgroundPosition=this.$el.css("background-position").split(" ");var parElement=backgroundAttachment=="fixed"?$window:this.$el;var winOffset=parElement.offset()||{left:pageXOffset,top:pageYOffset};var winWidth=parElement.innerWidth();var winHeight=parElement.innerHeight();if(backgroundSize=="cover"){var scale=Math.max(winWidth/this.backgroundWidth,winHeight/this.backgroundHeight);var backgroundWidth=this.backgroundWidth*scale;var backgroundHeight=this.backgroundHeight*scale}else if(backgroundSize=="contain"){var scale=Math.min(winWidth/this.backgroundWidth,winHeight/this.backgroundHeight);var backgroundWidth=this.backgroundWidth*scale;var backgroundHeight=this.backgroundHeight*scale}else{backgroundSize=backgroundSize.split(" ");var backgroundWidth=backgroundSize[0]||"";var backgroundHeight=backgroundSize[1]||backgroundWidth;if(isPercentage(backgroundWidth)){backgroundWidth=winWidth*parseFloat(backgroundWidth)/100}else if(backgroundWidth!="auto"){backgroundWidth=parseFloat(backgroundWidth)}if(isPercentage(backgroundHeight)){backgroundHeight=winHeight*parseFloat(backgroundHeight)/100}else if(backgroundHeight!="auto"){backgroundHeight=parseFloat(backgroundHeight)}if(backgroundWidth=="auto"&&backgroundHeight=="auto"){backgroundWidth=this.backgroundWidth;backgroundHeight=this.backgroundHeight}else{if(backgroundWidth=="auto"){backgroundWidth=this.backgroundWidth*(backgroundHeight/this.backgroundHeight)}if(backgroundHeight=="auto"){backgroundHeight=this.backgroundHeight*(backgroundWidth/this.backgroundWidth)}}}var backgroundX=backgroundPosition[0]||"";var backgroundY=backgroundPosition[1]||backgroundX;if(backgroundX=="left"){backgroundX=winOffset.left}else if(backgroundX=="center"){backgroundX=winOffset.left+winWidth/2-backgroundWidth/2}else if(backgroundX=="right"){backgroundX=winOffset.left+winWidth-backgroundWidth}else if(isPercentage(backgroundX)){backgroundX=winOffset.left+(winWidth-backgroundWidth)*parseFloat(backgroundX)/100}else{backgroundX=parseFloat(backgroundX)}if(backgroundY=="top"){backgroundY=winOffset.top}else if(backgroundY=="center"){backgroundY=winOffset.top+winHeight/2-backgroundHeight/2}else if(backgroundY=="bottom"){backgroundY=winOffset.top+winHeight-backgroundHeight}else if(isPercentage(backgroundY)){backgroundY=winOffset.top+(winHeight-backgroundHeight)*parseFloat(backgroundY)/100}else{backgroundY=parseFloat(backgroundY)}var elementOffset=this.$el.offset();this.renderProgram.uniforms.topLeft=new Float32Array([(elementOffset.left-backgroundX)/backgroundWidth,(elementOffset.top-backgroundY)/backgroundHeight]);this.renderProgram.uniforms.bottomRight=new Float32Array([this.renderProgram.uniforms.topLeft[0]+this.$el.innerWidth()/backgroundWidth,this.renderProgram.uniforms.topLeft[1]+this.$el.innerHeight()/backgroundHeight]);var maxSide=Math.max(this.canvas.width,this.canvas.height);this.renderProgram.uniforms.containerRatio=new Float32Array([this.canvas.width/maxSide,this.canvas.height/maxSide])},initShaders:function(){var vertexShader=["attribute vec2 vertex;","varying vec2 coord;","void main() {","coord = vertex * 0.5 + 0.5;","gl_Position = vec4(vertex, 0.0, 1.0);","}"].join("\n");this.dropProgram=createProgram(vertexShader,["precision highp float;","const float PI = 3.141592653589793;","uniform sampler2D texture;","uniform vec2 center;","uniform float radius;","uniform float strength;","varying vec2 coord;","void main() {","vec4 info = texture2D(texture, coord);","float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);","drop = 0.5 - cos(drop * PI) * 0.5;","info.r += drop * strength;","gl_FragColor = info;","}"].join("\n"));this.updateProgram=[0,0];this.updateProgram[0]=createProgram(vertexShader,["precision highp float;","uniform sampler2D texture;","uniform vec2 delta;","varying vec2 coord;","void main() {","vec4 info = texture2D(texture, coord);","vec2 dx = vec2(delta.x, 0.0);","vec2 dy = vec2(0.0, delta.y);","float average = (","texture2D(texture, coord - dx).r +","texture2D(texture, coord - dy).r +","texture2D(texture, coord + dx).r +","texture2D(texture, coord + dy).r",") * 0.25;","info.g += (average - info.r) * 2.0;","info.g *= 0.995;","info.r += info.g;","gl_FragColor = info;","}"].join("\n"));gl.uniform2fv(this.updateProgram[0].locations.delta,this.textureDelta);this.updateProgram[1]=createProgram(vertexShader,["precision highp float;","uniform sampler2D texture;","uniform vec2 delta;","varying vec2 coord;","void main() {","vec4 info = texture2D(texture, coord);","vec3 dx = vec3(delta.x, texture2D(texture, vec2(coord.x + delta.x, coord.y)).r - info.r, 0.0);","vec3 dy = vec3(0.0, texture2D(texture, vec2(coord.x, coord.y + delta.y)).r - info.r, delta.y);","info.ba = normalize(cross(dy, dx)).xz;","gl_FragColor = info;","}"].join("\n"));gl.uniform2fv(this.updateProgram[1].locations.delta,this.textureDelta);this.renderProgram=createProgram(["precision highp float;","attribute vec2 vertex;","uniform vec2 topLeft;","uniform vec2 bottomRight;","uniform vec2 containerRatio;","varying vec2 ripplesCoord;","varying vec2 backgroundCoord;","void main() {","backgroundCoord = mix(topLeft, bottomRight, vertex * 0.5 + 0.5);","backgroundCoord.y = 1.0 - backgroundCoord.y;","ripplesCoord = vec2(vertex.x, -vertex.y) * containerRatio * 0.5 + 0.5;","gl_Position = vec4(vertex.x, -vertex.y, 0.0, 1.0);","}"].join("\n"),["precision highp float;","uniform sampler2D samplerBackground;","uniform sampler2D samplerRipples;","uniform float perturbance;","varying vec2 ripplesCoord;","varying vec2 backgroundCoord;","void main() {","vec2 offset = -texture2D(samplerRipples, ripplesCoord).ba;","float specular = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 4.0);","gl_FragColor = texture2D(samplerBackground, backgroundCoord + offset * perturbance) + specular;","}"].join("\n"))},initTexture:function(){this.transparentPixels=new ImageData(32,32);this.backgroundTexture=gl.createTexture();gl.bindTexture(gl.TEXTURE_2D,this.backgroundTexture);gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR)},setTransparentTexture:function(){gl.bindTexture(gl.TEXTURE_2D,this.backgroundTexture);gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,this.transparentPixels)},hideCssBackground:function(){var inlineCss=this.$el[0].style.backgroundImage;if(inlineCss=="none"){return}this.originalInlineCss=inlineCss;this.originalCssBackgroundImage=this.$el.css("backgroundImage");this.$el.css("backgroundImage","none")},restoreCssBackground:function(){this.$el.css("backgroundImage",this.originalInlineCss||"")},dropAtMouse:function(e,radius,strength){var borderLeft=parseInt(this.$el.css("border-left-width"))||0,borderTop=parseInt(this.$el.css("border-top-width"))||0;this.drop(e.pageX-this.$el.offset().left-borderLeft,e.pageY-this.$el.offset().top-borderTop,radius,strength)},drop:function(x,y,radius,strength){var that=this;gl=this.context;var elWidth=this.$el.innerWidth();var elHeight=this.$el.innerHeight();var longestSide=Math.max(elWidth,elHeight);radius=radius/longestSide;var dropPosition=new Float32Array([(2*x-elWidth)/longestSide,(elHeight-2*y)/longestSide]);gl.viewport(0,0,this.resolution,this.resolution);gl.bindFramebuffer(gl.FRAMEBUFFER,this.framebuffers[0]);bindTexture(this.textures[1]);gl.useProgram(this.dropProgram.id);gl.uniform2fv(this.dropProgram.locations.center,dropPosition);gl.uniform1f(this.dropProgram.locations.radius,radius);gl.uniform1f(this.dropProgram.locations.strength,strength);this.drawQuad();var t=this.framebuffers[0];this.framebuffers[0]=this.framebuffers[1];this.framebuffers[1]=t;t=this.textures[0];this.textures[0]=this.textures[1];this.textures[1]=t;gl.bindFramebuffer(gl.FRAMEBUFFER,null)},destroy:function(){this.$el.off(".ripples").removeClass("jquery-ripples").removeData("ripples");this.canvas.remove();this.restoreCssBackground()},show:function(){this.visible=true;this.$canvas.show();this.hideCssBackground()},hide:function(){this.visible=false;this.$canvas.hide();this.restoreCssBackground()},pause:function(){this.running=false},play:function(){this.running=true},set:function(property,value){switch(property){case"dropRadius":case"perturbance":case"interactive":case"crossOrigin":this[property]=value;break;case"imageUrl":this.imageUrl=value;this.loadImage();break}}};var old=$.fn.ripples;$.fn.ripples=function(option){if(!supportsWebGL){throw new Error("Your browser does not support WebGL or the OES_texture_float extension.")}var args=arguments.length>1?Array.prototype.slice.call(arguments,1):undefined;return this.each(function(){var $this=$(this),data=$this.data("ripples"),options=$.extend({},Ripples.DEFAULTS,$this.data(),typeof option=="object"&&option);if(!data&&typeof option=="string"){return}if(!data){$this.data("ripples",data=new Ripples(this,options))}else if(typeof option=="string"){Ripples.prototype[option].apply(data,args)}})};$.fn.ripples.Constructor=Ripples;$.fn.ripples.noConflict=function(){$.fn.ripples=old;return this}}(window.jQuery); \ No newline at end of file +!function(e){"function"==typeof define&&define.amd?define(["jquery"],e):e("object"==typeof exports?require("jquery"):jQuery)}(function(e){"use strict";function t(e){return"%"==e[e.length-1]}function r(){var e=document.createElement("canvas"),t=e.getContext("webgl")||e.getContext("experimental-webgl"),r=t&&t.getExtension("OES_texture_float");return r}function i(e,t,r){function i(e,t){var r=s.createShader(e);if(s.shaderSource(r,t),s.compileShader(r),!s.getShaderParameter(r,s.COMPILE_STATUS))throw new Error("compile error: "+s.getShaderInfoLog(r));return r}var o={};if(o.id=s.createProgram(),s.attachShader(o.id,i(s.VERTEX_SHADER,e)),s.attachShader(o.id,i(s.FRAGMENT_SHADER,t)),s.linkProgram(o.id),!s.getProgramParameter(o.id,s.LINK_STATUS))throw new Error("link error: "+s.getProgramInfoLog(o.id));o.uniforms={},o.locations={},s.useProgram(o.id),s.enableVertexAttribArray(0);for(var n,a,u=/uniform (\w+) (\w+)/g,h=e+t;null!=(n=u.exec(h));)a=n[2],o.locations[a]=s.getUniformLocation(o.id,a);return o}function o(e,t){s.activeTexture(s.TEXTURE0+(t||0)),s.bindTexture(s.TEXTURE_2D,e)}function n(e){var t=/url\(["']?([^"']*)["']?\)/.exec(e);return null==t?null:t[1]}function a(e){return e.match(/^data:/)}var s,u=e(window),h=r();e("head").prepend("");var c=function(t,r){function i(){o.step(),requestAnimationFrame(i)}var o=this;this.$el=e(t),this.interactive=r.interactive,this.resolution=r.resolution,this.textureDelta=new Float32Array([1/this.resolution,1/this.resolution]),this.perturbance=r.perturbance,this.dropRadius=r.dropRadius,this.crossOrigin=r.crossOrigin,this.imageUrl=r.imageUrl;var n=document.createElement("canvas");n.width=this.$el.innerWidth(),n.height=this.$el.innerHeight(),this.canvas=n,this.$canvas=e(n),this.$canvas.css({position:"absolute",left:0,top:0,right:0,bottom:0,zIndex:-1}),this.$el.addClass("jquery-ripples").append(n),this.context=s=n.getContext("webgl")||n.getContext("experimental-webgl"),s.getExtension("OES_texture_float");var a=s.getExtension("OES_texture_float_linear");e(window).on("resize",function(){var e=o.$el.innerWidth(),t=o.$el.innerHeight();e==o.canvas.width&&t==o.canvas.height||(n.width=e,n.height=t)}),this.$el.on("mousemove.ripples",function(e){o.visible&&o.running&&o.interactive&&o.dropAtMouse(e,o.dropRadius,.01)}).on("mousedown.ripples",function(e){o.visible&&o.running&&o.interactive&&o.dropAtMouse(e,1.5*o.dropRadius,.14)}),this.textures=[],this.framebuffers=[];for(var u=0;u<2;u++){var h=s.createTexture(),c=s.createFramebuffer();if(s.bindFramebuffer(s.FRAMEBUFFER,c),c.width=this.resolution,c.height=this.resolution,s.bindTexture(s.TEXTURE_2D,h),s.texParameteri(s.TEXTURE_2D,s.TEXTURE_MIN_FILTER,a?s.LINEAR:s.NEAREST),s.texParameteri(s.TEXTURE_2D,s.TEXTURE_MAG_FILTER,a?s.LINEAR:s.NEAREST),s.texParameteri(s.TEXTURE_2D,s.TEXTURE_WRAP_S,s.CLAMP_TO_EDGE),s.texParameteri(s.TEXTURE_2D,s.TEXTURE_WRAP_T,s.CLAMP_TO_EDGE),s.texImage2D(s.TEXTURE_2D,0,s.RGBA,this.resolution,this.resolution,0,s.RGBA,s.FLOAT,null),s.framebufferTexture2D(s.FRAMEBUFFER,s.COLOR_ATTACHMENT0,s.TEXTURE_2D,h,0),s.checkFramebufferStatus(s.FRAMEBUFFER)!=s.FRAMEBUFFER_COMPLETE)throw new Error("Rendering to this texture is not supported (incomplete framebuffer)");s.bindTexture(s.TEXTURE_2D,null),s.bindFramebuffer(s.FRAMEBUFFER,null),this.textures.push(h),this.framebuffers.push(c)}this.quad=s.createBuffer(),s.bindBuffer(s.ARRAY_BUFFER,this.quad),s.bufferData(s.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,1,1,-1,1]),s.STATIC_DRAW),this.initShaders(),this.initTexture(),this.setTransparentTexture(),this.loadImage(),s.clearColor(0,0,0,0),s.blendFunc(s.SRC_ALPHA,s.ONE_MINUS_SRC_ALPHA),this.visible=!0,this.running=!0,this.inited=!0,requestAnimationFrame(i)};c.DEFAULTS={imageUrl:null,resolution:256,dropRadius:20,perturbance:.03,interactive:!0,crossOrigin:""},c.prototype={loadImage:function(){var e=this;s=this.context;var t=this.imageUrl||n(this.originalCssBackgroundImage)||n(this.$el.css("backgroundImage"));if(t!=this.imageSource){if(this.imageSource=t,!this.imageSource)return void this.setTransparentTexture();var r=new Image;r.onload=function(){function t(e){return 0==(e&e-1)}s=e.context;var i=t(r.width)&&t(r.height)?s.REPEAT:s.CLAMP_TO_EDGE;s.bindTexture(s.TEXTURE_2D,e.backgroundTexture),s.texParameteri(s.TEXTURE_2D,s.TEXTURE_WRAP_S,i),s.texParameteri(s.TEXTURE_2D,s.TEXTURE_WRAP_T,i),s.texImage2D(s.TEXTURE_2D,0,s.RGBA,s.RGBA,s.UNSIGNED_BYTE,r),e.backgroundWidth=r.width,e.backgroundHeight=r.height,e.hideCssBackground()},r.onerror=function(){s=e.context,e.setTransparentTexture()},r.crossOrigin=a(this.imageSource)?null:this.crossOrigin,r.src=this.imageSource}},step:function(){s=this.context,this.visible&&(this.computeTextureBoundaries(),this.running&&this.update(),this.render())},drawQuad:function(){s.bindBuffer(s.ARRAY_BUFFER,this.quad),s.vertexAttribPointer(0,2,s.FLOAT,!1,0,0),s.drawArrays(s.TRIANGLE_FAN,0,4)},render:function(){s.viewport(0,0,this.canvas.width,this.canvas.height),s.enable(s.BLEND),s.clear(s.COLOR_BUFFER_BIT|s.DEPTH_BUFFER_BIT),s.useProgram(this.renderProgram.id),o(this.backgroundTexture,0),o(this.textures[0],1),s.uniform1f(this.renderProgram.locations.perturbance,this.perturbance),s.uniform2fv(this.renderProgram.locations.topLeft,this.renderProgram.uniforms.topLeft),s.uniform2fv(this.renderProgram.locations.bottomRight,this.renderProgram.uniforms.bottomRight),s.uniform2fv(this.renderProgram.locations.containerRatio,this.renderProgram.uniforms.containerRatio),s.uniform1i(this.renderProgram.locations.samplerBackground,0),s.uniform1i(this.renderProgram.locations.samplerRipples,1),this.drawQuad(),s.disable(s.BLEND)},update:function(){s.viewport(0,0,this.resolution,this.resolution);for(var e=0;e<2;e++)s.bindFramebuffer(s.FRAMEBUFFER,this.framebuffers[e]),o(this.textures[1-e]),s.useProgram(this.updateProgram[e].id),this.drawQuad();s.bindFramebuffer(s.FRAMEBUFFER,null)},computeTextureBoundaries:function(){var e=this.$el.css("background-size"),r=this.$el.css("background-attachment"),i=this.$el.css("background-position").split(" "),o="fixed"==r?u:this.$el,n=o.offset()||{left:pageXOffset,top:pageYOffset},a=o.innerWidth(),s=o.innerHeight();if("cover"==e)var h=Math.max(a/this.backgroundWidth,s/this.backgroundHeight),c=this.backgroundWidth*h,d=this.backgroundHeight*h;else if("contain"==e)var h=Math.min(a/this.backgroundWidth,s/this.backgroundHeight),c=this.backgroundWidth*h,d=this.backgroundHeight*h;else{e=e.split(" ");var c=e[0]||"",d=e[1]||c;t(c)?c=a*parseFloat(c)/100:"auto"!=c&&(c=parseFloat(c)),t(d)?d=s*parseFloat(d)/100:"auto"!=d&&(d=parseFloat(d)),"auto"==c&&"auto"==d?(c=this.backgroundWidth,d=this.backgroundHeight):("auto"==c&&(c=this.backgroundWidth*(d/this.backgroundHeight)),"auto"==d&&(d=this.backgroundHeight*(c/this.backgroundWidth)))}var l=i[0]||"",f=i[1]||l;l="left"==l?n.left:"center"==l?n.left+a/2-c/2:"right"==l?n.left+a-c:t(l)?n.left+(a-c)*parseFloat(l)/100:parseFloat(l),f="top"==f?n.top:"center"==f?n.top+s/2-d/2:"bottom"==f?n.top+s-d:t(f)?n.top+(s-d)*parseFloat(f)/100:parseFloat(f);var g=this.$el.offset();this.renderProgram.uniforms.topLeft=new Float32Array([(g.left-l)/c,(g.top-f)/d]),this.renderProgram.uniforms.bottomRight=new Float32Array([this.renderProgram.uniforms.topLeft[0]+this.$el.innerWidth()/c,this.renderProgram.uniforms.topLeft[1]+this.$el.innerHeight()/d]);var p=Math.max(this.canvas.width,this.canvas.height);this.renderProgram.uniforms.containerRatio=new Float32Array([this.canvas.width/p,this.canvas.height/p])},initShaders:function(){var e=["attribute vec2 vertex;","varying vec2 coord;","void main() {","coord = vertex * 0.5 + 0.5;","gl_Position = vec4(vertex, 0.0, 1.0);","}"].join("\n");this.dropProgram=i(e,["precision highp float;","const float PI = 3.141592653589793;","uniform sampler2D texture;","uniform vec2 center;","uniform float radius;","uniform float strength;","varying vec2 coord;","void main() {","vec4 info = texture2D(texture, coord);","float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);","drop = 0.5 - cos(drop * PI) * 0.5;","info.r += drop * strength;","gl_FragColor = info;","}"].join("\n")),this.updateProgram=[0,0],this.updateProgram[0]=i(e,["precision highp float;","uniform sampler2D texture;","uniform vec2 delta;","varying vec2 coord;","void main() {","vec4 info = texture2D(texture, coord);","vec2 dx = vec2(delta.x, 0.0);","vec2 dy = vec2(0.0, delta.y);","float average = (","texture2D(texture, coord - dx).r +","texture2D(texture, coord - dy).r +","texture2D(texture, coord + dx).r +","texture2D(texture, coord + dy).r",") * 0.25;","info.g += (average - info.r) * 2.0;","info.g *= 0.995;","info.r += info.g;","gl_FragColor = info;","}"].join("\n")),s.uniform2fv(this.updateProgram[0].locations.delta,this.textureDelta),this.updateProgram[1]=i(e,["precision highp float;","uniform sampler2D texture;","uniform vec2 delta;","varying vec2 coord;","void main() {","vec4 info = texture2D(texture, coord);","vec3 dx = vec3(delta.x, texture2D(texture, vec2(coord.x + delta.x, coord.y)).r - info.r, 0.0);","vec3 dy = vec3(0.0, texture2D(texture, vec2(coord.x, coord.y + delta.y)).r - info.r, delta.y);","info.ba = normalize(cross(dy, dx)).xz;","gl_FragColor = info;","}"].join("\n")),s.uniform2fv(this.updateProgram[1].locations.delta,this.textureDelta),this.renderProgram=i(["precision highp float;","attribute vec2 vertex;","uniform vec2 topLeft;","uniform vec2 bottomRight;","uniform vec2 containerRatio;","varying vec2 ripplesCoord;","varying vec2 backgroundCoord;","void main() {","backgroundCoord = mix(topLeft, bottomRight, vertex * 0.5 + 0.5);","backgroundCoord.y = 1.0 - backgroundCoord.y;","ripplesCoord = vec2(vertex.x, -vertex.y) * containerRatio * 0.5 + 0.5;","gl_Position = vec4(vertex.x, -vertex.y, 0.0, 1.0);","}"].join("\n"),["precision highp float;","uniform sampler2D samplerBackground;","uniform sampler2D samplerRipples;","uniform float perturbance;","varying vec2 ripplesCoord;","varying vec2 backgroundCoord;","void main() {","vec2 offset = -texture2D(samplerRipples, ripplesCoord).ba;","float specular = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 4.0);","gl_FragColor = texture2D(samplerBackground, backgroundCoord + offset * perturbance) + specular;","}"].join("\n"))},initTexture:function(){this.transparentPixels=new ImageData(32,32),this.backgroundTexture=s.createTexture(),s.bindTexture(s.TEXTURE_2D,this.backgroundTexture),s.pixelStorei(s.UNPACK_FLIP_Y_WEBGL,1),s.texParameteri(s.TEXTURE_2D,s.TEXTURE_MAG_FILTER,s.LINEAR),s.texParameteri(s.TEXTURE_2D,s.TEXTURE_MIN_FILTER,s.LINEAR)},setTransparentTexture:function(){s.bindTexture(s.TEXTURE_2D,this.backgroundTexture),s.texImage2D(s.TEXTURE_2D,0,s.RGBA,s.RGBA,s.UNSIGNED_BYTE,this.transparentPixels)},hideCssBackground:function(){var e=this.$el[0].style.backgroundImage;"none"!=e&&(this.originalInlineCss=e,this.originalCssBackgroundImage=this.$el.css("backgroundImage"),this.$el.css("backgroundImage","none"))},restoreCssBackground:function(){this.$el.css("backgroundImage",this.originalInlineCss||"")},dropAtMouse:function(e,t,r){var i=parseInt(this.$el.css("border-left-width"))||0,o=parseInt(this.$el.css("border-top-width"))||0;this.drop(e.pageX-this.$el.offset().left-i,e.pageY-this.$el.offset().top-o,t,r)},drop:function(e,t,r,i){s=this.context;var n=this.$el.innerWidth(),a=this.$el.innerHeight(),u=Math.max(n,a);r/=u;var h=new Float32Array([(2*e-n)/u,(a-2*t)/u]);s.viewport(0,0,this.resolution,this.resolution),s.bindFramebuffer(s.FRAMEBUFFER,this.framebuffers[0]),o(this.textures[1]),s.useProgram(this.dropProgram.id),s.uniform2fv(this.dropProgram.locations.center,h),s.uniform1f(this.dropProgram.locations.radius,r),s.uniform1f(this.dropProgram.locations.strength,i),this.drawQuad();var c=this.framebuffers[0];this.framebuffers[0]=this.framebuffers[1],this.framebuffers[1]=c,c=this.textures[0],this.textures[0]=this.textures[1],this.textures[1]=c,s.bindFramebuffer(s.FRAMEBUFFER,null)},destroy:function(){this.$el.off(".ripples").removeClass("jquery-ripples").removeData("ripples"),this.canvas.remove(),this.restoreCssBackground()},show:function(){this.visible=!0,this.$canvas.show(),this.hideCssBackground()},hide:function(){this.visible=!1,this.$canvas.hide(),this.restoreCssBackground()},pause:function(){this.running=!1},play:function(){this.running=!0},set:function(e,t){switch(e){case"dropRadius":case"perturbance":case"interactive":case"crossOrigin":this[e]=t;break;case"imageUrl":this.imageUrl=t,this.loadImage()}}};var d=e.fn.ripples;e.fn.ripples=function(t){if(!h)throw new Error("Your browser does not support WebGL or the OES_texture_float extension.");var r=arguments.length>1?Array.prototype.slice.call(arguments,1):void 0;return this.each(function(){var i=e(this),o=i.data("ripples"),n=e.extend({},c.DEFAULTS,i.data(),"object"==typeof t&&t);(o||"string"!=typeof t)&&(o?"string"==typeof t&&c.prototype[t].apply(o,r):i.data("ripples",o=new c(this,n)))})},e.fn.ripples.Constructor=c,e.fn.ripples.noConflict=function(){return e.fn.ripples=d,this}}); \ No newline at end of file