Collection of utility functions
npm install @maaax/utilsarrayPick Randomly pick a value from an array
``
arrayPick([1,2,3]) // 2
arrayShuffle Randomly shuffle an array
`
arrayShuffle([1, 2, 3]) // [2, 1, 3]
clamp Clamps a value between an upper and lower bound.
`
const value = 100;
clamp(value, 0, 10) // 10
damp Framerate independent lerp
`
const value = 10;
damp(value, 50, 0.4, deltaTime) // 26
debounce Will only trigger function when it has not been invoked in given timeframe
`
const onResize = () => { console.log(window.innerWidth) }
document.addEventListener("resize", debounce(onResize, 250)) // Will be called on resize every 250ms
distance Distance between two points using pythagoras theorem
`
distance({ x: 0, y: 2 }, { x: 1, y: -2}) // 4.123
finiteStateMachine
`
// Create states
const walkState = state({
name: "walk"
enter: () => console.log("enter"),
})
const runState = state({
name: "run"
exit: () => console.log("leave run"),
update: () => console.log("update run"),
})
// Create state machine
const fsm = finiteStateMachine([walkState, runState])
// Update on every tick
raf.add(fsm.update)
// Change current state
fsm.setState("run")
`
fract Loop a value between 0 and 1
`
fract(10.2) // 0.2
inertia
`
// Create inertia value
const value = inertia(0)
rad.add(() => {
value.update()
// Get value
consol.log(value.get())
})
window.addEventListner("mousemove", (e) => {
// Add delta
value.add(e.clientX - value.get())
})
`
intersectionObserver
`
TODO: document
lerp Linear interpolation between two known points.
`
const value = 10;
lerp(value, 50, 0.4) // 26
map Re-maps a number from one range to another.
`
const value = 5;
map(value, 0, 10, 3, 20) // 11.5
objectPool Declare items once and then reuse them
`
const objects = objectPool([...Array(10)].map(new AnimatedLine))
objects.getNext() // will get the next object in the pool, once at the end, will get the first again
pipe Pass the result of one function to the next, creating a clean and readable pipeline
`
const add = (x) => x + 1;
const multiply = (x) => x * 2;
const result = pipe(add, multiply)(5); // 12
`
prefetch Prefectch a page, waits until the main thread is idle
`
prefetch(["/about.html", "/contact.html"])
prng Generate a pseudo random number between 0 and 1 based on a seed
`
const generator = prng("Your seed")
console.log(generator()) // 0.093 - will be same for every time the seed is called
raf Central request animation frame loop, that starts and cancels itself.
`
// Add function to raf
const remove = raf(() => console.log("hello"))
// Remove function again
setTimeout(remove, 1000)
`
random Returns a random number in a given range.
`
const value = random(0, 100)
randomBool Randomly returns true or false
`
randomBool()
randomInt Returns a random integer in between two values
`
randomInt(0, 10) // 3
randomGaussian Random number that more likely returns the medium of the standard deviation to more closely mimic a natural randomness
`
randomGaussian(1) // Returns a value between 1 and -1
round Round to given decimal
`
const value = 10.4567890
round(value, 1000) // 10.456
smoothstep
`
TODO: document
smootherstep
`
TODO: document
spring
`
// Create spring
const spring = createSpring(0, { stiffness: 0.2, damping: 0.4, mass: 1.2 } )
rad.add(() => {
// Update spring every tick
spring.update()
// Get value
console.log(spring.get())
})
window.addEventListner("mousemove", (e) => {
// Set target value
spring.set(e.clientX)
})
`
weightedList
`
const list = weightedList([
{ item: "Option 1", weight: 9 },
{ item: "Option 2", weight: 1 }
])
list.get() // 9 out of 10 times will return "Option 1"
``