Jump to content

Smooth Follow Cursor


Noturnoo
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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;
}
});

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...