Pixi JS Displacement Text Effect

index.html

<div id="px-render"></div>

<textarea id="input">hello</textarea>

pixi-js-displacement-text-effect.markdown

Pixi JS Displacement Text Effect

Creating a displacement effect with PixiJS

A Pen by Shaw on CodePen.

License.

script.js

console.clear();

var width = window.innerWidth;
var height = window.innerHeight;
var playground = document.getElementById('px-render');

var canvas;

var ratio = 150 / 830;

var count = 0;
var raf;

var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(width, height, {transparent:true});
renderer.autoResize = true;

playground.appendChild(renderer.view);


var tp, preview;
var displacementSprite,
    displacementFilter,
    stage;



var displacementSprite = PIXI.Sprite.fromImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/39255/displacement-cross.jpg');
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
// displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.MIRRORED_REPEAT;
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.CLAMP;

displacementSprite.scale.y = .8;
displacementSprite.scale.x = .6;
//

function distortText(text){

  var preview = new PIXI.Text(
    text,
    {
      fontFamily: '"Rubik Mono One", Notable, monospace, Arial', 
      fontSize: 95, 
      lineHeight: 50, 
      fill: 0xf5c944, 
      align: 'center'
    });

  preview.pivot.x = ( preview.width / 2 );
  preview.pivot.y = ( preview.height / 2 );

  preview.position.x = (renderer.width / 2);
  preview.position.y = (renderer.height / 2);

  // displacementSprite = PIXI.Sprite.fromImage('https://res.cloudinary.com/dvxikybyi/image/upload/v1486634113/2yYayZk_vqsyzx.png');

  displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
  
  displacementFilter.padding = 200;
  displacementFilter.scale.x = 55;
  displacementFilter.scale.y = 5;

  preview.filters = [displacementFilter];
  stage.addChild(displacementSprite);

  stage.addChild(preview);
  
//   console.log(displacementFilter);

//   var tl = new TimelineMax({ repeat: -1, yoyo: true, repeatDelay: 2 });

//   tl.to( displacementSprite, 3, {
//     x: 200,
//     ease: Power4.easeInOut,
//   });


//   tl.to( displacementSprite, 3, {
//     y: 100,
//     ease: Power2.easeInOut,
//   }, 2);
  //   displacementSprite.y = count*4;
}

function animate() {
  raf = requestAnimationFrame(animate);

  //   displacementSprite.x = count*2;
  //   displacementSprite.y = count*4;

  //   count += 0.05;
  renderer.render(stage);
}
animate();

setTimeout(()=>{
  distortText('hello');
},500);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

style.scss

// @import url('https://fonts.googleapis.com/css?family=Notable');
@import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One');

body{
  color: saturate(lighten(#C7A53F,10%),35%);
  width: 100%;
  height: 100%;
  background: #222;
  overflow: hidden;
  
  font-family: "Rubik Mono One", monospace;
  font-size: 45px;
}
#px-render{
  width: 100%;
  height: 100%;
}
canvas{
  display: block;
  max-width: 100%;
  max-height: 100%;
}

#input {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #000;
  border: none;
  color: inherit;
  font: inherit;
  padding: .25em;
  text-align: center;
}