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 Mapped Text
<label for="input">Type Here</label>
<textarea name="input" id="input">
Hello
world
</textarea>
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();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.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: 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; }
}
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.