Create ripple effects with PixiJS

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. Here we demonstrate how to introduce displacement ripples with JavaScript. Check out MustafaCelik for a great example of the effect in action.

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

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: