ts-useful
v1.1.34
Published
Functions for animation, color transitions, ecliptic, bezier, decasteljau, curves, three dimensional curves, smooth scrolling, random range, randomItem, mobius index, vectors, physics vectors, and easing.
Downloads
333
Maintainers
Readme
Useful
Contains:
- lerp (linear interpolation), animation, bezier algorithm, clamp, clampAngle, clampRadian, color percent, ecliptic, decasteljau algorithm, decasteljau curves, easing, smooth scrolling, three dimensional curves.
Animate
Animate(action: (pct: number) => void , options?: { fps?: number, duration?: number, stop?: () => boolean, cb?: () => void });
*Not available for commonjs libraries.*
import {Animate, Easing} from 'ts-useful';
function scoot(elm: HTMLElement, x: number): void {
const move = (pct: number) => {
elm.style.left = `${x * Easing.linear(pct)}px`;
}
Animate(move, { fps: 60, duration: 3000 });
}
Bezier
Bezier(number[]) returns (percentage: number) => number;
import {Bezier} from 'ts-useful';
bezier = Bezier([0.0, 0.0, 1.0, 1.0]);
bezier(.2);
Boids
Boids(options?: boidOptions);
Method: Update() => coordinates[];
import {Boids} from 'ts-useful';
const boids = new Boids({ boids: 2 });
or
const boids = new Boids({ boids: [{ position: {x: 10, y: 10}, speed: { x: 0, y: 0 }, acceleration: { x: 0, y: 0 } }] });
boids.Update();
Clamp, ClampAngle, ClampRadian
These functions will make sure a number stays between the min and max values.
Clamp(amount: number, min: number, max: number);
ClampAngle(amount: number, min: number, max: number);
ClampRadian(amount: number, min: number, max: number);
import {Clamp, ClampAngle, ClampRadian} from 'ts-useful';
Clamp(8000, 0, 10);
ClampAngle(45, 0, 90);
ClampRadian(2, 0, 3);
ColorPercent
ColorPercent.getColor(colorList: string[], percent: number);
import {ColorPercent} from 'ts-useful';
ColorPercent.getColor(['#FF00FF', '#889900', '#336699'], .45);
Curves
Curves(points: { x: number, y: number }[], percent: number)
import {Curves} from 'ts-useful';
const points = [
{ x: 10, y: 0 },
{ x: 30, y: 30 },
{ x: 45, y: 10 },
{ x: 20, y: 50 }
];
Curves(points, .4);
Decasteljau
Decasteljau(points: number[], percent: number)
import {Decasteljau} from 'ts-useful';
Decasteljau([1,2,3,4,5,6,7,10], .22);
Easing
Static easing functions.
import {Easing} from 'ts-useful';
const easing = Easing.linear;
easing(.03);
*or*
Easing.linear(.03);
Random is a little different. Easing.random() should be placed outside iterative code otherwise you'll get erratic results from a new easing on every iteration.
import {Easing} from 'ts-useful';
const easing = Easing.random();
easing(.03);
Easing types include: linear, sineIn, sineOut, sineInOut, quadIn, quadOut, quadInOut, cubicIn, cubicOut, cubicInOut, quartIn, quartOut, quartInOut, quintIn, quintOut, quintInOut, expoIn, expoOut, expoInOut, circIn, circOut, circInOut, backIn, backOut, backInOut, boomerang, elasticIn, elasticOut, elasticInOut, bounceIn, bounceOut, bounceInOut, and random.
Ecliptic
Class to allow placing items at coordinates based on an HTMLElement or coordinate { x: number, y: number }
This function uses transform for performance as it will not cause a repaint of the screen.
For best results give the parent HTMLElement this style - transform-origin: 50% 50%;
Give the child HTMLElements these styles - transform-origin: 50% 50%; top: 50%; left: 50%; position: absolute;
Ecliptic.Degree(origin: coordinates, target: coordinates);
Ecliptic.Radian(origin: coordinates, target: coordinates);
Ecliptic.EqualRadians(count: number);
Ecliptic.EqualDegrees(count: number);
Ecliptic.LocationByDegree(center: htmlCoordinate, radius: number, degree: number);
Ecliptic.LocationByRadian(center: htmlCoordinate, radius: number, radian: number);
Ecliptic.ToDegree(radian: number);
Ecliptic.ToRadian(degree: number);
Ecliptic.TransformCoordinates(elm: HTMLElement);
Ecliptic.Surround(item: coordinate, amount: number, options: surroundOptions);
Ecliptic.SurroundHTML(item: htmlCoordinate, withItems: HTMLElement[] | HTMLCollection, options: surroundOptions);
type coordinate = { x: number, y: number };
type htmlCoordinate = HTMLElement | coordinate;
type surroundOptions = { distance?: number, degree?: number, spacing?: number, amplitudeX?: number, amplitudeY?: number };
Example Use:
import {Ecliptic} from 'ts-useful';
const parent = document.getElementById('toSurround');
const kids = document.getElementsByClassName('childItems');
Ecliptic.SurroundHTML(parent, kids, { degree: 90, distance: 120 });
Ecliptic.LocationByDegree(parent, 100, 180);
GravityVector (depricated. Use PhysicsVector)
GravityVector(options: { position: coordinate, gravity: number, mass: number, distanceClamp: { min: number, max: number } });
Extends Vector class.
Methods
attract(target: GravityVector);
applyForce(force: GravityVector);
update();
Properties: velocity: Vector, acceleration: Vector;
const gv1 = new GravityVector();
const gv2 = new GravityVector({ position: { x: 50, y: 50 } });
const force = gv1.attract(gv2);
gv2.applyForce(f);
gv2.update();
Lerp
Lerp(start: number, end: number, percent: number)
import {Lerp} from 'ts-useful';
Lerp(-600, 600, .5);
MobiusIndex
MobiusIndex(length: number, index: number)
If index is negative, it will return the last item and beyond.
If index is greater than length, it will wrap to the first item and beyond.
import {MobiusIndex} from 'ts-useful';
MobiusIndex(3, 0); // Output: 0;
MobiusIndex(3, 1); // Output: 1;
MobiusIndex(3, 2); // Output: 2;
MobiusIndex(3, 3); // Output: 0;
MobiusIndex(3, 4); // Output: 1;
MobiusIndex(3, -1); // Output: 2;
RandomRange
RandomRange(min: number, max: number)
import {RandomRange} from 'ts-useful';
RandomRange(0, 100);
RandomItem
RandomItem(array: any[])
import {RandomItem} from 'ts-useful';
RandomItem([1,2,5]);
SmoothScroll
import {SmoothScroll} from 'ts-useful';
const smoothScroll = new SmoothScroll();
smoothScroll.scroll(element: HTMLElement, options?: IScrollOptions);
IScrollOptions {
offsetY?: number;
offsetX?: number;
framesPerSecond?: number;
duration?: number;
easingFunc?: (t: number) => number;
done?: () => void;
}
Sorter
Sorter(array: Array, prop: string, reverse: boolean = false)
import {Sorter} from 'ts-useful';
const array = [{ 'foo': 1, bar: '2' }, { 'foo': '2', bar: '1' }];
Sorter(array, 'bar');
Swipe
import {Swipe} from 'ts-useful';
const swipe = new Swipe(element: HTMLElement, events?: ISwipeEvents);
swipe.(events: ISwipeEvents);
swipe.Destroy();
ISwipeEvents {
left?: () => void;
right?: () => void;
up?: () => void;
down?: () => void;
}
ThreeD
ThreeD(points: { x: number, y: number, z: number }[], percent: number)
import {ThreeD} from 'ts-useful';
const locations = ThreeD([{ x: 0, y: 0, z: 0}, { x: 10, y: 10, z: 10}], .5);
Vector
Vector(coordinate?: coordinate);
Methods:
add(coordinate: coordinate)
subtract(coordinate: coordinate)
multiply(amount: number)
divide(amount: number)
normalize()
set(coordinate: coordinate)
zero()
Properties: hypotenuse: number, magnitude: number;
import {Vector} from 'ts-useful';
const vector = new Vector();
vector.add({ x: 50, y: 50 }).multiply(2);
Testing
Command to install dependencies, run tests, and clean up after itself.
npm run test