lukasz-okuniewicz / custom-pixi-particles

Custom pixi particles
GNU General Public License v2.0
6 stars 0 forks source link

updatePosition uncertainty #3

Open AusPrinzip opened 3 months ago

AusPrinzip commented 3 months ago

Could you please explain/clarify the offset of this method?

I see in your editor the following function to manage mousemove:

  private detectMouseMove() {
    const content = document.getElementsByClassName('content')[0]
    this.app.stage.on('mousemove', (e) => {
      const finalInnerWidth = content.clientWidth
      const finalInnerHeight = content.clientHeight
      const x = -(finalInnerWidth / 2 - e.data.global.x)
      const y = -(finalInnerHeight / 2 - e.data.global.y)
      this.particles.updatePosition({ x, y })
    })
  }

I have tried to replicate this behaviour but I cannot really figure out what reference of coordinates is the method expecting.

lukasz-okuniewicz commented 1 month ago

The provided method calculates the mouse's position relative to the center of the content element is defined with the class name "content". It uses the client coordinates (considering scrolling) to determine the mouse's X and Y values. By negating the difference between the mouse's X/Y and half the content's width/height, it flips the direction so that positive values represent movement to the right/bottom and negative values represent movement to the left/top relative to the center. This offset calculation allows the particle system to react accordingly as the user moves the mouse within the content area.