Create ripple effects with PixiJS

Create ripple effects

There are a lot of interesting effects that can be added to a page to increase engagement, but it is important to pick effects that combine well with the overall aesthetic of a site (nail the aesthetic of your site with a brilliant website builder tool). Here we demonstrate how to introduce displacement ripples with JavaScript. Check out MustafaCelik for a great example of the effect in action.

Want engagement analytics on tap? Web hosting services can help with this. And be sure to keep your data safe in top cloud storage.

1. Create ripples

In order to create ripple effects PixiJS will be used since this provides simple displacement effects. Here the JavaScript code sets up the variables needed and loads the images to create the effect. Once the images are loaded the ‘setup’ function is called.

var app = new PIXI.Application(window.innerWidth, window.innerHeight);
document.body.appendChild(app.view);
app.stage.interactive = true;
var posX, displacementSprite, displacementFilter, bg, vx;
var container = new PIXI.Container();
app.stage.addChild(container);
PIXI.loader.add(“img/ripple.png”).add(“img/bg.jpg”).load(setup);

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.

function setup() {
  posX = app.renderer.width / 2;
  displacementSprite = new PIXI.Sprite(PIXI.loader.resources[“img/ripple.png”].texture);
  displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
  displacementSprite.anchor.set(0.5);
  displacementSprite.x = app.renderer.width 
/ 2;
  displacementSprite.y = app.renderer.height 
/ 2;
  vx = displacementSprite.x;

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.

app.stage.addChild(displacementSprite);
  container.filters = [displacementFilter];
  displacementFilter.scale.x = 0;
  displacementFilter.scale.y = 0;
  bg = new PIXI.Sprite(PIXI.loader.resources[“img/bg.jpg”].texture);
  bg.width = app.renderer.width;
  bg.height = app.renderer.height;
  container.addChild(bg);
  app.stage.on(‘mousemove’, onPointerMove).on(‘touchmove’, onPointerMove);
  loop();
}

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.

function onPointerMove(eventData) {
  posX = eventData.data.global.x;
 }

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.

function loop() {
  requestAnimationFrame(loop);
  vx += (posX - displacementSprite.x) * 0.045;
  displacementSprite.x = vx;
  var disp = Math.floor(posX - displacementSprite.x);
  if (disp < 0) disp = -disp;
  var fs = map(disp, 0, 500, 0, 120);
  disp = map(disp, 0, 500, 0.1, 0.6);

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.

  displacementSprite.scale.x = disp;
  displacementFilter.scale.x = fs;
}
 map = function(n, start1, stop1, start2, stop2) {
  var newval = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
  return newval;
};

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

An image displaying the speakers appearing at Generate London and providing a link to buy tickets.

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 now

Related articles:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Mark Shufflebottom

Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning near Toronto, Canada. Highlights from Mark's extensive industry practice include a top four (worldwide) downloaded game for the UK launch of the iPhone in December 2007. Mark created the title sequence for the BBC’s coverage of the African Cup of Nations. He has also exhibited an interactive art installation 'Tracier' at the Kube Gallery and has created numerous websites, apps, games and motion graphics work.