❤
npm
Sign UpSign In

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

1.2.0 • Public • Published

geometrik

Geometry classes and utils.

npm i geometrik pnpm add geometrik yarn add geometrik

Examples

# rect-collision
    # view source example/rect-collision.ts 

    import { Point, Rect } from 'geometrik'

let randomSeed = 15151523
function random(x = 1) {
  return (
    (Math.sin(
        10e10 * randomSeed
          * Math.cos(5e10 * ++randomSeed)
      )
        + Math.sin(
          10e10 * randomSeed
            * Math.sin(5e10 * ++randomSeed)
        )
        + Math.sin(
          10e10 * randomSeed
            * Math.cos(5e10 * ++randomSeed)
        ))
      / 3
      * 0.5 + 0.5
  )
    * x
}

const view = new Point(400, 400)
const minSize = 10
const scale = 50
const rects = Array.from(
  { length: 20 },
  () =>
    new Rect(
      random(view.x),
      random(view.y),
      minSize + random(scale),
      minSize + random(scale)
    ) as Rect & { div: HTMLDivElement }
)

for (const r of rects) {
  const div = document.createElement('div')
  ;(r as any).div = div
  const color = `hsl(${random(360)}, 50%, 50%)`
  Object.assign(div.style, r.toStyle(), { position: 'absolute' })
  div.style.backgroundColor = color
  document.body.appendChild(div)
}

const h = rects[0]
window.onpointermove = e => {
  h.x = e.pageX - h.width / 2
  h.y = e.pageY - h.height / 2
  for (const r of rects) {
    if (h === r) continue

    if (h.intersectsRect(r)) {
      const p = h.collisionResponse(r)
      // const c2 = r.intersectPoint(h)
      h.translateSelf(p.scale(0.5))
      r.translateSelf(p.scale(-0.5))
      // r.setPosition(c2.add(h.center).sub(r.size.scale(0.5)))
      // r.translateSelf(c.scale(-0.5))
      Object.assign(r.div.style, r.toStylePosition())
      // h.setPosition(h.touchPoint(r))
    }
  }
  Object.assign(h.div.style, h.toStylePosition())
}
# web
    # view source example/web.ts 

    import * as geometrik from 'geometrik'

console.log(new geometrik.Rect())

API

# Intersect

    # Bottom

      8

    # Inside

      16

    # Left

      1

    # None

      0

    # Right

      4

    # Top

      2

# Line

# angle()

    angle()  =>

      number
# angleDegrees()

    angleDegrees()  =>

      number
# clone(this)
# dot(this)

    # this

    dot(this)  =>

      number
# getLineToRectangleCollisionResponse(this, intersection, r)
# intersectionRect(r)
# intersectsLine(other)

    # other

    intersectsLine(other)  =>

      boolean
# intersectsRect(r)
# mag(this)

    # this

    mag(this)  =>

      number
# translate(this, x)
# translateSelf(this, x)
# Matrix

    # constructor(matrix)

      # new Matrix()

        Matrix

        # matrix

          string | number [] | DOMMatrix

    # clone()

# flipX()
# flipY()
# inverse()
# multiply(other)

    # other

      DOMMatrixInit

    multiply(other)  =>

# rotate(rotX, rotY, rotZ)

    # rotX

      number

    # rotY

      number

    # rotZ

      number

    rotate(rotX, rotY, rotZ)  =>

# rotateAxisAngle(x, y, z, angle)

    # x

      number

    # y

      number

    # z

      number

    # angle

      number

    rotateAxisAngle(x, y, z, angle)  =>

# rotateFromVector(x, y)

    # x

      number

    # y

      number

    rotateFromVector(x, y)  =>

# scale(scaleX, scaleY, scaleZ, originX, originY, originZ)

    # scaleX

      number

    # scaleY

      number

    # scaleZ

      number

    # originX

      number

    # originY

      number

    # originZ

      number

    scale(scaleX, scaleY, scaleZ, originX, originY, originZ)  =>

# scale3d(scale, originX, originY, originZ)

    # scale

      number

    # originX

      number

    # originY

      number

    # originZ

      number

    scale3d(scale, originX, originY, originZ)  =>

# scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)

    # scaleX

      number

    # scaleY

      number

    # scaleZ

      number

    # originX

      number

    # originY

      number

    # originZ

      number

    scaleSelf(scaleX, scaleY, scaleZ, originX, originY, originZ)  =>

# skewX(sx)

    # sx

      number

    skewX(sx)  =>

# skewY(sy)

    # sy

      number

    skewY(sy)  =>

# toJSON()

    toJSON()  =>

      Float64Array
# translate(tx, ty, tz)

    # tx

      number

    # ty

      number

    # tz

      number

    translate(tx, ty, tz)  =>

# translateSelf(tx, ty, tz)

    # tx

      number

    # ty

      number

    # tz

      number

    translateSelf(tx, ty, tz)  =>

# Morph

    # constructor()
    # Cubic  =  ...
    # Linear  =  ...
    # Nearest  =  ...
    # Spline  =  ...
    # coeffs(from, to)

      # from

        T []

      # to

        T []

      coeffs<T>(from, to)  =>

        number []

# Point
# x

    number

# y

    number

# bottom
# height
# left
# pos
# position
# right
# size
# top
# width
# [iterator]()

    [iterator]()  =>

      IterableIterator<number>
# abs(this)
# absSelf(this)
# absoluteSum(this)

    # this

    absoluteSum(this)  =>

      number
# add(this, x)
# addSelf(this, x)
# angleTo(this, other)

    # this
    # other

    angleTo(this, other)  =>

      number
# chebyshev(this, other)

    # this
    # other

    chebyshev(this, other)  =>

      number
# clampMinSelf(this, min)

    # this
    # min

      number

    clampMinSelf(this, min)  =>

# clampSelf(this, min, max)

    # this
    # min

      number

    # max

      number

    clampSelf(this, min, max)  =>

# clone(this)
# contain(this, other)
# containSelf(this, other)
# diff(this, other)
# diffSelf(this, other)
# distance(this, other)

    # this
    # other

    distance(this, other)  =>

      number
# dot(this, other)
# draw(this, color, position)

    # this
    # color  =  'yellow'

      string

    # position  =  'absolute'

      string

    draw(this, color, position)  =>

      HTMLDivElement
# equals(this, other)

    # this
    # other

    equals(this, other)  =>

      boolean
# equalsAny(this, other)

    # this
    # other

    equalsAny(this, other)  =>

      boolean
# euclidean(this, other)

    # this
    # other

    euclidean(this, other)  =>

      number
# gridRound(this, p)

    # this
    # p  =  1

      number

    gridRound(this, p)  =>

# gridRoundSelf(this, p)

    # this
    # p  =  1

      number

    gridRoundSelf(this, p)  =>

# interpolate(this, other, t)
# interpolateSelf(this, other, t)
# intersectPoint(this, other, center)
# length(this)

    # this

    length(this)  =>

      number
# mag(this)

    # this

    mag(this)  =>

      number
# manhattan(this, other)

    # this
    # other

    manhattan(this, other)  =>

      number
# max(this)

    # this

    max(this)  =>

      number
# min(this)

    # this

    min(this)  =>

      number
# multiply(this, x)
# multiplySelf(this, x)
# negate(this)
# negateSelf(this)
# normal(this)
# normalize(this, other)
# normalizeSelf(this, other)
# octile(this, other)

    # this
    # other

    octile(this, other)  =>

      number
# precisionRound(this, p)

    # this
    # p  =  1

      number

    precisionRound(this, p)  =>

# precisionRoundSelf(this, p)

    # this
    # p  =  1

      number

    precisionRoundSelf(this, p)  =>

# round(this)
# roundSelf(this)
# scale(this, x)
# scaleLinear(this, x)
# scaleLinearSelf(this, x)
# scaleSelf(this, x)
# screen(this, other)
# screenSelf(this, other)
# set(other)
# setLeft(x)

    # x

      number

    setLeft(x)  =>

# setTop(y)

    # y

      number

    setTop(y)  =>

