Options
All
  • Public
  • Public/Protected
  • All
Menu

Index

Enumerations

Classes

Interfaces

Type aliases

Variables

Functions

Object literals

Type aliases

Drawable

The types that can be drawn and thus added to the draw queue.

FaceHandler

FaceHandler: (a: number, b: number, c: number) => void

Type declaration

    • (a: number, b: number, c: number): void
    • Parameters

      • a: number
      • b: number
      • c: number

      Returns void

FacetHandler

FacetHandler: (v1: Vertex, v2: Vertex, v3: Vertex, normal?: Vertex) => void

Process a facet. Normals are not guaranteed to be present (binary yes, ascii no).

Type declaration

    • (v1: Vertex, v2: Vertex, v3: Vertex, normal?: Vertex): void
    • Parameters

      • v1: Vertex
      • v2: Vertex
      • v3: Vertex
      • Optional normal: Vertex

      Returns void

ISplit

ISplit: [Array<Vertex>, Array<Vertex>]

Splitting a polygon at a self intersection results in two new polygons.

IndexPair

IndexPair: { i: number; j: number }

Type declaration

  • i: number
  • j: number

Interval

Interval: [number, number]

Some often-used interfaces.

author

Ikaros Kappler

date

2020-10-23

version

1.0.0

Matrix

Matrix<T>: Array<Array<T>>

Type parameters

  • T

OnPathRemoved

OnPathRemoved: (pathIndex: number, oldPath: BezierPath) => void

Handler type for path-removed listeners.

Type declaration

    • Parameters

      Returns void

OnPointerMoved

OnPointerMoved: (pathIndex: number, pathPoint: Vertex, pointerPos: Vertex, t: number) => void

Handler type for mouse-pointer-moved listeners.

Type declaration

    • (pathIndex: number, pathPoint: Vertex, pointerPos: Vertex, t: number): void
    • Parameters

      • pathIndex: number
      • pathPoint: Vertex
      • pointerPos: Vertex
      • t: number

      Returns void

OnVertexInserted

OnVertexInserted: (pathIndex: number, insertIndex: number, newPath: BezierPath, oldPath: BezierPath) => void

Handler type for vertex-inserted listeners.

Type declaration

OnVerticesDeleted

OnVerticesDeleted: (pathIndex: number, removedVertexIndices: Array<number>, newPath: BezierPath, oldPath: BezierPath) => void

Handler type for vertex-removed listeners.

Type declaration

    • (pathIndex: number, removedVertexIndices: Array<number>, newPath: BezierPath, oldPath: BezierPath): void
    • Parameters

      Returns void

SVGPathParams

SVGPathParams: Array<string | number>

A type for SVG <path d="..." /> params. Example: [ 'A':string, radiusx:number, radiusy:number, rotation:number, largeArcFlag=1|0, sweepFlag=1|0, endx:number, endy:number ]

UID

UID: string

A unique identifier (UID) to tell drawables apart in a performant manner.

Vert3

Vert3: { x: number; y: number; z: number }

Type declaration

  • x: number
  • y: number
  • z: number

VertHandler

VertHandler: (x: number, y: number, z: number) => void

A simple wavefront OBJ parser.

Inspired by https://webglfundamentals.org/webgl/lessons/webgl-load-obj.html

param
param
author

Ikaros Kappler

date

2021-04-21

version

0.0.1

Type declaration

    • (x: number, y: number, z: number): void
    • Parameters

      • x: number
      • y: number
      • z: number

      Returns void

VertListener

VertListener: (e: VertEvent) => void

Type declaration

XKeyCallback

XKeyCallback: (e: KeyboardEvent) => void

Type declaration

    • (e: KeyboardEvent): void
    • Parameters

      • e: KeyboardEvent

      Returns void

XMouseCallback

XMouseCallback: (e: XMouseEvent) => void

Type declaration

XWheelCallback

XWheelCallback: (e: XWheelEvent) => void

Type declaration

Variables

Const BLACK

BLACK: Color = Color.makeRGB(0, 0, 0)

Const Blue

Blue: Color = Color.makeRGB(35,151,245)

Const Cyan

Cyan: Color = Color.makeRGB(3,189,214)

Const DeepPurple

DeepPurple: Color = Color.makeRGB(103,59,184)

Const EPS

EPS: number = 0.000001

For circle-polygon-intersection-count detection we need an epsilon to eliminate smaller precision errors.

Const Green

Green: Color = Color.makeRGB(77,175,82)

Const Indigo

Indigo: Color = Color.makeRGB(64,81,181)

Const LightBlue

LightBlue: Color = Color.makeRGB(6,170,245)

Const LightGreen

LightGreen: Color = Color.makeRGB(141,195,67)

Const ORDER_CONTRAST

ORDER_CONTRAST: Array<number> = [ 8, 0, 6, 4, 1, 9, 2, 10, 3, 7, 5 ]

Const Pink

Pink: Color = Color.makeRGB(232,31,100)

Const Purple

Purple: Color = Color.makeRGB(156,39,175)

Const Red

Red: Color = Color.makeRGB(255,67,55)

Const Teal

Teal: Color = Color.makeRGB(1,150,137)

Const WHITE

WHITE: Color = Color.makeRGB(255, 255, 255)

Const WebColors

WebColors: Array<Color> = [Red,Pink,Purple,DeepPurple,Indigo,Blue,LightBlue,Cyan,Teal,Green,LightGreen]

A set of beautiful web colors (I know, beauty is in the eye of the beholder).

I found this color chart with 11 colors and think it is somewhat nice https://www.pinterest.com/pin/229965124706497134/

requires

Color

Const WebColorsContrast

WebColorsContrast: Color[] = shuffleWebColors( ORDER_CONTRAST )

Const WebColorsMalachite

WebColorsMalachite: Array<Color> = [Color.makeRGB(0,21,6),Color.makeRGB(0,30,12),Color.makeRGB(0,52,28),Color.makeRGB(0,81,47),Color.makeRGB(21,134,88),Color.makeRGB(0,46,19),Color.makeRGB(0,68,40),Color.makeRGB(11,81,55),Color.makeRGB(0,91,46),Color.makeRGB(0,111,46),Color.makeRGB(33,140,106)]

A mix of green shades.

requires

Color

Const splitPolygonToNonIntersecting

