Creating Multiples of the Same Displacement Filter and Applying it to a Background Container

[omrtre]

The premise is that I have n Universes created, each having their own Displacement Filter and Sprite created within a createUniverse function. The displacement filter targets gridGutterspace, a tiling sprite that acts as a background container in this instance, and the Displacement Sprite itself, follows the position of a Universe Bubble.

I get the Displacement Filter and Sprite for only one out of n of the universes I have created, but none for the others that are generated.

How can I add a displacement filter + sprite to all the other n Universes that are created?

It seems as if 'containerBG.filters = [displacementFilter]' is whats holding me back here.

 function generateBigBang() {
    
    let app2 = new PIXI.Application({ width: menuUniverseWidth, height: menuUniverseHeight, background: '#f3ffff',
    });

    document.getElementById("gutterspace-backdrop").appendChild(app2.view);

    const textureGutterspace = PIXI.Texture.from('/assets/app/uniwki/gridGutterspace.png')

    const gridGutterspace = new PIXI.TilingSprite(
        textureGutterspace,
        app2.screen.width,
        app2.screen.height,
    );

    const containerBG = new PIXI.Container();

    containerBG.addChild(gridGutterspace);

    app2.stage.addChild(containerBG);

    app2.ticker.add(() => {
        gridGutterspace.tilePosition.x += .5;
        gridGutterspace.tilePosition.y += .5;
    });

    const uniBubbles = [];

    {% for col in site.collections %}
        {% if col.label != "posts" %}
            createUniverse("{{col.label | remove: 'uni-'}}");
        {% endif %}
    {% endfor %}

    function createUniverse(uniCode) {
        const container = new PIXI.Container();
        app2.stage.addChild(container);

        const textUniverseStyle = new PIXI.TextStyle({
            fontFamily: 'Futura',
            fontSize: 15,
            fill: ['#FFD700'],
            dropShadow: true,
            dropShadowColor: '#7851a9',
            dropShadowDistance: 4,
        });

        const textUniverse = new PIXI.Text(uniCode, textUniverseStyle);
        textUniverse.alpha = 0;
        textUniverse.anchor.set(0.5);

        container.addChild(textUniverse);

        const uniBubble = PIXI.Sprite.from('/assets/app/uniwki/system-ui/icon/icon_uniwki-ui_Universe-Bubble.png');
        uniBubble.anchor.set(0.5);
        uniBubble.scale.x = .4;
        uniBubble.scale.y = .4;
        uniBubble.x = Math.random() * app2.screen.width / 2 + 100;
        uniBubble.y = Math.random() * app2.screen.height / 2 + 100;
        let velocity = { x: Math.random() * 2 - 1, y: Math.random() * 2 - 1 }; // Adjusted velocity for better visibility

        // Function to open an external link
        function openExternalLink() {
            window.open('https://' + uniCode + '.uniwiki.app'); // Replace with your desired link
        }

        /*
        function revealUniverse() {
            if (textUniverse.alpha = 0) {
                textUniverse.alpha += .2;
            } else {
                textUniverse.alpha = 0;
            }
        }*/

        // Make the main circle interactive and add a click event listener
        uniBubble.interactive = true;
        uniBubble.on('click', openExternalLink);

        uniBubble.on('mouseover', (event) => {
            if (textUniverse.alpha == 0) {
                textUniverse.alpha = 1;
            } 
        });

        uniBubble.on('mouseleave', (event) => {
            textUniverse.alpha = 0;
        });

        const displacementSprite = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/displace.png');
        const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
        containerBG.filters = [displacementFilter]

        displacementSprite.anchor.set(0.5);
        displacementSprite.scale.x = 2;
        displacementSprite.scale.y = 2;
        displacementFilter.scale.x = 100;
        displacementFilter.scale.y = 100;


        container.addChild(displacementSprite);

        const numCircles = 14;
        const circles = [];

        for (let i = 0; i < numCircles; i++) {
            const circle = new PIXI.Graphics();
            circle.beginFill(0xFFFFFF);
            circle.drawCircle(0, 0, 20);
            circle.endFill();

            const angle = (i / numCircles) * Math.PI * 2;
            const distance = 80;

            // Calculate initial positions relative to the main circle
            const initialX = uniBubble.x + Math.cos(angle) * distance;
            const initialY = uniBubble.y + Math.sin(angle) * distance;

            circle.x = initialX;
            circle.y = initialY;

            // Assign random scale and rotation speeds
            circle.scaleSpeed = Math.random() * 0.00045 + 0.0005; // Random scale speed between 0.0005 and 0.001
            circle.rotationSpeed = 0.002 - 0.0001; // Random rotation speed between -0.0001 and 0.0001

            // Introduce individual delays for scale animation
            circle.scaleDelay = Math.random() * 3000; // Random delay between 0 and 1000 milliseconds

            // Randomize scale threshold between 0.3 and 0.7
            circle.scaleThreshold = Math.random() * 0.6 + 0.3;

            circles.push({ circle, initialX, initialY });
            container.addChild(circle);
        }

        container.addChild(uniBubble);
        uniBubbles.push({ uniBubble });

        app2.ticker.add(() => {
            

            uniBubble.angle += .314;
            uniBubble.x += velocity.x;
            uniBubble.y += velocity.y;

            textUniverse.x = uniBubble.x;
            textUniverse.y = uniBubble.y + 130;

            if (uniBubble.x > app2.screen.width - 100 || uniBubble.x < 100) {
                velocity.x *= -1;
            }

            if (uniBubble.y > app2.screen.height - 100 || uniBubble.y < 100) {
                velocity.y *= -1;
            }

            circles.forEach(({ circle, initialX, initialY }) => {
                // Rotate circles around the main circle
                const rotatedX = uniBubble.x + velocity.x + Math.cos(circle.rotationSpeed) * (circle.x - uniBubble.x) - Math.sin(circle.rotationSpeed) * (circle.y - uniBubble.y);
                const rotatedY = uniBubble.y + velocity.y + Math.sin(circle.rotationSpeed) * (circle.x - uniBubble.x) + Math.cos(circle.rotationSpeed) * (circle.y - uniBubble.y);

                circle.x = rotatedX;
                circle.y = rotatedY;

                // Scale animation for growing and shrinking effect with delay
                const elapsed = app2.ticker.lastTime - circle.scaleDelay;
                if (elapsed > 0) {
                    const scaleValue = Math.sin(elapsed * circle.scaleSpeed) + 0.4;
                    circle.scale.x = Math.max(scaleValue, circle.scaleThreshold);
                    circle.scale.y = Math.max(scaleValue, circle.scaleThreshold);
                }
            });

            //const uniBubbleIndex = Math.floor(Math.random() * 3);
            //const uniBubbleIQ = uniBubbles[uniBubbleIndex].uniBubble;

            //uniBubbles.forEach(({uniBubble, velocity}) => {                    
            displacementSprite.x = uniBubble.x;
            displacementSprite.y = uniBubble.y;
            //});


        });

        return app2;
    }
} 
generateBigBang();