@anselan/maprange - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

dist/index.d.ts

@@ -1,2 +0,2 @@
-declare const remap: (value: number, start1: number, stop1: number, start2: number, stop2: number, clamp?: boolean) => number;
+declare const remap: (value: number, inputRange: number[], targetRange: number[], clamp?: boolean) => number;
 export default remap;

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const remap = (value, start1, stop1, start2, stop2, clamp = false) => {
-    let outgoing = (value - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+const remap = (value, inputRange, targetRange, clamp = false) => {
+    if (inputRange.length !== 2 || targetRange.length !== 2) {
+        throw Error('inputRange and targetRange must be number arrays with exactly 2 elements');
+    }
+    // let outgoing = (value - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+    let outgoing = (value - inputRange[0]) / (inputRange[1] - inputRange[0]) * (targetRange[1] - targetRange[0]) + targetRange[0];
     if (clamp === true) {
-        if (outgoing > stop2) {
-            return stop2;
+        if (outgoing > targetRange[1]) {
+            return targetRange[1];
         }
-        else if (outgoing < start2) {
-            return start2;
+        else if (outgoing < targetRange[0]) {
+            return targetRange[0];
         }
@@ -12,0 +16,0 @@ else {

dist/index.test.js

@@ -10,3 +10,3 @@ "use strict";
         const value = 0.5;
-        const result = _1.default(value, 0, 1, 0, 100);
+        const result = _1.default(value, [0, 1], [0, 100]);
         expect(result).toBe(50);
@@ -16,19 +16,27 @@ });
         const value = 0.1;
-        const result = _1.default(value, 0, 1, 0, 100);
+        const result = _1.default(value, [0, 1], [0, 100]);
         expect(result).toBe(10);
     });
 });
-describe('pixel values', () => {
+describe('typical normalised to pixels conversions', () => {
     test('far left', () => {
         const value = 0;
-        expect(_1.default(value, 0, 1, 0, 1920)).toBe(0);
+        expect(_1.default(value, [0, 1], [0, 1920])).toBe(0);
     });
     test('leftish', () => {
         const value = 0.25;
-        expect(_1.default(value, 0, 1, 0, 1920)).toBe(480);
+        expect(_1.default(value, [0, 1], [0, 1920])).toBe(480);
     });
     test('far right', () => {
         const value = 1.0;
-        expect(_1.default(value, 0, 1, 0, 1920)).toBe(1920);
+        expect(_1.default(value, [0, 1], [0, 1920])).toBe(1920);
     });
+    test('two values, one complex', () => {
+        const x = 0.5;
+        const y = 0.8967;
+        const px = _1.default(0.5, [0, 1], [0, 1920]);
+        const py = _1.default(0.8967, [0, 1], [0, 1080]);
+        expect(px).toBe(960);
+        expect(py).toBe(968.436);
+    });
 });
@@ -38,11 +46,11 @@ describe('negative values', () => {
         const value = 0.5;
-        expect(_1.default(value, 0, 1, -1, 1)).toBe(0);
+        expect(_1.default(value, [0, 1], [-1, 1])).toBe(0);
     });
     test('leftish', () => {
         const value = 0.25;
-        expect(_1.default(value, 0, 1, -1000, 1000)).toBe(-500);
+        expect(_1.default(value, [0, 1], [-1000, 1000])).toBe(-500);
     });
     test('far right', () => {
         const value = 80;
-        expect(_1.default(value, 0, 100, -100, 100)).toBe(60);
+        expect(_1.default(value, [0, 100], [-100, 100])).toBe(60);
     });
@@ -53,15 +61,9 @@ });
         const value = 2;
-        expect(_1.default(value, 0, 1, 0, 100, true)).toBe(100);
+        expect(_1.default(value, [0, 1], [0, 100], true)).toBe(100);
     });
     test('clamp the bottom end', () => {
         const value = -10;
-        expect(_1.default(value, -1, 1, -1000, 1000, true)).toBe(-1000);
+        expect(_1.default(value, [-1, 1], [-1000, 1000], true)).toBe(-1000);
     });
 });
-// describe('default input range [0,1]', () => {
-//   test('halfway', () => {
-//     const value = 0.5;
-//     expect(remap(value, 0, 100)).toBe(50)
-//   })
-// })
 //# sourceMappingURL=index.test.js.map

