Applying effect on multiple images

[archimedo]

Hi everyone, and thank you Martin for developing such an cool library. I would like to apply this effect on several images on a website I'm building with Wordpress. Starting from that example I've tried adding another image but unfortunately I wasn't able to get the same effect. It just show one image and, I'm not sure why, it appears black.

In this codepen there's my attempt. I have to say I'm quite new to WebGl and Shaders but I've been trying to keep up

https://codepen.io/archemede/pen/mdPjRve

Can you help understand what I'm doing wrong?

Thank you so much!

[martinlaxenaire]

Hi @archimedo,

did you have a look at that pen: https://codepen.io/martinlaxenaire/pen/jeZyZM ?
You just basically need to add one plane per HTML element in your javascript and loop through them to update their mouse position uniforms. That should do the trick!

Cheers,

[archimedo]

Thank you so much for your answer and for your example, that was super useful.
Now I'm experimenting a little bit with that, trying to make it fit my image gallery, I was just wondering one thing: in my page, every picture is inside a link tag, I tried quickly to add an between the block in your codepen but it seems that the link is not working (also the cursor doesn't turn in a pointer). Is this related to the js code?
Thank you!

[archimedo]

I could fix that issue by setting the opacity to:0 instead of not displaying the image! the links now work just fine!
And I could also apply the effect to my gallery, Thank you again for your example, that helped me a lot!!

I just wanted to ask you if it's possibile to soften the effect a little bit. My gallery has rows with 3 columns so the images aren't really big, so when I hover a picture, the closest ones start to wave as well. I was looking a at the code trying figuring out where the intensity of the wave is defined but I couldn't find.

Can you help which variables should I tweak in order to make the wave effect a bit less intense?

Thank you so much!

[martinlaxenaire]

Well, there's an uniform called mouseStrength, I thought this would be pretty clear what it was doing :)

Just tweak the last line of code where the mouseStrength uniform is assigned, like that maybe:

// reassign mouse strength (you can try with different distanceFactor values)
const distanceFactor = 0.5; 
plane.uniforms.mouseStrength.value = 1 - Math.sqrt(Math.pow(mouseCoords.x, 2) + Math.pow(mouseCoords.y, 2)) * distanceFactor;

Cheers,