:wrench: Tiny Toolkit

A collection of useful tiny JavaScript functions

Index

• :package: Install
• :straight_ruler: Measure
  • getAngle
  • getDistance
    • getDirection
    • getDirectionFromAngle
    • getBorderingPoints
  • :heavy_division_sign::heavy_multiplication_x: Math
    • normalizeRange
    • toRadians
    • toDegrees
  • :iphone: Layout
    • grid
    • line
  • :star: Collisions
    • isColliding
    • getOverlappingArea
  • :star: Misc
    • treeToList
    • capitalize
    • getNextItem
    • getPreviousItem
    • times2d
    • getSurroundingRectangle
    • treeToList
    • useIndex
    • create2dArrayWithDistanceToCenter

:package: Install

npm install tiny-toolkit

:straight_ruler: Measure

getAngle

Get the angle (in radians) between two points

const origin = { x: 10, y: 20 }
const target = { x: 30, y: 40 }

getAngle(origin, target)
// 3.9269908169872414

getDistance

Get the distance between two points

const origin = { x: 10, y: 20 }
const target = { x: 30, y: 40 }

getDistance(origin, target)
// 28.284271247461902

getDirection

getDirection(origin: Point, target: Point) => Vector

Get the direction vector from one point to another

getDirectionFromAngle

getDirectionFromAngle(angle: number) => Vector

Get the direction vector from an angle (in radians)

getBorderingPoints

getBorderingPoints(point: Point) => Point[]

The numbers below represent the indexes of points in the array

[4][0][5]

[3][x][1]

[7][2][6]

:heavy_division_sign::heavy_multiplication_x: Math

normalizeRange

normalizeRange(minimum: number, maximum: number) => (value: number) => number

Turn a number range into a 0 - 1 number range.

Returns a function to transform a number between minimum and maximum

Example

const min = 200
const max = 300

const getOpacity = normalizeRange(min, max)

getOpacity(250)
// 0.5

Normalize to other than 0-1

Multiply the output of normalizeRange with intended max - min

Add to the output of normalizeRange with intended min

Example with 5 - 15

import * as tool from 'tiny-toolkit'

const min = 200
const max = 300

const getOpacity = normalize(min, max)

5 + getOpacity(250) * 10
// 10

toRadians

toRadians(angle)

Convert an angle from degrees to radians

toDegrees

toDegrees(angle)

Convert an angle from radians to degrees

:iphone: Layout

grid

grid(options)

Generate a function to position objects on a grid.

Returns a function to get coordinates. Signature: (index: number) => { x, y }

Options

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

Example

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

line(options)

Generate a function to position objects on a line.

Returns a function to get a coordinate. Signature: (index: number) => number

Options

| Option | Description | | ---------- | -------------------------------- | | start | The position of the first object | | margin | The space between each object |

Example

import * as tool from 'tiny-toolkit'

const numbers = [1, 2, 3]

const getX = line({
  start: 10,
  margin: 20,
})

numbers.map(getX)
// [10, 30, 50]

:star: Collisions

isColliding

isColliding(rectangle1, rectangle2)

Check if two rectangles are colliding.

getOverlappingArea

getOverlappingArea(rectangle1, rectangle2)

Check how much two rectangles are overlapping

:star: Misc

treeToList

treeToList(rootNode: Node, childrenField?: string = 'children') => Node[]

Convert a tree structure into a flat list

Example

capitalize

capitalize(text: string)

Make the first letter in a string uppercase.

Example

getNextItem

getNextItem(currentItem, list)

Get the next item in a list. Loops back to the first item after the last one.

Example

getPreviousItem

getPreviousItem(currentItem, list)

Get the previous item in a list. Loops back to the last item after the first one.

Example

times2d

times2d(xTimes: number, yTimes: number, callback: (x: number, y: number, index: number) => T) => T[]

Two dimensional loop. Like lodash times but 2d.

getSurroundingRectangle

getSurroundingRectangle(point: Point, width: number, height: number) => Rectangle

Get the rectangle surrounding a point

treeToList

useIndex

create2dArrayWithDistanceToCenter