(#130) Reworked mouse movement to use easing functions for timestep calculation

Author: s1hofmann

lib/mouse-movement.function.spec.ts

@@ -0,0 +1,47 @@
+import {calculateBaseStepDuration, calculateStepDuration, linear, calculateMovementTimesteps} from "./mouse-movement.function";
+
+describe("MovementType", () => {
+    describe("baseStepDuration", () => {
+        it("should calculate the base step duration in nanoseconds", () => {
+            // GIVEN
+            const speedInPixelsPerSecond = 1000;
+            const expectedBaseStepDuration = 1_000_000;
+
+            // WHEN
+            const result = calculateBaseStepDuration(speedInPixelsPerSecond);
+
+            // THEN
+            expect(result).toBe(expectedBaseStepDuration);
+        });
+    });
+
+    describe("stepDuration", () => {
+        it("should call easing function with current progress to calculate current step duration", () => {
+            // GIVEN
+            const baseStepDuraton = 1_000_000;
+            const currentProgress = 1.0;
+            const easingFunction = jest.fn(() => 0);
+
+            // WHEN
+            const result = calculateStepDuration(currentProgress, baseStepDuraton, easingFunction);
+
+            // THEN
+            expect(result).toBe(baseStepDuraton);
+            expect(easingFunction).toBeCalledTimes(1);
+            expect(easingFunction).toBeCalledWith(currentProgress);
+        })
+    });
+
+    describe('linear', () => {
+        it("should return a set of linear timesteps, 1000000 nanosecond per step.", () => {
+            const expected = [1000000, 1000000, 1000000, 1000000, 1000000, 1000000];
+            expect(calculateMovementTimesteps(6, 1000, linear)).toEqual(expected);
+        });
+
+        it("should should return a set of linear timesteps, 2000000 nanoseconds per step.", () => {
+            const expected = [2000000, 2000000, 2000000, 2000000, 2000000, 2000000];
+            expect(calculateMovementTimesteps(6, 500, linear)).toEqual(expected);
+        });
+    });
+})
+;

lib/mouse-movement.function.ts

@@ -0,0 +1,36 @@
+/**
+ * {@link EasingFunction}s are used to modify movement behaviour.
+ *
+ * See https://easings.net/ for reference
+ */
+export interface EasingFunction {
+    (progressPercentage: number): number;
+}
+
+export const calculateBaseStepDuration = (speedInPixelsPerSecond: number) => (1 / speedInPixelsPerSecond) * 1_000_000_000;
+export const calculateStepDuration = (currentProgressPercentage: number, baseStepDuration: number, easingFunction: EasingFunction) => {
+    let stepDuration = baseStepDuration;
+    if (typeof easingFunction === "function") {
+        stepDuration += baseStepDuration * easingFunction(currentProgressPercentage);
+    }
+    return stepDuration;
+}
+export const calculateMovementTimesteps = (
+    amountOfSteps: number,
+    speedInPixelsPerSecond: number,
+    easingFunction: EasingFunction = linear
+): number[] => {
+    const timeSteps = [];
+    // Duration per movement step in nanoseconds
+    let baseStepDuration = calculateBaseStepDuration(speedInPixelsPerSecond);
+    baseStepDuration = (isFinite(baseStepDuration) && baseStepDuration > 0) ? baseStepDuration : 0;
+    for (let idx = 0; idx < amountOfSteps; ++idx) {
+        const stepDuration = calculateStepDuration(idx / amountOfSteps, baseStepDuration, easingFunction);
+        timeSteps.push(stepDuration > 0 ? stepDuration : 0);
+    }
+    return timeSteps;
+};
+
+export const linear: EasingFunction = (_: number): number => {
+    return 0;
+};