Jump to content

Looking for some clarification on the ShockwaveFilter center property.


Recommended Posts

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.

Link to comment
Share on other sites

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;
                tl.eventCallback("onUpdate", ()=>{
            return tl;

edit:what your can maybe try is 

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


Edited by jonforum
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...