1. Create ripples
2. Create the displacement
In the ‘setup’ function the displacement sprite is created that will create the ripple effect and this is added to a displacement filter. It’s then set to move its anchor point to the centre of the image and positioned on the screen.
3. Finish the setup
To finish off the ‘setup’ function, the displacement filter scale is set and the background positioned. Notice the scale is ‘0’ for the displacement, that’s because it will be set to a height as soon as the mouse moves.
4. Get the mouse
The next code just grabs the position of the mouse on the x-axis whenever the mouse moves. This will be used to trigger the amount of ripple displacement effect when the user moves their mouse. More movement will make the ripple bigger.
5. Make it move
The ‘loop’ function continually updates the screen. A velocity for the x-axis is worked out using the position of the mouse and the ripple. This is then mapped onto the filter to give a value between 0 and 120.
6. Finish the code
At the end of the ‘loop’ function the sprite is scaled to the amount of displacement and filter scaled to the amount of depth it should have. Finally, the map function is declared that maps value ranges to new values.
Find the full code for this tutorial on FileSilo.This article originally appeared in Web Designer magazine. Subscribe here.
Learn more at Generate London 2018
Get to see Sarah Parmenter, Bruce Lawson, Richard Rutter and more talk at Generate London 2018
Special effects and beyond is where the web is heading and Generate speaker Marpi Marcinowski’s creative work revolves around building 3D worlds, creating immersive AR, VR experiences and storytelling in style with a difference.His talk will take you on a journey through all interactive media and technologies and look at it from the perspective of the user. Don't miss out, get your ticket nowRelated articles: