npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

stretch-transform

v0.3.2

Published

A javascript library to transform a plane or 3d space in a rubbery way.

Readme

Stretch Transform

Stretch Transform is a geometric transformation that distorts a plane or 3D space in a rubbery way.

Cover

For a more detailed explanation of this project read this on my website.

Quick start

1. Install the library:

Via NPM:

npm i stretch-transform

Or in your html file:

<script src="StretchTransform.js"></script>

2. Start creating a new StretchTransform:

var myTransform = new StretchTransform();

3. Add some anchors.

Usually you'll give two points as parameters. The first point (origin) will be transformed exactly to the second point (target).

myTransform.addAnchor([100, 200], [300, 300]);

If you give only point as a parameter origin and target will be set to that position. You could change either of them later on.

myTransform.addAnchor([100, 200]);

StretchTransform also works in 3D space. In fact, it always does.

myTransform.addAnchor([100, 200, -150], [300, 300, 0]);

4. Transform any point you want.

var result = myTransform.transform([200, 200, 50]);

Reference

Table of Contents

StretchTransform

new StretchTransform() creates an empty StretchTransform.

addAnchor

Adds an Anchor where origin and target is the same. You can change either of them later on.

Parameters

  • p Array Array [x, y, z] that will be used for origin and target position. Z coordinate is optional.

Returns Anchor The new anchor

addAnchor

Adds an Anchor. pOrigin will be transformed to pTarget.

Parameters

  • pOrigin Array Array [x, y, z] for the origin position. Z coordinate is optional.
  • pTarget Array Array [x, y, z] for the target position. Z coordinate is optional.

Returns Anchor The new anchor

removeAnchor

Removes an Anchor giving the anchor

Parameters

  • anchor Anchor Anchor to remove

removeAnchor

Removes an Anchor giving the index of the anchor.

Parameters

getAnchorCount

Returns Number of anchors added to the MultiTransform

getAnchor

Parameters

  • i Number Index of the anchor to return.

getAnchorByPos

Parameters

  • p Array point [x, y, z] to search for an anchor (either origin or target position). Z coordinate is optional.
  • tolerance Number Radius around Anchor

Returns Number Index of the found anchor or -1 if nothing was found at the specified position

getAnchorByOriginPos

Parameters

  • p Array point [x, y, z] to search for the origin position of an anchor. Z coordinate is optional.
  • tolerance Number Radius around Anchor

Returns Number Index of the found anchor or -1 if nothing was found at the specified position

getAnchorByTargetPos

Parameters

  • p Array point [x, y, z] to search for the target position of an anchor. Z coordinate is optional.
  • tolerance Number Radius around Anchor

Returns Number Index of the found anchor or -1 if nothing was found at the specified position

getAnchorOrigin

Parameters

Returns Array The origin position.

setAnchorOrigin

Parameters

  • i Number Index of the anchor.
  • p Array New origin position [x, y, z]. Z coordinate is optional.

getAnchorTarget

Parameters

Returns Array The target position.

setAnchorTarget

Parameters

  • i Number Index of the anchor.
  • p Array New target position [x, y, z]. Z coordinate is optional.

getWeightingExponent1

Returns Number

setWeightingExponent1

Exponent of the weighting function. Defines how the relations from one anchor to all others are cumulated. The closer the other anchor lies, the stronger it is weighted.

Parameters

  • val Number Usually something between 0 and 2. Default = 1.

getWeightingExponent2

Returns Number

setWeightingExponent2

Exponent of the weighting function when applying all anchor matrices to a point.

Parameters

  • val Number Usually 1 or higher. Default = 2.

transform

Main function of the class. Transforms a point on the plane and returns its new position.

Parameters

  • p Array Point given as an Array [x, y, z] to be transformed. Z coordinate is optional.

Returns Array Transformed point as an Array.

updateAnchorMatrices

It's usually not necessary to call this method. If anchors and parameters are always set with the given methods (setAnchorOrigin(), ...), this method will be called automatically. It calculates a transformation matrix for each anchor. This matrix reflects the translation of the anchor and the rotation and scaling depending on the (possibly) changed positions of all other anchors.

Anchor

An Anchor has an origin an a target position. Usually you won't have to deal with it directly. Still, there are some functions which could come handy.

Parameters

  • pOrigin
  • pTarget

getOriginPosition

Returns Array The origin position.

setOriginPosition

Parameters

  • p Array New origin position [x, y, z]. Z coordinate is optional.

getTargetPosition

Returns Array The target position.

setTargetPosition

Parameters

  • p Array New target position [x, y, z]. Z coordinate is optional.

getTransformMatrix

Returns Array The transformation matrix of this anchor.