@daeinc/geom

A collection of gemetry-related functions. Breaking changes expected in the future.

Installation

npm i @daeinc/geom

then,

import { blendPath, ... } from "@daeinc/geom";

CDN

import { blendPath, ... } from "https://cdn.jsdelivr.net/npm/@daeinc/geom/dist/geom.esm.js"

Types

type Pt = number[];
type Pts = number[][];
type GenericObject = Record<string, any>;

Three custom types are used.

Functions

blendPath

const blendPath: (
  path1: Pts,
  path2: Pts,
  numBlends: number,
  guidePath?: Pts,
) => number[][][];

Interpolates two paths to create in-between paths. numBlends does not count the two original paths. In other words, the two original paths are not included in the return array. guidePath parameter is not yet implemented.

createShapeFunc

const createShapeFunc: (
  pts: Pts,
  anchor?: Pt,
) => (x: number, y: number, w: number, h: number) => Pts;

dist

const dist: (pt1: Pt, pt2: Pt) => number;

Returns a distance between two points.

distSq

const distSq: (pt1: Pt, pt2: Pt) => number;

Returns a squared distance between two points. There's another version in @daeinc/math that takes number arguments.

extrudePath

const extrudePath: (
  path: Pts,
  numPointsToExtrude: number,
  offset: Pt,
  mode?: "start" | "end" | "both",
  shapeFunc?: () => Pts,
) => number[][];

Extrudes a path in 2d space.

generateSmoothPath

const generateSmoothPath: (pts: Pts, smoothFactor: number) => number[][];

Generates extra points for smooth corners of path. Use with drawSmoothPath() from another package, @daeinc/canvas

getAngleBetween

const getAngleBetween: (pt1: Pt, pt2: Pt) => number;

Get angle between two points using Math.atan2(). Return value is between -pi and pi. pt2 - pt1 is the order of subtraction.

getPathLength

const getPathLength: (path: Pts) => number;

Returns the total length of path

getPositiveAngleBetween

const getPositiveAngleBetween: (pt1: Pt, pt2: Pt) => number;

Return value is between 0 and 2pi.

getSegmentLengths

const getSegmentLengths: (pts: Pts) => number[];

Returns an array with each segment length (distance between points).

interpolateArray

const interpolateArray: (
  arrStart: number[],
  arrTarget: number[],
  t: number,
) => number[];

interpolatePath

const interpolatePath: (
  pathStart: Pts,
  pathTarget: Pts,
  t: number,
) => number[][];

Interpolates between two number arrays. Usually used for path data of [x, y].

interpolateObject

const interpolateObject: (
  objStart: GenericObject,
  objTarget: GenericObject,
  t: number,
) => GenericObject;

Interpolates between two objects formatted { string: number }. For example, { x: 10, y: 20 }.

interpolate

const interpolate: <T>(
  start: T,
  target: T,
  t: number,
) => number | GenericObject | T;

Interpolates number, number[], number[][] or generic object.

projectPointOnLine

const projectPointOnLine: (pt: Pt, line: Pts) => Pt;

Projects a point on a line.

reflectPoint

const reflectPoint: (pt: Pt, axis: Pt | Pts) => Pt;

Reflects a point on another point or a line.

reflectPath

const reflectPath: (pts: Pts, axis: Pt | Pts) => Pts;

Reflects a path either on a point or a line.

scalePoint

const scalePoint: (pt: Pt, size: Pt) => Pt;

Scales a single point.

scalePath

const scalePath: (path: Pts, size: Pt) => Pts;

Takes in normalized path data and returns [ x, y ] that is scaled to size, [ width, height ].

To Dos

• reconcile the use of both Float32Array(gl-vec2) and regular array
• add Canvas mock tests
  • https://github.com/hustcc/jest-canvas-mock
  • https://github.com/americanexpress/jest-image-snapshot/
  • https://yonatankra.com/how-to-test-html5-canvas-with-jest/

License

MIT