I'm using background #000 and would like to change the color of the ripple. How to change?

[cristianodemari]

I'm using background #000 and would like to change the color of the ripple. How to change?

[sirxemic]

This plugin currently only works for background images, so if you want a black background for now you'd have to use a black texture.

To change the color of the ripple you'd have to patch it locally. See

jquery.ripples/jquery.ripples.js

Line 719 in ee02d53

'float specular = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 4.0);',

You can change that line to something like:

'float specularFactor = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 4.0);',
'vec4 specular = vec4(1.0, 0.5, 0.0, 1.0) * specularFactor;',

where vec4(1.0, 0.5, 0.0, 1.0) is your color of choice (in this case that would represent rgba(255,127,0,1)). Don't forget to always use decimals here or it won't work.

If you want to change the color continuously, I'm afraid that would require more work. I'll see that as an enhancement.

[gooca]

Would also like this feature, this way I can draw the background in css and then animate it directly

[michael2h4ng]

@sirxemic I'm just trying out this plugin and would like to change the color of the ripple to black. I played around with the patch you provided, but I'm having difficulties changing the color to black.

I was able to change the color to red, green, and blue, but once I set it to vec4(0.0, 0.0, 0.0, 1.0), in which case I believe it would represent rgba(0, 0, 0, 1), the ripple looks completely white. Excuse my ignorance, but did I understand this correctly?

[sirxemic]

@monomichael First of all, you can't change the color to black with the method I described. The specular highlights are blended additively, so setting the color to black would make the specular highlights just vanish. However, something like the following would make the ripples black:

'float specularFactor = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 2.0);',
'vec4 specular = vec4(0.0, 0.0, 0.0, 1.0);',
'gl_FragColor = mix(texture2D(samplerBackground, backgroundCoord + offset * perturbance), specular, specularFactor);',

But what's odd is that you see a white ripple while it should be transparent...I cannot reproduce it myself, so could you show me by any chance a small demo on jsfiddle or codepen to demonstrate the issue?

[michael2h4ng]

@sirxemic Thanks. It totally works. I'm new to WebGL and it's great to learn from your plugin. I actually mistook the transparent ripple for white. Sorry about the confusion.