Skip to content

stagas/geometrik

BranchesTags

Repository files navigation

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

    # constructor(line)
    # p1
    # p2
    # points
    # [iterator]()

      [iterator]()  =>

    # 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

    # constructor(obj)
    # absSum

      # (this)

        # this

        (this)  =>

          number

    # 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

    # constructor(polygon)
    # points
    # forEach
    # length
    # slice
    # absSum(this)

      # this

      absSum(this)  =>

        number

    # 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
# 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)
    # 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)  =>

        # (fi, ti, t)

          # fi

            number

          # ti

            number

          # t

            number

          (fi, ti, t)  =>

# Placement

    "nw" | "nwr" | "nel" | "n" | "ne" | "e" | "se" | "s" | "sw" | "w"

# ShapeLike

    {

    # height

      number

    # width

      number

    # x

      number

    # y

      number

    } | {

    # height

      number

    # width

      number

    # x

      number

    # y

      number

    } | {

    # height

      number

    # width

      number

    # x

      number

    # y

      number

    } & {

    # toJSON

    }

# cardinal(data, closed, tension)

    # data
    # closed

      boolean

    # tension

      number

    cardinal(data, closed, tension)  =>

      string

Credits

Contributing

Fork or edit and submit a PR.

All contributions are welcome!

License

MIT © 2022 stagas

About

Geometry classes and utils.

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases 4

v1.2.0 Latest
Dec 7, 2022
+ 3 releases

Packages

No packages published

Languages