Pixi v3 Displacement
Experiment
HTML
<script src="https://cdn.rawgit.com/GoodBoyDigital/pixi.js/v3.0.11/bin/pixi.js"></script>
CSS
canvas {
display:block;
width: 100%;
height:100%;
}
JavaScript
(function() {
canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
renderer = new PIXI.autoDetectRenderer(canvas.width, canvas.height, {
view: canvas,
transparent: false,
backgroundColor: 0x223344
});
stage = new PIXI.Container();
Displacement_Sprite = new PIXI.Sprite.fromImage('http://i.imgur.com/MfPhT1Y.png');
Displacement_Sprite.anchor.set(0.5);
Displacement_Sprite.scale.set(100);
Displacement_Sprite.position.set(window.innerWidth / 2, window.innerHeight / 2);
Displacement_Filter = new PIXI.filters.DisplacementFilter(Displacement_Sprite);
//Displacement_Filter.padding = 50;
BG_Container = new PIXI.Container();
BG_Container.pivot.set(window.innerWidth / 2, window.innerHeight / 2);
BG_Container.position.set(window.innerWidth / 2, window.innerHeight / 2);
BG_Sprite = new PIXI.Sprite.fromImage('https://i.imgur.com/uNTkO5B.jpg');
BG_Sprite.anchor.set(0.5);
BG_Sprite.scale.set(0.75);
BG_Sprite.position.set(window.innerWidth / 2, window.innerHeight / 2);
BG_Sprite.filters = [Displacement_Filter];
BG_Container.addChild(BG_Sprite);
BG_Container.addChild(Displacement_Sprite);
stage.addChild(BG_Container);
//Displacement_Filter.scale.set(200,200);
function Run() {
currentDate = new Date();
currentTime = currentDate.getTime();
//console.log(Math.sin(currentTime*0.001)*1000);
requestAnimationFrame(Run);
renderer.render(stage);
//Displacement_Sprite.rotation += 0.1;
Displacement_Filter.scale.set(Math.sin(currentTime * 0.001) * 100 + 100);
}
Run();
}).call(this);