PIXI.js Displacement Mapped Text

index.html

<label for="input">Type Here</label>
<textarea name="input" id="input">
Hello
world
</textarea>

pixi-js-displacement-mapped-text.markdown

PIXI.js Displacement Mapped Text

A Pen by Shaw on CodePen.

License.

script.js

console.clear();

const fontSize = 15;
document.body.style.fontSize = fontSize + 'vw';

function ease(current,target,ease){ return current + (target - current) * ( ease || 0.2 ); }

var width = window.innerWidth;
var height = window.innerHeight;


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

document.body.appendChild(renderer.view);


/* ---------------------------------- */


const 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;
displacementSprite.x = displacementSprite._x = 0;
displacementSprite.y = displacementSprite._y = 0;

const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
displacementFilter.padding = 100;
displacementFilter.scale.x = 85;
displacementFilter.scale.y = 2;


var count = 0;

function animate() {
  requestAnimationFrame(animate);
  
  displacementSprite.x = ease(
    displacementSprite.x, 
    displacementSprite._x + (Math.sin(count) * 20), 
    0.05
  );
  displacementSprite.y = ease(
    displacementSprite.y, 
    displacementSprite._y + (Math.cos(count) * 10),
    0.05
  );
  
  count += 0.01;
  renderer.render(stage);
}
animate();

/* ---------------------------------- */ 

function TrackPointer(callback){

  var frame;
  var pointer = {
    cx: 0,
    cy: 0,
    px: 0,
    py: 0,
    track: function(e){
      e = e.touches ? e.touches[0] : e;
      // pointer.cx = ((e.clientX / window.innerWidth) - 0.5) * 2;
      // pointer.cy = ((e.clientY / window.innerHeight) - 0.5) * 2;
      pointer.px = e.clientX;
      pointer.py = e.clientY;
      frame = frame || requestAnimationFrame(update);
    },
  };

  callback = (callback || function(){});

  function update(){
    frame = null;
    callback(pointer);
  }

  document.addEventListener('mousemove',pointer.track);

  return pointer;
}

TrackPointer(function(pointer){
  displacementSprite._x = pointer.px / 2;
  displacementSprite._y = pointer.py / 2;
});

/* ---------------------------------- */

const style = new PIXI.TextStyle(
  {
    fontFamily: '"Rubik Mono One", Notable, monospace, Arial', 
    fill: 0xf5c944, 
    align: 'center',
    wordWrap: true,
    wordWrapWidth: window.innerWidth,
    whiteSpace: 'normal',
    padding: 50
  });


function updateStyle(){
  style.fontSize = fontSize * (window.innerWidth / 100);
  style.lineHeight = style.fontSize * 0.8;
  style.padding = 50 + Math.random();
}
updateStyle();

const text = new PIXI.Text('',style);
text.filters = [displacementFilter];

stage.addChild(displacementSprite);
stage.addChild(text);


function updatePosition(){
  text.pivot.x = ( text.width / 2 );
  text.pivot.y = ( text.height / 2 );
  text.position.x = (renderer.width / 2);
  text.position.y = (renderer.height / 2);
}

function updateText(value){
  text.text = value;
  updatePosition();
}

const elInput = document.getElementById('input');
updateText(elInput.value);
// text.scale.set(0.5, 0.5);

elInput.addEventListener('input', (e)=>{
  updateText(elInput.value);
});



window.addEventListener('resize',function(){
  renderer.width = window.innerWidth;
  renderer.height = window.innerHeight;
  style.wordWrapWidth = window.innerWidth;
  updateStyle();
  updatePosition();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.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: 95px;
  line-height: .8;
}

canvas{
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


label { 
  position: fixed;
  top: 0.5em;
  font-size: .2em;
  text-align: center;
  width: 100%;
  color: #FFF;
  cursor: pointer;
}
#input {
  position: fixed;
  left: 0;
  right: 0;
  top: .5em;
  z-index: 2;
  width: 100%;
  height: 5em;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  padding: .5em 24%;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.5em;
  margin: auto;
  white-space: normal;
  opacity: 0.3;
  overflow-x: hidden;
  overflow-y: auto;
  
  &:hover { opacity: .7; }
}