motion-sensitive

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