Class Shape

An arbitrary 2d shape plane using paths with optional holes.

Example

const heartShape = new Shape();

heartShape.moveTo( 25, 25 );
heartShape.bezierCurveTo( 25, 25, 20, 0, 0, 0 );
heartShape.bezierCurveTo( - 30, 0, - 30, 35, - 30, 35 );
heartShape.bezierCurveTo( - 30, 55, - 10, 77, 25, 95 );
heartShape.bezierCurveTo( 60, 77, 80, 55, 80, 35 );
heartShape.bezierCurveTo( 80, 35, 80, 0, 50, 0 );
heartShape.bezierCurveTo( 35, 0, 25, 25, 25, 25 );

Hierarchy

Constructors

constructor

Properties

arcLengthDivisions autoClose currentPoint curves holes isArcCurve isCatmullRomCurve3 isCubicBezierCurve isCubicBezierCurve3 isEllipseCurve isLineCurve isLineCurve3 isQuadraticBezierCurve isQuadraticBezierCurve3 isSplineCurve type uuid

Methods

absarc absellipse add arc bezierCurveTo clone closePath computeFrenetFrames copy ellipse extractPoints fromJSON getCurveLengths getLength getLengths getPoint getPointAt getPoints getPointsHoles getSpacedPoints getTangent getTangentAt getUtoTmapping lineTo moveTo quadraticCurveTo setFromPoints splineThru toJSON updateArcLengths

Constructors

constructor

  • Creates a Shape from the points. The first point defines the offset, then successive points are added to the curves array as LineCurves.

    If no points are specified, an empty shape is created and the currentPoint is set to the origin.

    Parameters

    • Optional points: Vector2[]

      (optional) array of Vector2.

    Returns Shape

Properties

arcLengthDivisions

arcLengthDivisions: number

Determines the amount of divisions when calculating the cumulative segment lengths of a curve via .getLengths. To ensure precision when using methods like .getSpacedPoints, it is recommended to increase .arcLengthDivisions if the curve is very large.

Default

200

autoClose

autoClose: boolean

Whether or not to automatically close the path.

Default Value

false

currentPoint

currentPoint: Vector2

The current offset of the path. Any new Curve added will start here.

Default Value

new Vector2()

curves

curves: Curve<Vector2>[]

The array of Curves.

Default Value

[]

holes

holes: Path[]

An array of paths that define the holes in the shape.

Default Value

[]

Readonly isArcCurve

isArcCurve: boolean

subclass should override

Default Value

false

Readonly isCatmullRomCurve3

isCatmullRomCurve3: boolean

subclass should override

Default Value

true

Readonly isCubicBezierCurve

isCubicBezierCurve: boolean

subclass should override

Default Value

false

Readonly isCubicBezierCurve3

isCubicBezierCurve3: boolean

subclass should override

Default Value

false

Readonly isEllipseCurve

isEllipseCurve: boolean

subclass should override

Default Value

false

Readonly isLineCurve

isLineCurve: boolean

subclass should override

Default Value

false

Readonly isLineCurve3

isLineCurve3: boolean

subclass should override

Default Value

false

Readonly isQuadraticBezierCurve

isQuadraticBezierCurve: boolean

subclass should override

Default Value

false

Readonly isQuadraticBezierCurve3

isQuadraticBezierCurve3: boolean

subclass should override

Default Value

false

Readonly isSplineCurve

isSplineCurve: boolean

subclass should override

Default Value

false

Readonly type

type: string

Default Value

'Shape'

Readonly uuid

uuid: string

UUID of this instance. This gets automatically assigned, so this shouldn't be edited.

Methods

absarc

  • Adds an absolutely positioned EllipseCurve to the path.

    Returns

    This instance.

    Parameters

    • Optional x: number

      The absolute center x of the arc. Default is 0.

    • Optional y: number

      The absolute center y of the arc. Default is 0.

    • Optional radius: number

      The radius of the arc. Default is 1.

    • Optional startAngle: number

      The start angle of the curve in radians starting from the positive X axis. Default is 0.

    • Optional endAngle: number

      The end angle of the curve in radians starting from the positive X axis. Default is 2 x Math.PI.

    • Optional isClockwise: boolean

      Sweep the arc clockwise. Defaults to false.

    Returns Shape

