hello and welcome to red stapler channel. In this tutorial we are going to show you
how to create a water ripple effect from scratch using javascript and pixi.js
library in just a couple minutes ready let's check it out
pixie chess is a 2D WebGL JavaScript library that let you create lots of
stunning effects easily with just a few lines of code first let's start with
download the latest version of pixi.js and included to your page. Here
is the example page the only CSS we need for this tutorial is margin:0 and
overflow:hidden now let's start with initializing pixi.js first we need
to create an application an application object has necessary components to
render your scene like renderer root container and time tracking this is the
fastest way to start using pixi.js unless you want to manually create them one by
one I'm going to supply our current viewport width and height pass the size
then add the scene to our HTML page as canvas element using app.view and
next we will start with adding image to the scene first let's create a sprite
from jpg image then set width and height
and then add it to the stage now to create the ripple effect
we need to move the image pixels away from their original position to create a
distortion. With pixi.js, this can be done with displacement map. Basically
you just create a random variation of black and white pattern and use it to
map the original image for this tutorial I'm going to use Photoshop to create one
first create a new square image then use render filter and select cloud and
that's it that's all you need now I'm going to create a sprite from this image
then create a displacement filter from the sprite we need to set the wrap mode
to repeat this is to make sure that the displacement cover the entire image then
add it to the stage and apply the future
at this point everything is ready but still you won't see much of the
difference we need to create an animation to move the displacement map
to be able to see the ripple effect let's create animate function and move the
displacement map position at the end of the function we will call requestAnimationFrame
to start the animation loop. That looks pretty good but if
you look a little bit closer you will see a distortion around the edge this is
normal because we don't have any pixel beyond that we can fix it by zooming in
a little bit just apply the transform scale to the renderer
also I think the ripple is a little bit too dense so I'm going to scale the
displacement map too
you can try change and experiment with different displacement maps you create
various ripple effect. And that's it! Just a bit over 20 lines of code for this
tutorial hope you guys enjoy and if you love to see more of this don't forget to
like or subscribe to stay tuned with us thanks for watching and see you next
time bye