motion-sensitive

The plugin MotionSensitive create an instance which allows to follow the movements of an element and to deduce a possible direction.

• Install
• Importing
• Quick start
• Methods
  • MotionSensitive({gap, sensibility})
  • .isLookedAt(obj)
  • .isLookedIn(obj1, obj2)

Install

npm i motion-sensitive
or
yarn add motion-sensitive

Importing

import MotionSensitive from "motion-sensitive";

Quick start

usage motion-sensitive plugin

const motion = MotionSensitive();
const btn = document.querySelector("#btn1");

const { x, y, width, height } = btn.getBoundingClientRect();
const point1 = { x, y: y + height };
const point2 = { x: x + width, y: y };

document.body.addEventListener("mousemove", (e) => {
    const mouseX = e.pageX - document.body.offsetLeft;
    const mouseY = e.pageY - document.body.offsetTop;
    motion.trackPoint({
        x: mouseX,
        y: mouseY
    });
});

function spy() {
    if (motion.isLookedIn(point1, point2)) {
        btn.classList.add("wakeup");
    } else {
        btn.classList.remove("wakeup");
    }
    requestAnimationFrame(spy);
}

spy();

click to see DEMO

Methods

MotionSensitive({gap, sensibility})

| argument | type | default | Description | | :------------ | :------- | :------ | :--------------------------------------------- | | gat | Number | 5 | angle gap between target and current direction | | sensibility | Number | 1 | average of the n last direction |

const motion = MotionSensitive({
    gap: 10,
    sesibility: 10
});

.isLookedAt(obj)

| argument | type | Description | | :------- | :------- | :------------------------- | | obj | Object | target coordinates {x,y} |

| return | Description | | :-------- | :--------------------------------------------------------------------------------------------- | | boolean | true when the tracked positions indicate that they are going towards the target else false |

motion.isLookedAt({ x: 1, y: 2 }); // true or false

.isLookedIn(obj1, obj2)

| argument | type | Description | | :------- | :------- | :------------------------- | | obj1 | Object | target coordinates {x,y} | | obj2 | Object | target coordinates {x,y} |

| return | Description | | :-------- | :------------------------------------------------------------------------------------------------------- | | boolean | true when the tracked positions indicate that they are going towards between this targets else false |

motion.isLookedIn({ x: 1, y: 2 }, { x: 1, y: 1 }); // true or false