Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

188
Views
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;
7 months ago ยท Juan Pablo Isaza
Answer question
Find remote jobs