Skip to content

Instantly share code, notes, and snippets.

@shshaw shshaw/index.html
Created Sep 21, 2018

Embed
What would you like to do?
Pixi JS Displacement Text Effect
<div id="px-render"></div>
<textarea id="input">hello</textarea>

Pixi JS Displacement Text Effect

Creating a displacement effect with PixiJS

A Pen by Shaw on CodePen.

License.

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);
<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>
// @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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.