Easing on mouse movement

[SpaceWorm]

I've got a small app that so far loads a rectangular texture into an object which moves based on the current position of the mouse; if the mouse moves toward it, it gets closer and vice-versa.  I wanted to use an easing function to delay and smooth out the movement a bit.  It's a quart out function, so the object should initially move quickly toward the mouse and then slowly just at the end.  However, for some reason, it seems like movement is just happening 1:1 and just following the mouse movements without any easing.  I'm new to PIXI(and, honestly js in general), so I'm not sure if there's something basic I'm missing here that explains where I'm going wrong.  My code is attached below.  Any help is appreciated, thanks!

        let app;
        let mouseX;
        let mouseY;
        let resetting = false;

        let appContainer;
        
        let navBoxes = [];

        class NavBox extends PIXI.Sprite{
            constructor(startX, startY, texture, name, text, endpoint){
                super(texture);
                this.anchor.set(0.5);

                this.startX = startX;
                this.startY = startY;
                this.targetX = startX;
                this.targetY = startY;
                this.bX = startX;
                this.bY = startY;
                this.x = startX;
                this.y = startY;

                this.moveDelta = 0;

                this.name = name;
                this.text = text;
                this.endpoint = endpoint;
            }

            setTargets(tarX, tarY){
                this.moveDelta = 0;

                this.bX = this.x;
                this.bY = this.y;

                this.targetX = tarX;
                this.targetY = tarY;
            }

            move(delta){
                if(this.moveDelta < 2000){
                    this.moveDelta += delta;
                }
                else{
                    this.moveDelta = 2000;
                }

                this.x += (this.targetX - this.x) * (1 - Math.pow(this.moveDelta/2000, 4));
                this.y += (this.targetY - this.y) * (1 - Math.pow(this.moveDelta/2000, 4));
            }

            reset(){
                this.setTargets(this.startX, this.startY);
            }
        }

        window.onload = function () {
            app = new PIXI.Application(
                {
                    width: 1000,
                    height: 300,
                    backgroundColor: 0xAAAAAA
                });

            document.querySelector("#headerDiv").appendChild(app.view);

            app.loader.baseUrl = "img"
            app.loader
                .add("test", "testBtn.png");
            app.loader.onComplete.add(doneLoading);
            app.loader.load();

            
        };

        function doneLoading(){
            appContainer = new PIXI.Container();
            appContainer.interactive = true;
            app.stage.addChild(appContainer);
            appContainer.on('mousemove', mouseMoved);

            let tempBox = new NavBox(150, 50, app.loader.resources.test.texture, "testButton", "Some Text", "someendpoint");
            navBoxes.push(tempBox);
            appContainer.addChild(tempBox);
            app.ticker.add(gameLoop);
        }

        function mouseMoved(event){
            mouseX = event.data.global.x;
            mouseY = event.data.global.y;
            
            navBoxes.forEach(function(box){
                if(mouseX < app.view.width && mouseX > 0 && mouseY > 0 & mouseY < app.view.height){
                    resetting = false;
                    box.setTargets(box.startX - (mouseX - app.view.width/2)/3, box.startY - (mouseY - app.view.height/2)/4);
                }
                else{
                    if(resetting){}
                    else{
                        resetting = true;
                        box.reset();
                    }
                    
                }
            });
            
        }

        function gameLoop(delta){
            navBoxes.forEach(function(box){
                if(box.targetX !== undefined && box.targetY !== undefined){
                    box.move(delta);
                }
            });
            
        }

 

[jonforum]

hi, you need use the native `pointer lock` API
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
This allow you to replace the mouse and also control speed in your app or game.
It how i proceed on my side for make mouse easing.

 

[SpaceWorm]

So, requestPointerLock() needs to be called on a canvas element, but my project doesn't have one because I'm using just PIXI.  Is there a way to retrieve the canvas from PIXI?

[ivan.popelyshev]

yes, its in "renderer.view". If you dont know where renderer is, or ticker, or any other thing you would make if you wrote it from scratch - here is the article: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop

You can also pass existing canvas to renderer/application options.

Edited May 10, 2020 by ivan.popelyshev

[SpaceWorm]

I was able to find a solution not using pointer lock here in the non-deterministic easing answer: https://stackoverflow.com/questions/37966505/how-to-rotate-a-canvas-object-following-mouse-move-event-with-easing

I'm glad to learn about pointer lock and how to grab the canvas from PIXI, though.  They'll come in handy on future projects!