Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

297
Vistas
PIXI JS Circle move by mouse with delay

I created an example with a filter (one picture overlays another)

Deployed work here: https://cranky-bassi-59e8b2.netlify.app/

To follow the cursor behind the mouse, I used the following code

const circle = new PIXI.Graphics()
        .beginFill(0xFFFFFF)
        .drawCircle(radius + blurSize, radius + blurSize, radius)
        .endFill();
    circle.filters = [new PIXI.filters.BlurFilter(blurSize)];

    const bounds = new PIXI.Rectangle(0, 0, (radius + blurSize) * 2, (radius + blurSize) * 2);
    const texture = app.renderer.generateTexture(circle, PIXI.SCALE_MODES.NEAREST, 1, bounds);
    focus = new PIXI.Sprite(texture);
    focus.scale.set(1.5, 1.5);

function getMousePosition() {
    return app.renderer.plugins.interaction.mouse.global;
}
let xVelocity = 0.1;
let yVelocity = 0.1;
let mousePosition = getMousePosition();
let speed = 11;
let angle = 45;

let moveTicker = PIXI.Ticker.shared;
moveTicker.autoStart = false;

moveTicker.add(() => {
        mousePosition = getMousePosition();
        let dx = (mousePosition.x - focus.x) - (focus.width / 2);
        let dy = (mousePosition.y - focus.y) - (focus.height / 2);

        angle = Math.atan2(dy, dx);

        xVelocity = Math.cos(angle) * speed;
        yVelocity = Math.sin(angle) * speed;

        focus.x += xVelocity;
        focus.y += yVelocity;
})

However, this function does not work correctly when the cursor is stationary (the focus twitches at the slow mouse speed). What I'm talking about can be seen on the deployed site

How can I remove this behavior?

Update (resolved):

Need just replace ticker code to

focus.x += .1 * (mousePosition.x - focus.x - (focus.width / 2));
focus.x = Math.round(100 * focus.x) / 100;
focus.y += .1 * (mousePosition.y - focus.y - (focus.height / 2));
focus.y = Math.round(100 * focus.y) / 100;
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda