@anselan/maprange
Advanced tools
Comparing version 0.2.2 to 0.3.0
@@ -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; |
"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 { |
@@ -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 |
{ | ||
"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", |
# 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" | ||
``` | ||
@@ -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) | ||
// }) | ||
// }) |
@@ -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 |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
12203
190
52