How to get the absolute position

[Alain]

I'm trying to get the absolute position of my circle, but I don't get it, it always returns me that it's in position 0

 

const containerPixi = document.querySelector(".containerPixi");
const app = new PIXI.Application({ width: innerWidth, height: innerHeight });
const renderer = new PIXI.Renderer()
const container = new PIXI.Container();
const blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blur = 5;

const radius = 8;
const gravity = 0.5;
const bounce = -0.5;
const floor = innerHeight;

const particles = [];

containerPixi.appendChild(app.view);
app.stage.addChild(container);
app.stage.filterArea = app.renderer.screen;

const random = (a, b) => {
  return Math.random() * (a - b) + b;
};

const init = () => {
  const leon = new LeonSans({
    text: "Alain",
    color: ["#000000"],
    size: 80,
    weight: 200,
    tracking: 10,
    isPath: true
  });

  const { w: width, h: height } = leon.model.rect;

  container.x = innerWidth / 2 - width / 2;
  container.y = innerHeight / 2 - height / 2;

  leon.model.paths.forEach((p, i) => {
    if (i < 1) createShapes(p, width, height);
  });
};

const createShapes = ({ x, y }, width, height) => {
  const graphics = new PIXI.Graphics();
  graphics.beginFill(0xffffff);
  graphics.drawCircle(x, y, radius);
  graphics.endFill();

  graphics.filters = [blurFilter];
  graphics.vx = 0.5;
  graphics.vy = 0.5;
  
  //const texture = renderer.generateTexture(graphics);
  //const sprite = new PIXI.Sprite(texture)
  
  console.log(graphics)
  container.addChild(graphics);

  particles.push(graphics);
};

app.ticker.add(() => {
  particles.forEach(p => {
    if (p.y + radius >= floor) {
      p.y = floor - radius;
      p.vy = bounce;
    }

    p.y += p.vy;
  });
});

init();

it's the pen https://codepen.io/AlainBarrios/pen/JjdyGzg?editors=0010

[ivan.popelyshev]

Local coords of shape inside graphics and transform position are different things. Its one of basic principles in all 2d renderer trees since Adobe Flash.

Local shape positions are set one time, they are not changed before graphics is cleared. Transform position can be changed whenever you want, and those things are not calculated by shapes position, its a modifier to whole graphics.

There are no functions that will give you absolute positions of whatever you made there - for all that PixiJS knows, it can be triangle+square+circle - which position do you think pixi should return? However there is "graphics.getBounds()" that returns wrapping rectangle in absolute coords.

Edited March 4, 2020 by ivan.popelyshev