package.json

 {
   "name": "@anselan/maprange",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Map values from one range to another",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 # Map Range in JS
 
-Inspired by the map function in Processing.
+Inspired by the [map](https://processing.org/reference/map_.html) function in the creative coding framework [Processing](https://processing.org/).
 
@@ -9,1 +9,44 @@ Differs from the following similar JS packages:
 
+## Installation
+```
+npm install @anselan/remap
+```
+
+Then (depending on your environment):
+```
+import remap from 'remap`
+```
+...or:
+```
+const remap = require('remap`)
+```
+
+## Usage
+### Essentially:
+> **remap (value, inputRange, targetRante, clamp)**
+...where the parameters are:
+* `value`: a number
+* `inputRange`, `targetRange`: arrays of exactly 2 elements each, i.e `[min,max]`
+* `clamp` (optional; default `false`): whether to constrain the result within the given target range
+
+### Description
+Provide the range (`inputMin`, `inputMax`) that your `value` is currently in, and specify a new range (`outputMin`, `outputMax`) and you'll get back a new value as per the target range.
+
+## Useful example applications
+### Percentages
+The value `0.5` in the range *[0,1]* should return as `50` in the range *[0,100]*:
+```
+const result = remap(0.5, [0,1], [0, 100]); // result === 50
+```
+### Float position to pixels
+```
+// These could be coordinates in [0,1] range:
+const x = 0.5;
+const y = 0.8967;
+
+// Assume a display of 1920x1080 pixels:
+const px = remap(0.5, [0,1], [0,1920]);
+const py = remap(0.8967, [0,1], [0,1080]);
+console.log(px, py); // "960, 968.436"
+```
+

src/index.test.ts

@@ -7,3 +7,3 @@ import remap from '.'
     const value = 0.5;
-    const result = remap(value, 0, 1, 0, 100);
+    const result = remap(value, [0, 1], [0, 100]);
     expect(result).toBe(50);
@@ -14,3 +14,3 @@ })
     const value = 0.1;
-    const result = remap(value, 0, 1, 0, 100);
+    const result = remap(value, [0, 1], [0, 100]);
     expect(result).toBe(10);
@@ -21,15 +21,25 @@ })
 
-describe('pixel values', () => {
+describe('typical normalised to pixels conversions', () => {
   test('far left', () => {
     const value = 0;
-    expect(remap(value, 0, 1, 0, 1920)).toBe(0)
+    expect(remap(value, [0, 1], [0, 1920])).toBe(0)
   })
   test('leftish', () => {
     const value = 0.25;
-    expect(remap(value, 0, 1, 0, 1920)).toBe(480)
+    expect(remap(value, [0, 1], [0, 1920])).toBe(480)
   })
   test('far right', () => {
     const value = 1.0;
-    expect(remap(value, 0, 1, 0, 1920)).toBe(1920)
+    expect(remap(value, [0, 1], [0, 1920])).toBe(1920)
   })
+  test('two values, one complex', () => {
+    const x = 0.5;
+    const y = 0.8967;
+
+    const px = remap(0.5, [0,1], [0,1920]);
+    const py = remap(0.8967, [0,1], [0,1080]);
+
+    expect(px).toBe(960);
+    expect(py).toBe(968.436);
+  })
 })
@@ -40,11 +50,11 @@
     const value = 0.5;
-    expect(remap(value, 0, 1, -1, 1)).toBe(0);
+    expect(remap(value, [0, 1], [-1, 1])).toBe(0);
   })
   test('leftish', () => {
     const value = 0.25;
-    expect(remap(value, 0, 1, -1000, 1000)).toBe(-500)
+    expect(remap(value, [0, 1], [-1000, 1000])).toBe(-500)
   })
   test('far right', () => {
     const value = 80;
-    expect(remap(value, 0, 100, -100, 100)).toBe(60)
+    expect(remap(value, [0, 100], [-100, 100])).toBe(60)
   })
@@ -56,17 +66,8 @@ })
     const value = 2;
-    expect(remap(value, 0, 1, 0, 100, true)).toBe(100)
+    expect(remap(value, [0, 1], [0, 100], true)).toBe(100)
   })
   test('clamp the bottom end', () => {
     const value = -10;
-    expect(remap(value, -1, 1, -1000, 1000, true)).toBe(-1000)
+    expect(remap(value, [-1, 1], [-1000, 1000], true)).toBe(-1000)
   })
 })
-
-// describe('default input range [0,1]', () => {
-
-//   test('halfway', () => {
-//     const value = 0.5;
-//     expect(remap(value, 0, 100)).toBe(50)
-//   })
-
-// })

src/index.ts

@@ -1,8 +0,12 @@
-const remap = (value: number, start1: number, stop1: number, start2: number, stop2: number, clamp: boolean = false): number => {
-  let outgoing = (value - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+const remap = (value: number, inputRange: number[], targetRange: number[], clamp: boolean = false): number => {
+  if (inputRange.length !== 2 || targetRange.length !== 2) {
+    throw Error('inputRange and targetRange must be number arrays with exactly 2 elements');
+  }
+  // let outgoing = (value - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+  let outgoing = (value - inputRange[0]) / (inputRange[1] - inputRange[0]) * (targetRange[1] - targetRange[0]) + targetRange[0];
   if (clamp === true) {
-      if (outgoing > stop2) { 
-        return stop2;
-      } else if (outgoing < start2) { 
-        return start2
+      if (outgoing > targetRange[1]) { 
+        return targetRange[1];
+      } else if (outgoing < targetRange[0]) { 
+        return targetRange[0]
       } else {
@@ -9,0 +13,0 @@ return outgoing

No alert changes

Improved metrics

Total package byte prevSize

12203

33.24%

Lines of code

190

7.34%

Number of lines in readme file

52

477.78%

No dependency changes