diff --git a/README.md b/README.md index 8165d6e..5d6e0d0 100644 --- a/README.md +++ b/README.md @@ -5,4 +5,34 @@ By the powers of WebGL, add a layer of water to your HTML elements which will ri Important: requires the WebGL extension `OES_texture_float` (and `OES_texture_float_linear` for a better effect). Works only with same-origin images (unless the image has the Access-Control-Allow-Origin header set appropiately). -Click [here](http://sirxemic.github.io/jquery.ripples/) for a demo. +Click [here](http://sirxemic.github.io/jquery.ripples/) for a demo and to see how to use it. + +Options +------- +| Name | Type | Default | Description | +|------|------|---------|-------------| +| dropRadius | float | 20 | The size (in pixels) of the drop that results by clicking or moving the mouse over the canvas. | +| perturbance | float | 0.03 | Basically the amount of refraction caused by a ripple. 0 means there is no refraction. | +| resolution | integer | 256 | The width and height of the WebGL texture to render to. The larger this value, the smoother the rendering and the slower the ripples will propagate. | +| interactive | bool | true | Whether mouse clicks and mouse movement triggers the effect. | +| crossOrigin | string | "" | The crossOrigin attribute to use for the affected image. For more information see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes). + +Methods +------- +### drop +Call `.ripples('drop', x, y, radius, strength)` to manually add a drop at the element's relative coordinates (x, y). `radius` controls the drop's size and `strength` the amplitude of the resulting ripple. + +### destroy +Call `.ripples('destroy')` to remove the effect from the element. + +### hide / show +Call `.ripples('hide')` and `.ripples('show')` to toggle the effect's visibility. Hiding it will also effectively pause the simulation. + +### pause / play +Call `.ripples('pause')` and `.ripples('play')` to toggle the simulation's state. + +### set +Call `.ripples('set', name, value)` to update properties of the effect. The properties that can be updated are: +- `dropRadius` +- `perturbance` +- `interactive` diff --git a/jquery.ripples.js b/jquery.ripples.js index 308c64c..7cd175a 100644 --- a/jquery.ripples.js +++ b/jquery.ripples.js @@ -266,6 +266,7 @@ 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); @@ -493,7 +494,6 @@ 'gl_FragColor = texture2D(samplerBackground, backgroundCoord + offset * perturbance) + specular;', '}' ].join('\n')); - gl.uniform1f(this.renderProgram.locations.perturbance, this.perturbance); }, dropAtMouse: function(e, radius, strength) { @@ -575,8 +575,10 @@ { switch (property) { + case 'dropRadius': + case 'perturbance': case 'interactive': - this.interactive = value; + this[property] = value; break; } }