How to make a Water Ripple Effect in ZIM?

Requests
1

I like to have a ripple effect when I mousehover a picture

This idea for example where via panel settings can be changed. Thanks to think about

2

Ripple effects are usually displacement maps. We have not been able to successfully get a displacement map working. There is a CreateJS Displacement Map filter at EaselJS/src/easeljs/filters/DisplacementFilter.js at master · CreateJS/EaselJS · GitHub - we did some experimenting but it did not work very well otherwise we would have included it with the Effects in ZIM Cat. Here is a test using a version of ZIM with a DisplacentMap Effect - we did not use it ZIM Displacement Effect

3

ok I saw it in this app

image
image1919×1079 137 KB

and because ZIM kids has also ocean pics into the background
maybe it is cool to have also..

4

so the idea I found also here code
https://code.almeros.com/water-ripple-canvas-and-javascript/

image
image1332×854 91.3 KB

image
image1211×1030 83.7 KB

how can I import it in ZIM by extra script?

5

  1. add the script in the editor.
    do not use init() but rather just the two var waterModel and var waterCanvas in your Frame ready code.

  2. Then try passing the waterCanvas into a new Bitmap(waterCanvas).center(); See what happens.

6

I did not get the watermodel
because it is in a div "holder" with the name waterModel
or the script is not loading?
where can I save my script?
I have

7

Look for the script in a CDN like CDNjs.

You can make a div tag in JS:

const waterHolder = document.createElement("div");
document.body.appendChild(waterHolder);
waterHolder.style.visibility = "hidden";