# square(this)
# squareSelf(this)
# sub(this, x)
# subSelf(this, x)
# sum(this)

    # this

    sum(this)  =>

      number
# toCSSStyle()

    toCSSStyle()  =>

      string
# toJSON()
# toPositionObject()

    toPositionObject()  =>

      {

      # x  =  ...

        number

      # y  =  ...

        number

      }
# toSizeObject()

    toSizeObject()  =>

      {

      # height  =  ...

        number

      # width  =  ...

        number

      }
# toString()

    toString()  =>

      string
# toStyle()

    toStyle()  =>

      Partial<CSSStyleDeclaration>
# toStylePct()

    toStylePct()  =>

      Partial<CSSStyleDeclaration>
# toStylePosition()

    toStylePosition()  =>

      Partial<CSSStyleDeclaration>
# toStylePositionPct()

    toStylePositionPct()  =>

      Partial<CSSStyleDeclaration>
# toStyleSize()

    toStyleSize()  =>

      Partial<CSSStyleDeclaration>
# toStyleSizePct()

    toStyleSizePct()  =>

      Partial<CSSStyleDeclaration>
# touchPoint(this, other, center)
# transform(this, matrix)

    # this
    # matrix

      DOMMatrix

    transform(this, matrix)  =>

# transformSelf(this, matrix)

    # this
    # matrix

      DOMMatrix

    transformSelf(this, matrix)  =>

# translate(this, x)
# translateSelf(this, x)
# unit(this)
# withinRect(this, other)

    # this
    # other

    withinRect(this, other)  =>

      boolean
# zoomLinear(this, x)
# zoomLinearSelf(this, x)
# compare(a, b)
# fromAngle(radians)

    # radians

      number

    fromAngle(radians)  =>

# fromAngleDegrees(degrees)

    # degrees

      number

    fromAngleDegrees(degrees)  =>

# fromElement(el)

    # el

      HTMLElement

    fromElement(el)  =>

# fromMatrix(matrix)

    # matrix

      DOMMatrix

    fromMatrix(matrix)  =>

# fromObject(obj)
# Polygon
# boundingRect(this)
# chop(this, min, max)
# chopSelf(this, min, max)
# fit(this, length)
# fitSelf(this, length)
# mag(this)
# rope(this, coeff)
# ropeSelf(this, coeff)
# screen(this, other)
# toSVGPath()

    toSVGPath()  =>

      string
# translateSelf(this, other)
# absSum(points)
# boundingRect(points)

    # points

    boundingRect(points)  =>

# chop(points, min, max)

    # points
    # min  =  35

      number

    # max  =  240

      number

    chop(points, min, max)  =>

# fit(points, length)

    # points
    # length

      number

    fit(points, length)  =>

# mag(points)

    # points

    mag(points)  =>

      number
# morph(morphFn, from, to, t)
# resample(points, index, t)

    # points
    # index

      number

    # t

      number

    resample(points, index, t)  =>

# resampleCubic(points, index, t)

    # points
    # index

      number

    # t

      number

    resampleCubic(points, index, t)  =>

# resampleSpline(points, index, t)

    # points
    # index

      number

    # t

      number

    resampleSpline(points, index, t)  =>

# rope(points, coeff)

    # points
    # coeff  =  1

      number

    rope(points, coeff)  =>

# sat(p1, p2)
# screen(a, b)
# sum(points)
# toSVGPath(points)

    # points

    toSVGPath(points)  =>

      string
# Polyline
# fromPoints(points)
# Rect

    # constructor(obj)
    # height

      number

    # width

      number

    # x

      number

    # y

      number

    # boundingRect  =  Rect.combine

# bottom
# bottomLeft
# bottomLine
# bottomRight
# center
# left
# leftLine
# points
# pos
# position
# right
# rightLine
# size
# top
# topLeft
# topLine
# topRight
# [iterator]()

    [iterator]()  =>

      IterableIterator<number>
