SOLVED: Dynamically changing Displacement Filter's scale based on mouse pos

[khandev]

I want to map the displacement scale value from 0 to 50 based on the mouse's X position But this code is not working:

class Sketch{
    constructor (){
        this.width = window.innerWidth;
        this.height = window.innerHeight;
        
        // Initialise application
        this.app = new PIXI.Application({ 
            width: this.width,
            height: this.height,
            background: 0x363636,
            antialias: true,    // default: false
            resizeTo: window
        })
          
        this.app.view.style.width = this.width + 'px';
        this.app.view.style.height = this.height + 'px';


        // Variables
        this.loader = PIXI.Assets;
        this.sprite = PIXI.Sprite;
        this.render = this.app.renderer;
        this.rWidth = this.render.width;
        this.rHeight = this.render.height;
        this.stage = this.app.stage;
        this.angle = 0.01;
        this.container = new PIXI.Container();
        this.mouseCoords = 0;
        this.dispScale = 1; // Max: 50

        document.body.appendChild(this.app.view);
        this.load();
    }

    load() {
        // Texture loader for caching
        this.loader.add('img1', 'image.jpg');
        this.loader.add('noise', 'noise.png');
        
         // Now add all the added values in comma separated array
        this.loader.load(['img1', 'noise'])
        .then( textures => this.init(textures));
    }

    init(textures){
        
        this.container.position.set(this.rWidth/2, this.rHeight/2);

        // Enable interactivity!
        this.stage.eventMode = 'dynamic';
        this.stage.hitArea = this.app.screen;
        
        let image = this.sprite.from(textures.img1);
        image.width = this.rWidth;
        image.height = this.rHeight * (this.rWidth / this.rHeight);
        image.anchor.set(0.5);
        
        let displaceMap = this.sprite.from(textures.noise);
        displaceMap.width = this.rWidth;
        displaceMap.height = this.rHeight * (this.rWidth / this.rHeight);
        displaceMap.anchor.set(0.5);
        displaceMap.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
        

        let dFilter= new PIXI.filters.DisplacementFilter(displaceMap, this.dispScale);
        dFilter.padding = 10;
        
        this.container.addChild(image);
        this.container.addChild(displaceMap);
        this.container.filters = [dFilter];
        
        this.stage.addChild(this.container);

        
        this.mouseCoords = {
            x: 0,
            y: 0
        }

        this.stage.addEventListener('pointermove', (e) => {
            this.mouseCoords.x = e.global.x;
            this.mouseCoords.y = e.global.y;
        })

        this.animate(displaceMap);
    }
     
    // Animation Loop
    animate(displaceMap){

        this.app.ticker.add((delta) => {
          	// THIS SHOULD WORK BUT IT ISNT
            this.dispScale = map(this.mouseCoords.x, 0, this.width, 0, 50);
            displaceMap.rotation += delta/30;
        });

    }    
}


new Sketch;

 

Edited July 25, 2023 by khandev
Solved

[khandev]

Nevermind, got it working by changing value of `

this.dispScale.scale.x