PixiJS Wave Effect

[ReaperGermany]

Hello,

I just only now learn Pixi and have a problem. I have a task to make an wave-effect that applies to the image on this site - https://nowyteatr.org/pl

Please tell me about the steps . I studied the documentation, but so far it’s very difficult.

[Dergachev Mihail]

https://pixijs.io/examples/#/filters-basic/displacement-map-flag.js

This example can cover all your needs, I think. There is cloud texture used, in your example simple gray gradient

You can control animation with this values
displacementFilter.scale.x = 30;
displacementFilter.scale.y = 60;

[ReaperGermany]

9 minutes ago, Dergachev Mihail said:

https://pixijs.io/examples/#/filters-basic/displacement-map-flag.js

Я думаю, что этот пример может удовлетворить все ваши потребности. Используется текстура облака, в вашем примере простой серый градиент.

Вы можете управлять анимацией с помощью этих значений
displacementFilter.scale.x = 30;
displacementFilter.scale.y = 60;

Yes, I thought the same. I tried to apply it with infynity execution, as in the example, but on the site a wave effect begins of the hover and after the hovering ends the animation continues to finish its movement.

Edited May 9, 2020 by ReaperGermany

[Dergachev Mihail]

in example:
app.ticker.add(functionWhichEvaluateEveryFrame)

you can use this function to run and stop animation. when mouse over element - just change variable values.

Here is some pseudo code, I hope it should work

progress = 30; // nothing happen
mouseEventFired() {
  animationStart = true;
  progress = 0;
}

animate(delta) {
  if (animationStart && progress < 30) {
    displacement.scale.x = 30 - progress;
    progress += 1 * delta;
  } else {
    progress = 30;
  }
}

 

[ReaperGermany]

1 hour ago, Dergachev Mihail said:

in example:
app.ticker.add(functionWhichEvaluateEveryFrame)

you can use this function to run and stop animation. when mouse over element - just change variable values.

Here is some pseudo code, I hope it should work

progress = 30; // nothing happen
mouseEventFired() {
  animationStart = true;
  progress = 0;
}

animate(delta) {
  if (animationStart && progress < 30) {
    displacement.scale.x = 30 - progress;
    progress += 1 * delta;
  } else {
    progress = 30;
  }
}

 

thank you very much, but   the wrong effect comes out