# add(this, x)
# addSelf(this, x)
# clone(this)
# collisionResponse(this, other)
# contain(this, other)
# containSelf(this, other)
# distanceRect(this, other)
# draw(this, color, position)

    # this
    # color  =  'red'

      string

    # position  =  'absolute'

      string

    draw(this, color, position)  =>

      HTMLDivElement
# equals(this, other)

    # this
    # other

    equals(this, other)  =>

      boolean
# interpolate(this, other, t)

    # this
    # other
    # t

      number

    interpolate(this, other, t)  =>

# interpolateSelf(this, other, t)

    # this
    # other
    # t

      number

    interpolateSelf(this, other, t)  =>

# intersectPoint(this, other, center)
# intersectionRect(this, other)
# intersectsRect(this, other)

    # this
    # other

    intersectsRect(this, other)  =>

      boolean
# maybeCalculateLines()

    maybeCalculateLines()  =>

      void
# multiply(this, x)

    # this
    # x

    multiply(this, x)  =>

    # this
    # x

      number

    # y

      number

    # w

      number

    # h

      number

    multiply(this, x, y, w, h)  =>

# multiplySelf(this, x)

    # this
    # x

    multiplySelf(this, x)  =>

    # this
    # x

      number

    # y

      number

    # w

      number

    # h

      number

    multiplySelf(this, x, y, w, h)  =>

# negate(this)
# negateSelf(this)
# normalize(this, matrix)

    # this
    # matrix

      DOMMatrix

    normalize(this, matrix)  =>

    # this
    # other

    normalize(this, other)  =>

# normalizeSelf(this, matrix)

    # this
    # matrix

      DOMMatrix

    normalizeSelf(this, matrix)  =>

    # this
    # other

    normalizeSelf(this, other)  =>

# place(this, other, placement)
# placeSelf(this, other, placement)
# round(this)
# roundSelf(this)
# scale(this, x)
# scaleLinear(this, x)
# scaleLinearSelf(this, x)

    # this
    # x

    scaleLinearSelf(this, x)  =>

    # this
    # x

      number

    # y

      number

    scaleLinearSelf(this, x, y)  =>

# scaleSelf(this, x)
# screen(this, other)
# screenSelf(this, other)
# set(this, other)
# setHeight(height)

    # height

      number

    setHeight(height)  =>

# setLeft(x)

    # x

      number

    setLeft(x)  =>

# setPosition(this, other)
# setSize(this, other)
# setTop(y)

    # y

      number

    setTop(y)  =>

# setWidth(width)

    # width

      number

    setWidth(width)  =>

# sub(this, x)
# subSelf(this, x)
# toCSSStyle()

    toCSSStyle()  =>

      string
# toJSON()

    toJSON()  =>

      {

      # height  =  ...

        number

      # width  =  ...

        number

      # x  =  ...

        number

      # y  =  ...

        number

      }
# toPositionObject()

    toPositionObject()  =>

      {

      # x  =  ...

        number

      # y  =  ...

        number

      }
# toSVGPath()

    toSVGPath()  =>

      string
# toSizeObject()

    toSizeObject()  =>

      {

      # height  =  ...

        number

      # width  =  ...

        number

      }
# toString()

    toString()  =>

      string
# toStyle()

    toStyle()  =>

      Partial<CSSStyleDeclaration>
# toStylePct()

    toStylePct()  =>

      Partial<CSSStyleDeclaration>
# toStylePosition()

    toStylePosition()  =>

      Partial<CSSStyleDeclaration>
# toStylePositionPct()

    toStylePositionPct()  =>

      Partial<CSSStyleDeclaration>
# toStyleSize()

    toStyleSize()  =>

      Partial<CSSStyleDeclaration>
# toStyleSizePct()

    toStyleSizePct()  =>

      Partial<CSSStyleDeclaration>
# touchPoint(this, other, center)
# transform(this, matrix)

    # this
    # matrix

      DOMMatrix

    transform(this, matrix)  =>

# transformSelf(this, matrix)

    # this
    # matrix

      DOMMatrix

    transformSelf(this, matrix)  =>

# translate(this, x)
# translateSelf(this, x)
# withinRect(this, other)

    # this
    # other

    withinRect(this, other)  =>

      boolean
