Looking for some clarification on the ShockwaveFilter center property.

[Danisimo]

Hello, I'm learning filters and I'm having an issue positioning the shockwave filter where I want it.

What I have is a pixi container. Inside this container I have a sprite. That is the image I'm applying my filters to. One thing to note is that the Sprite is very large. It does not fit inside the screen. Instead it is positioned to be centered on the screen. This is intended.
Next I have multiple small display objects inside the pixi container. These objects move around, after some time passes I want to check if these objects are on top of my sprite and if they are, I'd like create a shockwave on that point.

Here's where the issue comes up. My understanding is that all I have to do is get the local coordinates of the moving object from the perspective of the sprite, like so:
 

let filterCoords = sprite.toLocal(movingOjb.position, container);
let filter = new ShockwaveFilter(filterCoords);

But the problem is these coordinates aren't correct. More specifically the Y coordinates are correct but the X coordinates aren't which really confuses me.
I've been trying to understand how exactly the filter coordinates interact with images that do not fully fit on the screen.

[jonforum]

From what i remember, ShockwaveFilter is a pain to understand and calibrate.
Coord are relative to screen coord if am not wrong, but am not remember.
What i deed to fully debug and understand this filter is add a Gsap timeline controler, to play pause and slow the filter motion and play live with props and coord.
This code should help you ? maybe gl

note: look for the array center[], if am not wrong this can help to position.

 

const doShockWave = ()=>{
            const tl = gsap.timeline({id:'doShockWave'})
            const ease = SlowMo.ease.config(0.1, 0.7, false);
                tl.fromTo(Background.c, 1, {alpha:0.2},{alpha:1, ease:ease },0);
                tl.fromTo(ShockwaveFilter, 2,
                    { time:0, amplitude:-100, wavelength:0  , speed:200,brightness:1.3,                    },
                    { time:5, amplitude: 10  , wavelength:390, speed:250,brightness:1.6  , ease:ease },0 );
                tl.to($mouse.l.falloff, 1, {'0':0.8,'1':3,'2':20, ease:Power4.easeOut },0);
                tl.to($mouse.l, 1, {brightness:0.8,lightHeight:0.02, ease:Power4.easeOut },0);
                tl.add(() => {
                    zoomFilter_d.center[1] = 400;
                    $audio._sounds.battleA0.play({start:15.7}).Volume(0.5);
                })
                tl.eventCallback("onUpdate", ()=>{
                    MaskCircle.scale.set(ShockwaveFilter.time+0.5);
                })
            return tl;
        }

edit:what your can maybe try is 

new ShockwaveFilter( {center:[filterCoords.x,filterCoords.y]} );

 

Edited October 30, 2020 by jonforum

[ivan.popelyshev]

its related to filterArea. if filterArea not specified, its calculated through getBounds()

by default this thing also intersected with screen if you dont specify autoFit=false. So if you filter an object that goes to side of screen, well, "center" will never go outside screen. 

If you want to speicfy pixel coord, i recommend just get into filter programming and edit this filter  https://github.com/pixijs/pixi.js/wiki/v5-Creating-filters