Pixi v4 Lastest Dev
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.0/pixi.min.js"></script>
JavaScript
class Vec2d {
constructor(x, y) {
this.x = x || 0;
this.y = y || 0;
}
rotate(radians) {
let ca = Math.cos(radians);
let sa = Math.sin(radians);
return new Vec2d(ca * this.x - sa * this.y, sa * this.x + ca * this.y);
}
}
class Ripple {
constructor(x, y, stage) {
// sprite
// https://i.imgur.com/kr2RVKW.png
// http://i.imgur.com/MfPhT1Y.png
this.sprite = PIXI.Sprite.fromImage("http://i.imgur.com/MfPhT1Y.png");
this.sprite.anchor.set(0.5);
this.sprite.position.set(x, y);
this.sprite.scale.set(0.5);
stage.addChild(this.sprite);
this.filter = new PIXI.filters.DisplacementFilter(this.sprite);
}
update() {
this.sprite.scale.x += 0.08;
this.sprite.scale.y += 0.08;
}
}
var app = new PIXI.Application(window.innerWidth, window.innerHeight);
document.body.appendChild(app.view);
var world = new PIXI.Container();
app.stage.addChild(world);
//https://i.imgur.com/MLs0b5Q.jpg
//http://i.imgur.com/NSHvIJH.png
var texture = PIXI.Texture.fromImage('http://i.imgur.com/NSHvIJH.png');
var bottom = new PIXI.Sprite(texture);
bottom.width = window.innerWidth;
bottom.height = window.innerHeight;
var displacementSprite = PIXI.Sprite.fromImage("http://i.imgur.com/2yYayZk.png");
var displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
displacementFilter.autoFit = true;
displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
displacementSprite.scale.y = 0.075;
displacementSprite.scale.x = 0.075;
world.addChild(displacementSprite);
world.addChild(bottom);
world.interactive = true;
world.filters = [displacementFilter];
let ripples = [];
world.filters = [displacementFilter, ...ripples.map(f => f.filter)];
let onClick = ev => {
var {
x,
y
} = ev.data.getLocalPosition(world);
ripples.push(new Ripple(x, y, world));
world.filters = [displacementFilter, ...ripples.map(f => f.filter)];
};
world.on('pointerdown', onClick)
let wind = new Vec2d(0,...