Normalising

Working with normalised geometric references can be useful for the same reason as normalised plain numbers. For example, perhaps you have a stream of Points from a computer vision library for the location of a detected nose. This position might be in camera coordinates, meaning that 0,0 represents the top-left corner of a frame from the camera. The max width and height will be determined by the resolution setting of the camera/library.

You don’t want to have to think about the scale of camera coordinates throughout the code, and importantly, it may change if you opt for a different camera resolution. Normalising to 0,0 - 1,1 may be the answer:

Run
const cameraBounds = { width: 1024, height: 768 };
const pt = { x:500, y:300 };

const normalised = {
  x: pt.x / cameraBounds.width,
  y: pt.y / cameraBounds.height
};

You might also want to verify the points don’t exceed 0..1, using Numbers.clamp .

Run
import { clamp } from 'https://unpkg.com/@ixfx/numbers/bundle';
const cameraBounds = { width: 1024, height: 768 };
const pt = {x:500, y:300};

const normalisedClamped = {
  x: clamp(pt.x / cameraBounds.width),
  y: clamp(pt.y / cameraBounds.height
};

ixfx provides a function to do the division for you Points.normaliseByRect

import { Points } from 'https://unpkg.com/@ixfx/geometry/bundle';
const normalised = Points.normaliseByRect(pt, cameraBounds);

And then if you want to clamp the returned result, use Points.clamp

const normalised = Points.clamp(Points.normaliseByRect(pt, cameraBounds));

If you have a normalised point, you will likely need to map it to an absolute space at some point, for example to the dimensions of the viewport. Points.multiply can be used for this:

Run
import { Points } from 'https://unpkg.com/@ixfx/geometry/bundle';

// 1,1 is normalised, meaning {x:100%, y:100%}
const pt = { x:1, y:1 };

// Now we have it in absolute viewport coordinates
const screenPt = Points.multiply(pt, window.innerWidth, window.innerHeight);