Notoriously Psychedelic Modules

    ts-useful
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.25 • Public • Published

    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
    

    Install

    npm i ts-useful

    DownloadsWeekly Downloads

    94

    Version

    1.1.25

    License

    MIT

    Unpacked Size

    289 kB

    Total Files

    290

    Last publish

    Collaborators

    • sansdeus