Graphics Jitter - Pixi.js v4
I am trying to figure out how to remove jitter, and the weird position offset between the lines and the displacementSprite.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.0.0/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script>
JavaScript
var PixiAnimation = function() {
this.renderer = PIXI.autoDetectRenderer(
1024,
1024 / 16 * 9,
{
backgroundColor: 0x000000
}
);
document.body.appendChild(this.renderer.view);
this.mousePosition = this.renderer.plugins.interaction.mouse.global;
this.stageMargin = 30;
this.stageWidth = this.renderer.width;
this.stageHeight = this.renderer.height;
}
PixiAnimation.prototype = {
stage: new PIXI.Container(),
lineContainer: new PIXI.Container(),
thicknessNum: 4,
displacementSprite: PIXI.Sprite.fromImage('https://09f63dafcdb7911ba503-dc24ba52ac1cde84627306eeec6ba986.ssl.cf3.rackcdn.com/tile.jpg'),
displacementFilter: null,
mouseSpeed: 0,
mouseObject: null,
stageSpeed: new PIXI.Point(),
lines: [
{
speed: 10.3,
color: 0xffffff,
thickness: 1.2,
tracker: new PIXI.Point(),
currentDrawPoint: new PIXI.Point(),
lastDrawPoint: new PIXI.Point(),
points: [],
graphic: new PIXI.Graphics()
}, {
speed: 11,
color: 0xe3e3e3,
thickness: 1.0,
tracker: new PIXI.Point(),
currentDrawPoint: new PIXI.Point(),
lastDrawPoint: new PIXI.Point(),
points: [],
graphic: new PIXI.Graphics()
}, {
speed: 11.7,
color: 0xffffff,
thickness: 1.2,
tracker: new PIXI.Point(),
currentDrawPoint: new PIXI.Point(),
lastDrawPoint: new PIXI.Point(),
points: [],
graphic: new PIXI.Graphics()
}
],
init: function() {
this.displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite, 100);
this.mouseObject = this.lines[0].tracker;
for(var i = 0, len = this.lines.length; i < len; i++) {
...