absellipse

  • Adds an absolutely positioned EllipseCurve to the path.

    Returns

    This instance.

    Parameters

    • x: number

      – The X center of the ellipse. Default is 0.

    • y: number

      – The Y center of the ellipse. Default is 0.

    • xRadius: number

      – The radius of the ellipse in the x direction. Default is 1.

    • yRadius: number

      – The radius of the ellipse in the y direction. Default is 1.

    • startAngle: number

      The start angle of the curve in radians starting from the positive X axis. Default is 0.

    • endAngle: number

      The end angle of the curve in radians starting from the positive X axis. Default is 2 x Math.PI.

    • isClockwise: boolean

      Sweep the arc clockwise. Defaults to false.

    • rotation: number

    Returns Shape

add

arc

  • Adds an EllipseCurve to the path, positioned relative to the currentPoint.

    Returns

    This instance.

    Parameters

    • x: number

      The absolute center x of the arc. Default is 0.

    • y: number

      The absolute center y of the arc. Default is 0.

    • radius: number

      The radius of the arc. Default is 1.

    • startAngle: number

      The start angle of the curve in radians starting from the positive X axis. Default is 0.

    • endAngle: number

      The end angle of the curve in radians starting from the positive X axis. Default is 2 x Math.PI.

    • isClockwise: boolean

      Sweep the arc clockwise. Defaults to false.

    Returns Shape

bezierCurveTo

  • Creates a bezier curve from currentPoint with (cp1X, cp1Y) and (cp2X, cp2Y) as control points and updates currentPoint to the end point (x,y).

    Returns

    This instance.

    Parameters

    • cp1x: number

      Control point1, x coordinate

    • cp1y: number

      Control point1, y coordinate

    • cp2x: number

      Control point2, x coordinate

    • cp2y: number

      Control point2, y coordinate

    • x: number

      end point, x coordinate

    • y: number

      end point, y coordinate

    Returns Shape

clone

  • Creates a new instance with same property values as this curve.

    Returns

    A new Curve instance exactly like this curve.

    Returns Curve<Vector2>

closePath

  • Adds a lineCurve to close the path if start and end of lines are not connected.

    Returns void

computeFrenetFrames

  • Generates the Frenet frames. Learn more at http://www.cs.indiana.edu/pub/techreports/TR425.pdf

    Returns

    An object with shape: { tangents: Vector3[]; normals: Vector3[]; binormals: Vector3[]; }

    Parameters

    • segments: number

      Number of segments

    • Optional closed: boolean

      True if this curve is closed.

    Returns { binormals: Vector3[]; normals: Vector3[]; tangents: Vector3[] }

    • binormals: Vector3[]
    • normals: Vector3[]
    • tangents: Vector3[]

copy

  • Copies another Curve object's properties to this instance.

    Returns

    This instance.

    Parameters

    • source: Curve<Vector2>

      The source curve.

    Returns Shape

ellipse

  • Adds an EllipseCurve to the path, positioned relative to the currentPoint.

    Returns

    This instance.

    Parameters

    • x: number

      The center of the ellipse offset from the last call.

    • y: number

      The center of the ellipse offset from the last call.

    • xRadius: number

      The radius of the ellipse in the x axis.

    • yRadius: number

      The radius of the ellipse in the y axis.

    • startAngle: number

      The start angle in radians.

    • endAngle: number

      The end angle in radians.

    • isClockwise: boolean

      Sweep the ellipse clockwise. Defaults to false.

    • rotation: number

      The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Optional, defaults to 0.

    Returns Shape

extractPoints

  • Get the points on the shape and the holes array as an object.

    Returns

    An object with the following shape: { shape: Vector2[]; holes: Vector2[]; }

    Parameters

    • divisions: number

      The fineness of the result.

    Returns { holes: Vector2[][]; shape: Vector2[] }

    • holes: Vector2[][]
    • shape: Vector2[]

fromJSON

  • Copies the data from the given JSON object to this instance.

    Returns

    This instance.

    Parameters

    • json: object

      The source JSON object.

    Returns Shape