# zoomLinear(this, x)
# zoomLinearSelf(this, x)
# combine(rects)
# compare(a, b)

    # a
    # b

    compare(a, b)  =>

      boolean
# fromElement(el)

    # el

      HTMLElement & {

      # rect

      }

fromElement(el)  =>

# fromObject(obj)
# fromPoints(topLeft, bottomRight)

    # topLeft
    # bottomRight

    fromPoints(topLeft, bottomRight)  =>

# fromUnsortedPoints(p1, p2)
# Scalar

    # constructor(x)

      # new Scalar()

    # x

      number

    # normalizeSelf(this, x)

# scaleSelf(this, x)
# transformSelf(this, matrix)
# clamp(min, max, x)

    # min

      number

    # max

      number

    # x

      number

    clamp(min, max, x)  =>

      number
# degreesToRadians(degrees)

    # degrees

      number

    degreesToRadians(degrees)  =>

      number
# interpolate(a, b, t)

    # a

      number

    # b

      number

    # t

      number

    interpolate(a, b, t)  =>

      number
# radiansToDegrees(radians)

    # radians

      number

    radiansToDegrees(radians)  =>

      number
# Shape

    # constructor()
    # x

      number

    # y

      number

    # bottom
    # height
    # left
    # right
    # top
    # width
    # add(this, x)

    # this
    # x

      number

    # y

      number

    add(this, x, y)  =>

# addSelf(this, x)
# clone(this)
# contain(this, other)
# containSelf(this, other)
# draw(color, position)

    # color  =  'red'

      string

    # position  =  'absolute'

      string

    draw(color, position)  =>

      HTMLDivElement
# intersectPoint(this, other, center)
# negate(this)
# negateSelf(this)
# scale(this, x)
# scaleLinear(this, x)
# scaleLinearSelf(this, x)
# scaleSelf(this, x)
# screen(this, other)
# screenSelf(this, other)
# setLeft(x)

    # x

      number

    setLeft(x)  =>

# setTop(y)

    # y

      number

    setTop(y)  =>

# sub(this, x)
# subSelf(this, x)
# toCSSStyle()

    toCSSStyle()  =>

      string
# toJSON()
# toPositionObject()

    toPositionObject()  =>

      {

      # x  =  ...

        number

      # y  =  ...

        number

      }
# toSizeObject()

    toSizeObject()  =>

      {

      # height  =  ...

        number

      # width  =  ...

        number

      }
# toStyle()

    toStyle()  =>

      Partial<CSSStyleDeclaration>
# toStylePct()

    toStylePct()  =>

      Partial<CSSStyleDeclaration>
# toStylePosition()

    toStylePosition()  =>

      Partial<CSSStyleDeclaration>
# toStylePositionPct()

    toStylePositionPct()  =>

      Partial<CSSStyleDeclaration>
# toStyleSize()

    toStyleSize()  =>

      Partial<CSSStyleDeclaration>
# toStyleSizePct()

    toStyleSizePct()  =>

      Partial<CSSStyleDeclaration>
# touchPoint(this, other, center)
# translate(this, x)
# translateSelf(this, x)
# zoomLinear(this, x)
# zoomLinearSelf(this, x)
# Vec3

    # constructor(x, y, z)

      # new Vec3()

        Vec3

        # x  =  0

          number

        # y  =  x

          number

        # z  =  x

          number

    # x

      number

    # y

      number

    # z

      number

    # [iterator]()

      [iterator]()  =>

        IterableIterator<number>

# interpolate()

    interpolate()  =>

      number
# set(other)
# toString()

    toString()  =>

      string
# MorphFn

    # (from, to)

      # from

        T []

      # to

        T []

      <T extends  Point>(from, to)  =&gt

Readme

Keywords

none

Package Sidebar

Install

npm i geometrik

Repository

github.com/stagas/geometrik

Homepage

github.com/stagas/geometrik#readme

Weekly Downloads

17

Version

1.2.0

License

MIT

Unpacked Size

859 kB

Total Files

73

Last publish

Collaborators

  • stagas
Try on RunKit
Report malware