Pixi v3 Shockwave Filter
Experimenting
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.4/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi-filters/1.0.8/filters.min.js"></script>
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();
Shockwave_Filter = new PIXI.filters.ShockwaveFilter();
Shockwave_Filter.center.x = 100;
Shockwave_Filter.center.y = 100;
console.log(Shockwave_Filter)
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('http://i.imgur.com/6okdWJu.jpg?1');
BG_Sprite.anchor.set(0.5);
BG_Sprite.scale.set(0.15);
BG_Sprite.position.set(window.innerWidth / 2, window.innerHeight / 2);
BG_Sprite.filters = [Shockwave_Filter];
BG_Container.addChild(BG_Sprite);
stage.addChild(BG_Container);
//Displacement_Filter.scale.set(200,200);
function Run() {
currentDate = new Date();
currentTime = currentDate.getTime();
requestAnimationFrame(Run);
renderer.render(stage);
Shockwave_Filter.time = (Shockwave_Filter.time >= 1 ) ? 0 : Shockwave_Filter.time + 0.01;
}
Run();
}).call(this);