# Two

Extends: Two.Events

The entrypoint for Two.js. Instantiate a new Two in order to setup a scene to render to. Two is also the publicly accessible namespace that all other sub-classes, functions, and utilities attach to.

# Constructor

Argument Description
options
options.fullscreen Set to true to automatically make the stage adapt to the width and height of the parent document. This parameter overrides width and height parameters if set to true. This overrides options.fitted as well.
options.fitted Set to true to automatically make the stage adapt to the width and height of the parent element. This parameter overrides width and height parameters if set to true.
options.width The width of the stage on construction. This can be set at a later time.
options.height The height of the stage on construction. This can be set at a later time.
options.type The type of renderer to setup drawing with. See Two.Types for available options.
options.autostart Set to true to add the instance to draw on requestAnimationFrame. This is a convenient substitute for Two.play.
options.domElement The canvas or SVG element to draw into. This overrides the options.type argument.

# Types

The different rendering types available in the library.

# Version

The current working version of the library, v0.8.14.

# PublishDate

The automatically generated publish date in the build process to verify version release candidates.

# Identifier

String prefix for all Two.js object's ids. This trickles down to SVG ids.

# Resolution

Default amount of vertices to be used for interpreting Arcs and ArcSegments.

# AutoCalculateImportedMatrices

When importing SVGs through the Two.interpret and Two.load, this boolean determines whether Two.js infers and then overrides the exact transformation matrix of the reference SVG.

nota-bene

false copies the exact transformation matrix values, but also sets the path's matrix.manual = true.

# Instances

Registered list of all Two.js instances in the current session.

# uniqueId

Returns: Number

Ever increasing Number.

Simple method to access an incrementing value. Used for id allocation on all Two.js objects.

# Commands

Map of possible path commands. Taken from the SVG specification. Commands include: move, line, curve, arc, and close.

# Utils

A massive object filled with utility functions and properties.

Two.Utils.read: A collection of SVG parsing functions indexed by element name.

Two.Utils.read.path: Parse SVG path element or d attribute string.

# type

A string representing which type of renderer the instance has instantiated.

# renderer

The instantiated rendering class for the instance. For a list of possible rendering types check out Two.Types.

# scene

The base level Two.Group which houses all objects for the instance. Because it is a Two.Group transformations can be applied to it that will affect all objects in the instance. This is handy as a makeshift inverted camera.

# width

The width of the instance's dom element.

# height

The height of the instance's dom element.

# frameCount

An integer representing how many frames have elapsed.

# timeDelta

A number representing how much time has elapsed since the last frame in milliseconds.

# playing

A boolean representing whether or not the instance is being updated through the automatic requestAnimationFrame.

# fit

If options.fullscreen or options.fitted in construction create this function. It sets the width and height of the instance to its respective parent window or element depending on the options passed.

# appendTo

Argument Description
elem The DOM element to append the Two.js stage to.

Shorthand method to append your instance of Two.js to the document.

# play

Triggers:

  • event:play

Call to start an internal animation loop.

nota-bene

This function initiates a requestAnimationFrame loop.

# pause

Triggers:

  • event:pause

Call to stop the internal animation loop for a specific instance of Two.js.

# release

Returns: Object

The object passed for event deallocation.

Argument Description
obj

Release an arbitrary class' events from the Two.js corpus and recurse through its children and or vertices.

# update

Triggers:

  • event:update

Update positions and calculations in one pass before rendering. Then render to the canvas.

nota-bene

This function is called automatically if using Two.play or the autostart parameter in construction.

# render

Triggers:

  • event:render

Render all drawable and visible objects of the scene.

# add

Argument Description
objects An array of Two.js objects. Alternatively can add objects as individual arguments.

A shorthand method to add specific Two.js objects to the scene.

# remove

Argument Description
objects An array of Two.js objects.

A shorthand method to remove specific Two.js objects from the scene.

# clear

Removes all objects from the instance's scene. If you intend to have the browser garbage collect this, don't forget to delete the references in your application as well.

# makeLine

Returns: Two.Line

Argument Description
x1
y1
x2
y2

Creates a Two.js line and adds it to the scene.

# makeArrow

Returns: Two.Path

Argument Description
x1
y1
x2
y2

Creates a Two.js arrow and adds it to the scene.

# makeRectangle

Returns: Two.Rectangle

Argument Description
x
y
width
height

Creates a Two.js rectangle and adds it to the scene.