getCurveLengths

  • Get list of cumulative curve lengths of this instance curves.

    Returns

    The lengths of each curve.

    Returns number[]

getLength

getLengths

  • Get list of cumulative segment lengths.

    Returns

    Array of points

    Parameters

    • Optional divisions: number

    Returns number[]

getPoint

  • Find the point (vector) for point t of the curve where t is between 0 and 1.

    Returns

    The point.

    Parameters

    • t: number

      A position on the curve. Must be in the range [ 0, 1 ].

    • Optional optionalTarget: Vector2

      (optional) If specified, the result will be copied into this Vector, otherwise a new Vector will be created.

    Returns Vector2

getPointAt

  • Find a vector for point at relative position in curve according to arc length

    Returns

    The point.

    Parameters

    • u: number

      A position on the curve according to the arc length. Must be in the range [ 0, 1 ].

    • Optional optionalTarget: Vector2

      (optional) If specified, the result will be copied into this Vector, otherwise a new Vector will be created.

    Returns Vector2

getPoints

  • Compute a set of divisions + 1 points using getPoint( t ).

    Returns

    Array of point vectors.

    Parameters

    • Optional divisions: number

      number of pieces to divide the curve into. Default is 12.

    Returns Vector2[]

getPointsHoles

  • Get an array of Vector2s that represent the holes in the shape.

    Returns

    An array of Vector2 arrays, each row is a hole.

    Parameters

    • divisions: number

      The fineness of the result.

    Returns Vector2[][]

getSpacedPoints

  • Compute a set of divisions + 1 equi-spaced points using getPointAt( u ).

    Returns

    Array of point vectors.

    Parameters

    • Optional divisions: number

      number of pieces to divide the curve into. Default is 40.

    Returns Vector2[]

getTangent

  • Compute a unit vector tangent at t. If the subclassed curve do not implement its tangent derivation, 2 points a small delta apart will be used to find its gradient which seems to give a reasonable approximation getTangent(t: number, optionalTarget?: T): T;

    Returns

    A vector tangent to t.

    Parameters

    • t: number

      A position on the curve. Must be in the range [ 0, 1 ].

    • Optional optionalTarget: Vector2

      — (optional) If specified, the result will be copied into this Vector, otherwise a new Vector will be created.

    Returns Vector2

getTangentAt

  • Compute the tangent at a point which is equidistant to the ends of the curve from the point given in getTangent().

    Returns

    a vector tangent to u.

    Parameters

    • u: number

      A position on the curve according to the arc length. Must be in the range [ 0, 1 ].

    • Optional optionalTarget: Vector2

      (optional) If specified, the result will be copied into this Vector, otherwise a new Vector will be created.

    Returns Vector2

getUtoTmapping

  • Given u ( 0 .. 1 ), get a t to find p. This gives you points which are equi distance

    Parameters

    • u: number
    • distance: number

    Returns number

lineTo

  • Connects a LineCurve from the currentPoint to x, y onto the path.

    Returns

    This instance.

    Parameters

    • x: number

      end point, x coordinate

    • y: number

      end point, y coordinate

    Returns Shape

moveTo

  • Move the the currentPoint to x, y position.

    Returns

    This instance.

    Parameters

    • x: number

      new point, x coordinate

    • y: number

      new point, y coordinate

    Returns Shape

quadraticCurveTo

  • Creates a quadratic curve from the currentPoint with cpX and cpY as control point and updates the currentPoint to x and y.

    Returns

    This instance.

    Parameters

    • cpx: number

      Control point, x coordinate

    • cpy: number

      Control point, y coordinate

    • x: number

      End point, x coordinate

    • y: number

      End point, y coordinate

    Returns Shape

setFromPoints

  • Points are added to the curves array as LineCurves.

    Returns

    This instance.

    Parameters

    • vectors: Vector2[]

      array of Vector2.

    Returns Shape

splineThru

  • Connects a new SplineCurve onto the path.

    Returns

    This instance.

    Parameters

    • pts: Vector2[]

      An array of Vector2

    Returns Shape

toJSON

  • Create a JSON object representation of this instance.

    Returns

    A JSON object

    Returns object

updateArcLengths

Settings

Member Visibility

Theme