PIXI 7.4.2 / containsPoint / polygon

by Yarchick1034

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.4.2/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

const app = new PIXI.Application({ resizeTo: window });

document.body.appendChild(app.view);

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

whitePoly.beginFill(0xffffff, 1);
whitePoly.drawPolygon([100, 100, 50, 200, 150, 200, 200, 100]);
whitePoly.endFill();

yellowCircle.beginFill(0xffff00, 1);
yellowCircle.drawCircle(0, 0, 5);
yellowCircle.endFill();
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);