Smooth Follow Cursor

[Noturnoo]

Hi, Pixrs
I'm new to PixiJS and would like to ask a question about how to do a delay on mouse move using Pixi (on the element that has the Displacement filter), I removed a part of the example code that is on the official PixiJS website. I created a div (#follow) to show how effect I wish.
Anyway, I would like the element to follow the mouse in a smooth way.

Code is in Codepen:

Thanks

[ivan.popelyshev]

It looks like simple LERP (linear interpolation)

speed = 0.1;

dt = speed; // fixed step
dt = 1.0 - Math.exp(1.0 - dt, delta); // if you have a delta time in frame.

const position = sprite.position;
const target = renderer.plugins.interaction.mouse.global;

if (Math.abs(position.x - target.x) + Math.abs(position.y -target.y) < 1) {
    position.copy(target);
}
else
{
    position.x = position.x + (target.x - position.x) * dt;
    position.y = position.y + (target.y - position.y) * dt;
}

I didnt test it. Please try to use it and fix it, and if you fail, I'll help.

Also, not sure about formulaes, I'm doing it by my math sense.

[ivan.popelyshev]

I mean exponential interpolation, it uses LERP every frame with same coefficient, if the frame is fixed (60fps), and you need to adjust "dt" by "delta" if your pc is slow, to take missed frames into account.

This code supposed to be run in animation loop, not inside mousemove.

[Noturnoo]

Hello Ivan, first of all thanks for helping, I really am beginner and I do not know what I should do, I added this at the end of the code, and it did not work:

 

app.ticker.add(function(delta) {

var speed = 0.1;

var dt = speed; // fixed step
var dt = 1.0 - Math.exp(1.0 - dt, delta); // if you have a delta time in frame.

 const position = circ.position;
const target = app.plugins.interaction.mouse.global;
   
if (Math.abs(position.x - target.x) + Math.abs(position.y -target.y) < 1) {
    position.copy(target);
}
else
{
    position.x = position.x + (target.x - position.x) * dt;
    position.y = position.y + (target.y - position.y) * dt;
}

});

that was it?

[ivan.popelyshev]

`app.renderer.plugins.interaction.mouse.global` , sorry, yeah, we have long path to current mouse coord

[Noturnoo]

Still did not work
Sprite simply loses position

 

app.ticker.add(function(delta) {

   var speed = 0.8;
   var delta = 1;

var dt = speed; // fixed step
var dt = 1.0 - Math.exp(1.0 - dt, delta); // if you have a delta time in frame.

 const position = displacementSprite.position;
const target = app.renderer.plugins.interaction.mouse.global;
   
   
   console.log(target)
   
if (Math.abs(position.x - target.x) + Math.abs(position.y -target.y) < 1) {
    position.copy(target);
}
else
{
    position.x = position.x + (target.x - position.x) * dt;
    position.y = position.y + (target.y - position.y) * dt;
}
});

 

[ivan.popelyshev]

Second `dt` assignment needs adjustment. You can remove it or fix it the way it works. I dont supply people with complete solutions.

Google what "LERP" is in relation to game development and animations. Google "easing".