UI Calculators

A library of interface calculators.

Use

Install

npm install ui-calc --save

Import

import { angle } from 'ui-calc';

API

angle()

Calculate the angle between two 2D points, in radians

const a = { x: 0, y: 0 };
const b = { x: 45, y: 45 };

angle(a, b); // 0.7853981633974483

Radians can be converted to degrees using radiansToDegrees().

degreesToRadians()

Convert degrees to radians

degreesToRadians(45); // 0.7853981633974483 

dilate()

Dilate the difference between two sequential values.

(a, b, dilationFactor)

const a = 10;
const b = 20;

dilate(a, b, 1); // 20 (no change)
dilate(a, b, 0.5); // 15
dilate(a, b, 2); // 30

distance()

Calculate the difference between two n-dimensional points (max 3)

distance(100, -500); // 600
distance({ x: 0, y: 0}, { x: 45, y: 45 }); // 63.639
distance({ x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 10 }); // 10

hypotenuse()

Calculate the hypotenuse of a triangle, given the length of sides A and B

hypotenuse(30, 50); // 58.31

getProgressFromValue()

Return a progress given a value and a range

const value = 500;
const min = 0;
const max = 1000;

getProgressFromValue(value, min, max); // 0.5

getValueFromProgress()

Return a value given a progress (0-1) and a range

const progress = 0.25;
const min = 100;
const max = 500;

getValueFromProgress(progress, min, max); // 200

offset()

Calculate the offset between two objects of numerical properties

const a = { foo: 5 };
const b = { foo: 15, bar: 20 };

offset(a, b); // { foo: 10, bar: 0 }

pointFromAngleAndDistance()

Calculate new 2D point given an origin point, angle and distance

const origin = { x: 100, y: 200 };
const angle = 45;
const distance = 100;

pointFromAngleAndDistance(origin, angle, distance);
/*
    Returns:
        {
            x: 170.71067811865476,
            y: 270.71067811865476
        }
*/

radiansToDegrees()

Convert a value from radians to degrees

radiansToDegrees(0.7853981633974483); // 45

relativeValue()

Calculates a relative value (ie "+=50") as applied to a numerical value

Valid operators are +, -, / and *.

relativeValue(50, '+=5'); // 55
relativeValue(50, '*=2'); // 100

random()

Generates a random number, optionally within a range

random(); // Random number between 0 and 1
random(15, 30); // Random number between 15 and 30

restrict()

Restricts the provided value to within the provided range

const value = 2000;
const min = 0;
const max = 1000;

restrict(value, min, max); // 1000

smooth()

Smooth a value between its old and new values over a duration of time

const newValue = 100;
const oldValue = 50;
const frameDuration = 16.667;
const noSmoothing = 0;
const heavySmoothing = 100;

smooth(newValue, oldValue, frameDuration, noSmoothing); // 100
smooth(newValue, oldValue, frameDuration, heavySmoothing); // 60.41

speedPerFrame()

Calculate speed per frame given speed per second and frame duration

const speedPerSecond = 300;
const frameDuration = 16;

speedPerFrame(speedPerSecond, frameDuration); // 4.8

speedPerSecond()

Calculate speed per second given speed per frame and frame duration

const speedPerFrame = 10;
const frameDuration = 16;

speedPerSecond(speedPerFrame, frameDuration); // 625