# makeRoundedRectangle

Returns: Two.RoundedRectangle

Argument Description
x
y
width
height
sides

Creates a Two.js rounded rectangle and adds it to the scene.

# makeCircle

Returns: Two.Circle

Argument Description
x
y
radius
resolution

Creates a Two.js circle and adds it to the scene.

# makeEllipse

Returns: Two.Ellipse

Argument Description
x
y
rx
ry
resolution

Creates a Two.js ellipse and adds it to the scene.

# makeStar

Returns: Two.Star

Argument Description
x
y
outerRadius
innerRadius
sides

Creates a Two.js star and adds it to the scene.

# makeCurve

Returns: Two.Path

  • Where path.curved is set to true.
Argument Description
points An array of Two.Anchor points.
Alternatively you can pass alternating x / y coordinate values as individual arguments. These will be combined into Two.Anchors for use in the path.

Creates a Two.js path that is curved and adds it to the scene.

nota-bene

In either case of passing an array or passing numbered arguments the last argument is an optional Boolean that defines whether the path should be open or closed.

# makePolygon

Returns: Two.Polygon

Argument Description
x
y
radius
sides

Creates a Two.js polygon and adds it to the scene.

# makeArcSegment

Returns: Two.ArcSegment

Argument Description
x
y
innerRadius
outerRadius
startAngle
endAngle
resolution The number of vertices that should comprise the arc segment.

# makePoints

Returns: Two.Points

Argument Description
points An array of Two.Vector points
Alternatively you can pass alternating x / y coordinate values as individual agrguments. These will be combined into Two.Vectors for use in the points object.

Creates a Two.js points object and adds it to the current scene.

# makePath

Returns: Two.Path

Argument Description
points An array of Two.Anchor points
Alternatively you can pass alternating x / y coordinate values as individual arguments. These will be combined into Two.Anchors for use in the path.

Creates a Two.js path and adds it to the scene.

nota-bene

In either case of passing an array or passing numbered arguments the last argument is an optional Boolean that defines whether the path should be open or closed.

# makeText

Returns: Two.Text

Argument Description
message
x
y
styles An object to describe any of the Two.Text.Properties including fill, stroke, linewidth, family, alignment, leading, opacity, etc..

Creates a Two.js text object and adds it to the scene.

# makeLinearGradient

Returns: Two.LinearGradient

Argument Description
x1
y1
x2
y2
args Any number of color stops sometimes referred to as ramp stops. If none are supplied then the default black-to-white two stop gradient is applied.

Creates a Two.js linear gradient and adds it to the scene. In the case of an effect it's added to an invisible "definitions" group.

# makeRadialGradient

Returns: Two.RadialGradient

Argument Description
x1
y1
radius
args Any number of color stops sometimes referred to as ramp stops. If none are supplied then the default black-to-white two stop gradient is applied.

Creates a Two.js linear-gradient object and adds it to the scene. In the case of an effect it's added to an invisible "definitions" group.

# makeSprite

Returns: Two.Sprite

Argument Description
pathOrTexture The URL path to an image or an already created Two.Texture.
x
y
columns
rows
frameRate
autostart

Creates a Two.js sprite object and adds it to the scene. Sprites can be used for still images as well as animations.

# makeImageSequence

Returns: Two.ImageSequence

Argument Description
pathsOrTextures An array of paths or of Two.Textures.
x
y
frameRate
autostart

Creates a Two.js image sequence object and adds it to the scene.

# makeTexture

Returns: Two.Texture

Argument Description
pathOrSource The URL path to an image or a DOM image-like element.
callback Function to be invoked when the image is loaded.

Creates a Two.js texture object.

# makeGroup

Returns: Two.Group

Argument Description
objects Two.js objects to be added to the group in the form of an array or as individual arguments.

Creates a Two.js group object and adds it to the scene.

# interpret

Returns: Two.Group

Argument Description
svg The SVG node to be parsed.
shallow Don't create a top-most group but append all content directly.
add – Automatically add the reconstructed SVG node to scene.

Interpret an SVG Node and add it to this instance's scene. The distinction should be made that this doesn't import svg's, it solely interprets them into something compatible for Two.js - this is slightly different than a direct transcription.

# load

Returns: Two.Group

Argument Description
pathOrSVGContent The URL path of an SVG file or an SVG document as text.
callback Function to call once loading has completed.

Load an SVG file or SVG text and interpret it into Two.js legible objects.