# 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.

Source

# 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.

two.js:268

# Version

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

two.js:274

# PublishDate

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

two.js:280

# Identifier

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

two.js:286

# Resolution

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

two.js:292

# 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.

two.js:298

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.

two.js:305

# uniqueId

Returns: Number

Ever increasing Number.

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

two.js:311

# Commands

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

two.js:351

# 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.

two.js:357

# type

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

two.js:126

# renderer

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

two.js:132

# 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.

two.js:138

# width

The width of the instance's dom element.

two.js:144

# height

The height of the instance's dom element.

two.js:150

# frameCount

An integer representing how many frames have elapsed.

two.js:156

# timeDelta

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

two.js:162

# playing

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

two.js:168

# 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.

two.js:207

# 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.

two.js:365

# play

Triggers:

event:play

Call to start an internal animation loop.

two.js:387

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.

two.js:402

# 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.

two.js:419

# update

Triggers:

event:update

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

two.js:472

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.

two.js:510

# 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.

two.js:525

# remove

Argument	Description
objects	An array of Two.js objects.

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

two.js:542

# 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.

two.js:560

# makeLine

Returns: Two.Line

Argument	Description
x1
y1
x2
y2

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

two.js:572

# makeArrow

Returns: Two.Path

Argument	Description
x1
y1
x2
y2

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

two.js:591

# makeRectangle

Returns: Two.Rectangle

Argument	Description
x
y
width
height

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

two.js:636

# makeRoundedRectangle

Returns: Two.RoundedRectangle

Argument	Description
x
y
width
height
sides

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

two.js:655

# makeCircle

Returns: Two.Circle

Argument	Description
x
y
radius
resolution

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

two.js:675

# makeEllipse

Returns: Two.Ellipse

Argument	Description
x
y
rx
ry
resolution

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

two.js:694

# makeStar

Returns: Two.Star

Argument	Description
x
y
outerRadius
innerRadius
sides

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

two.js:714

# 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.

two.js:734

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.

two.js:771

# makeArcSegment

Returns: Two.ArcSegment

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

two.js:790

# 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.

two.js:809

# 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.

two.js:842

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.

two.js:883

# 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.

two.js:899

# 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.

two.js:921

# 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.

two.js:942

# 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.

two.js:967

# 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.

two.js:990

# 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.

two.js:1005

# 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.

two.js:1026

# 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.

two.js:1059

Two.Registry →