A collection of useful tiny JavaScript functions
npm install tiny-toolkitGet the angle (in radians) between two points
const origin = { x: 10, y: 20 }
const target = { x: 30, y: 40 }
getAngle(origin, target)
// 3.9269908169872414Get the distance between two points
const origin = { x: 10, y: 20 }
const target = { x: 30, y: 40 }
getDistance(origin, target)
// 28.284271247461902getDirection(origin: Point, target: Point) => VectorGet the direction vector from one point to another
getDirectionFromAngle(angle: number) => VectorGet the direction vector from an angle (in radians)
getBorderingPoints(point: Point) => Point[]The numbers below represent the indexes of points in the array
[4][0][5]
[3][x][1]
[7][2][6]
normalizeRange(minimum: number, maximum: number) => (value: number) => numberTurn a number range into a 0 - 1 number range.
Returns a function to transform a number between minimum and maximum
const min = 200
const max = 300
const getOpacity = normalizeRange(min, max)
getOpacity(250)
// 0.5Multiply the output of normalizeRange with intended max - min
Add to the output of normalizeRange with intended min
import * as tool from 'tiny-toolkit'
const min = 200
const max = 300
const getOpacity = normalize(min, max)
5 + getOpacity(250) * 10
// 10toRadians(angle)Convert an angle from degrees to radians
toDegrees(angle)Convert an angle from radians to degrees
grid(options)Generate a function to position objects on a grid.
Returns a function to get coordinates. Signature: (index: number) => { x, y }
| Option | Description |
|---|---|
| x | The x coordinate of the top left corner |
| y | The y coordinate of the top left corner |
| marginX | The space between each cell on the x axis |
| marginY | The space between each cell on the y axis |
| breakAt | The amount of cells on a row (column if vertical is true) before a line break |
| vertical | If the grid should be layed out vertically instead (Default false) |
import * as tool from 'tiny-toolkit'
const numbers = [1, 2, 3]
const getCell = grid({
x: 10,
y: 10,
marginX: 10,
marginY: 10,
breakAt: 2,
})
numbers.map(getCell)
// [{ x: 10, y: 10}, {x: 20, y: 10}, {x: 10, y: 20}]line(options)Generate a function to position objects on a line.
Returns a function to get a coordinate. Signature: (index: number) => number
| Option | Description |
|---|---|
| start | The position of the first object |
| margin | The space between each object |
import * as tool from 'tiny-toolkit'
const numbers = [1, 2, 3]
const getX = line({
start: 10,
margin: 20,
})
numbers.map(getX)
// [10, 30, 50]isColliding(rectangle1, rectangle2)Check if two rectangles are colliding.
getOverlappingArea(rectangle1, rectangle2)Check how much two rectangles are overlapping
treeToList(rootNode: Node, childrenField?: string = 'children') => Node[]Convert a tree structure into a flat list
capitalize(text: string)Make the first letter in a string uppercase.
getNextItem(currentItem, list)Get the next item in a list. Loops back to the first item after the last one.
getPreviousItem(currentItem, list)Get the previous item in a list. Loops back to the last item after the first one.
times2d(xTimes: number, yTimes: number, callback: (x: number, y: number, index: number) => T) => T[]Two dimensional loop. Like lodash
timesbut 2d.
getSurroundingRectangle(point: Point, width: number, height: number) => RectangleGet the rectangle surrounding a point