How to make a Water Ripple Effect in ZIM?

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

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

ok I saw it in this app


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

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



how can I import it in ZIM by extra script?

  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.

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

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";