splitPolygonToNonIntersecting: splitPolygonToNonIntersecting = (() => {/*** @param {Array<Vertex>} vertices* @param {number=10} maxDepth*/const splitPolygonToNonIntersecting = ( vertices:Array<Vertex>,maxDepth?:number ) : Array<Array<Vertex>> => {if( typeof maxDepth === "undefined" )maxDepth = 10;return _splitPolygonToNonIntersecting( vertices, maxDepth );};const _splitPolygonToNonIntersecting = ( vertices:Array<Vertex>,maxDepth:number ) : Array<Array<Vertex>> => {if( maxDepth <= 0 ) {// aborting at max depthreturn [ vertices ];}if( vertices.length <= 3 ) {// No intersections possiblereturn [ vertices ];}const n : number= vertices.length;const lineA : Line = new Line( new Vertex(), new Vertex() );const lineB : Line = new Line( new Vertex(), new Vertex() );for( var a = 0; a < vertices.length; a++ ) {lineA.a.set( vertices[a] );lineA.b.set( vertices[(a+1) % n] );for( var b = 0; b < vertices.length; b++ ) {// Equal edges or neighbour edges intersect by definition.// We ignore them.if( a == b || a+1 == b || a == b+1|| (a==0&&b+1==vertices.length) || (b==0&&a+1==vertices.length) )continue;lineB.a.set( vertices[b] );lineB.b.set( vertices[(b+1) % n] );const intersectionPoint : Vertex|undefined = lineA.intersection(lineB);if( intersectionPoint && lineA.hasPoint(intersectionPoint) && lineB.hasPoint(intersectionPoint) ) {// Cut polygon into two hereconst split : ISplit = splitPolygonAt( vertices, a, b, intersectionPoint );// Split has 2 elements.const leftCleaned : Array<Array<Vertex>> =_splitPolygonToNonIntersecting( split[0], maxDepth-1 );const rightCleaned : Array<Array<Vertex>> =_splitPolygonToNonIntersecting( split[1], maxDepth-1 );return leftCleaned.concat( rightCleaned );}}}// No intersection found:// just return a list with the original// polygon as its only element.return [ vertices ];};// Pre: edgeIndexA < edgeIndexB && vertices.length >= 4const splitPolygonAt = ( vertices:Array<Vertex>,edgeIndexA:number,edgeIndexB:number,intersectionPoint:Vertex ) : ISplit => {const first : Array<Vertex> = [];var second : Array<Vertex> = [];for( var i = 0; i < vertices.length; i++ ) {if( i <= edgeIndexA )first.push( vertices[i] );if( i == edgeIndexA ) {first.push( intersectionPoint );second.push( intersectionPoint ); // clone???}if( i > edgeIndexA && i <= edgeIndexB )second.push( vertices[i] );if( i > edgeIndexB )first.push( vertices[i] );}return [ first, second ];};return splitPolygonToNonIntersecting;})()

This function cuts a given self-intersecting polygon into non-self-intersecting sub polygons.

The algorithm only works for non-self-overlapping polygons: Please note that the union set of the sub polygons themselves will not be disjunct if the input polyon overlaps with itself!

See this illustration for details: ./demos/27-polygon-intersection-greinerhormann/splitting-polygon-types.png

name

splitPolygonToNonIntersecting

param

The polygon as an array of vertices.

param

Number of max recursive steps (default is 10).

returns

A sequence of non-self-intersecting sub polygons.

Functions

Const _toArrayBuffer

  • _toArrayBuffer(buffer: string): ArrayBuffer

Const arrayFill

  • arrayFill<T>(count: number, initialValue: T): Array<T>
  • An equivalent of lodash.array_fill(...).

    author

    Ikaros Kappler

    date

    2020-10-23

    version

    1.0.0

    Type parameters

    • T: any

    Parameters

    • count: number
    • initialValue: T

    Returns Array<T>

Const clearPolygonDuplicateVertices

  • clearPolygonDuplicateVertices(vertices: Array<Vertex>, epsilon?: number): Array<Vertex>
  • Remove all duplicate neighbours from the given polygon.

    Imagagine a polygon: [ [0,0], [10,10], [10,10], [10,10], [20,20], [10,10], [30,30], [0,0] ]

    The returned vertex array will then be: [ [10,10], [20,20], [10,10], [30,30], [0,0] ]

    Duplicate neighbours (and only neightours) of a run of any length will be removed.

    method

    clearPolygonDuplicateVertices

    Parameters

    • vertices: Array<Vertex>

      The polygon vertices to use.

    • Optional epsilon: number

      The epsilon area to use around each vertex to check equality.

    Returns Array<Vertex>

Const cloneVertexArray

Private Const comparison

  • Compare two vertices to create an order on the 2D plane.

    name

    comparison

    Parameters

    • a: XYCoords

      The first of the two points to compare.

    • b: XYCoords

      The second of the two points to compare.

    Returns number

    A number indicating the order (negative if a is 'smaller', 0 if both are equal, positive if a is 'larger').

Const convexPolygonIncircle

Private Const cross

Const findCircleIntersections

  • findCircleIntersections(convexHull: Polygon, circle: Circle): Array<number>
  • Find all intersecting lines (indices) on the polyon that intersect the circle.

    Parameters

    • convexHull: Polygon

      The polygon to detect the intersections on (here this is the convex hull given).

    • circle: Circle

      The circle to detect the intersections with.

    Returns Array<number>

    The indices of those lines that intersect (or touch) the circle.

Const findPolygonSelfIntersections

  • findPolygonSelfIntersections(vertices: Array<XYCoords>): Array<Vertex>

Const getContrastColor

Const getConvexHull

Const getTangentTriangle4

  • This function computes the three points for the inner maximum circle lying tangential to the three subsequential lines (given by four points).

    Compute the circle from that triangle by using Triangle.getCircumcircle().

    Not all three lines should be parallel, otherwise the circle might have infinite radius.

    LineA := [vertA, vertB] LineB := [vertB, vertC] LineC := [vertC, vertD]

    Parameters

    • vertA: Vertex

      The first point of the three connected lines.

    • vertB: Vertex

      The second point of the three connected lines.

    • vertC: Vertex

      The third point of the three connected lines.

    • vertD: Vertex

      The fourth point of the three connected lines.

    Returns Triangle

    The triangle of the circular tangential points with the given lines (3 or 4 of them).

Const gup

  • gup(): Record<string, string>

Const inside

Const intersection

Const matrixFill

  • matrixFill<T>(countA: number, countB: number, initialValue: T): Matrix<T>

Const shuffleWebColors

  • shuffleWebColors(order: Array<number>): Color[]

Const sutherlandHodgman

Object literals

Const geomutils

geomutils: object

A collection of usefull geometry utilities.

global

nsectAngle

  • Compute the n-section of the angle – described as a triangle (A,B,C) – in point A.

    Parameters

    • pA: Vertex

      The first triangle point.

    • pB: Vertex

      The second triangle point.

    • pC: Vertex

      The third triangle point.

    • n: number

      The number of desired angle sections (example: 2 means the angle will be divided into two sections, means an returned array with length 1, the middle line).

    Returns Array<Line>

    An array of n-1 lines secting the given angle in point A into n equal sized angle sections. The lines' first vertex is A.

wrapMax

  • wrapMax(x: number, max: number): number
  • Wrap the value (e.g. an angle) into the given range of [0,max).

    name

    wrapMax

    Parameters

    • x: number

      The value to wrap.

    • max: number

      The max bound to use for the range.

    Returns number

    The wrapped value inside the range [0,max).

wrapMinMax

  • wrapMinMax(x: number, min: number, max: number): number
  • Wrap the value (e.g. an angle) into the given range of [min,max).

    name

    wrapMinMax

    Parameters

    • x: number

      The value to wrap.

    • min: number

      The min bound to use for the range.

    • max: number

      The max bound to use for the range.

    Returns number

    The wrapped value inside the range [min,max).

Legend

  • Constructor
  • Property
  • Method
  • Property
  • Method
  • Inherited property
  • Inherited method
  • Private property
  • Private method
  • Static property
  • Static method

Generated using TypeDoc