PIXI 8.6.6 / containsPoint / polygon

by Yarchick1034

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.6.6/pixi.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

CSS

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

JavaScript

(async () => {
    const app = new PIXI.Application();

    await app.init({ background: "#000000", resizeTo: window });

    document.body.appendChild(app.canvas);

    const whitePoly = new PIXI.Graphics();
    const yellowCircle = new PIXI.Graphics();

    whitePoly.poly([100, 100, 50, 200, 150, 200, 200, 100]);
    whitePoly.fill({ color: "#ffffff" });

    yellowCircle.circle(0, 0, 5);
    yellowCircle.fill({ color: 0xffff00 });
    yellowCircle.position.set(140, 140);

    gsap.to(whitePoly, {
        duration: 2,
        x: 300,
        repeat: -1,
        yoyo: true,
        onUpdate: () => {
            whitePoly.alpha = 1;

            if (whitePoly.containsPoint({ x: yellowCircle.x, y: yellowCircle.y })) {
                whitePoly.alpha = 0.2;
            }
        },
    });

    app.stage.addChild(whitePoly);
    app.stage.addChild(yellowCircle);
})();