Normalise

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:


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 .


import { clamp } from 'https://unpkg.com/ixfx/dist/numbers.js';
const pt = {x:500, y:300};
const normalisedClamped = {
  x: clamp(pt.x / cameraBounds.width),
  y: clamp(pt.y / cameraBounds.height
};

This can all be a little easier with Points.normaliseByRect


import { Points } from 'https://unpkg.com/ixfx/dist/geometry.js';
const cameraBounds = { width: 1024, height: 768 };
const pt = { x:500, y: 300 };

// Convert point to 0..1 scale, based on camera frame
const normalised = Points.normaliseByRect(pt, cameraBounds);

Points.clamp will clamp both x and y, so our earlier example could be simplified to:

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:


import { Points } from 'https://unpkg.com/ixfx/dist/geometry.js';

// 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);