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. |
PublishDate
Two.PublishDate
The automatically generated publish date in the build process to verify version release candidates.
Resolution
Two.Resolution
Default amount of vertices to be used for interpreting Arcs and ArcSegments.
AutoCalculateImportedMatrices
Two.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.
uniqueId
Two.uniqueId
Returns: Number
Ever increasing Number.
Simple method to access an incrementing value. Used for id allocation on all Two.js objects.
Commands
Two.Commands
Map of possible path commands. Taken from the SVG specification. Commands include: move, line, curve, arc, and close.
Utils
Two.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.
renderer
Two.renderer
The instantiated rendering class for the instance. For a list of possible rendering types check out Two.Types.
timeDelta
Two.timeDelta
A number representing how much time has elapsed since the last frame in milliseconds.
playing
Two.playing
A boolean representing whether or not the instance is being updated through the automatic requestAnimationFrame.
fit
Two.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
Two.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.
pause
Two.pause
Triggers:
event:pause
Call to stop the internal animation loop for a specific instance of Two.js.
release
Two.release
Returns: Two.Element
The object passed for event deallocation.
| Argument | Description |
|---|---|
| obj | Object to release from event listening. If none provided then the root Two.Group will be used. |
Release a Two.Element’s events from memory and recurse through its children, effects, and/or vertices.
getShapesAtPoint
Two.getShapesAtPoint
Returns: Array.<Two.Shape>
Ordered list of shapes under the specified point, front to back.
| Argument | Description |
|---|---|
| x | X coordinate in world space. |
| y | Y coordinate in world space. |
| options | Hit test configuration. |
| options.visibleOnly | Limit results to visible shapes. |
| options.includeGroups | Include groups in the hit results. |
| options.mode | Whether to return all intersecting shapes or only the top-most. |
| options.deepest | Alias for mode: 'deepest'. |
| options.precision | Segmentation precision for curved geometry. |
| options.tolerance | Pixel tolerance applied to hit testing. |
| options.fill | Override fill testing behaviour. |
| options.stroke | Override stroke testing behaviour. |
| options.filter | Predicate to filter shapes from the result set. |
Returns shapes underneath the provided coordinates. Coordinates are expected in world space (matching the renderer output).
update
Two.update
Triggers:
event:update
Update positions and calculations in one pass before rendering. Then render to the canvas.
add
Two.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
Two.remove
| Argument | Description |
|---|---|
| objects | An array of Two.js objects. |
A shorthand method to remove specific Two.js objects from the scene.
clear
Two.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
Two.makeLine
Returns: Two.Line
| Argument | Description |
|---|---|
| x1 | |
| y1 | |
| x2 | |
| y2 |
Creates a Two.js line and adds it to the scene.
makeArrow
Two.makeArrow
Returns: Two.Path
| Argument | Description |
|---|---|
| x1 | |
| y1 | |
| x2 | |
| y2 |
Creates a Two.js arrow and adds it to the scene.
makeRectangle
Two.makeRectangle
Returns: Two.Rectangle
| Argument | Description |
|---|---|
| x | |
| y | |
| width | |
| height |
Creates a Two.js rectangle and adds it to the scene.
makeRoundedRectangle
Two.makeRoundedRectangle
Returns: Two.RoundedRectangle
| Argument | Description |
|---|---|
| x | |
| y | |
| width | |
| height | |
| radius |
Creates a Two.js rounded rectangle and adds it to the scene.
makeCircle
Two.makeCircle
Returns: Two.Circle
| Argument | Description |
|---|---|
| x | |
| y | |
| radius | |
| resolution |
Creates a Two.js circle and adds it to the scene.
makeEllipse
Two.makeEllipse
Returns: Two.Ellipse
| Argument | Description |
|---|---|
| x | |
| y | |
| rx | |
| ry | |
| resolution |
Creates a Two.js ellipse and adds it to the scene.
makeStar
Two.makeStar
Returns: Two.Star
| Argument | Description |
|---|---|
| x | |
| y | |
| innerRadius | |
| outerRadius | |
| sides |
Creates a Two.js star and adds it to the scene.
makeCurve
Two.makeCurve
Returns: Two.Path
- Where
path.curvedis set totrue.
| 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.
makePolygon
Two.makePolygon
Returns: Two.Polygon
| Argument | Description |
|---|---|
| x | |
| y | |
| radius | |
| sides |
Creates a Two.js polygon and adds it to the scene.
makeArcSegment
Two.makeArcSegment
Returns: Two.ArcSegment
| Argument | Description |
|---|---|
| x | |
| y | |
| innerRadius | |
| outerRadius | |
| startAngle | |
| endAngle | |
| resolution | The number of vertices that should comprise the arc segment. |
makePoints
Two.makePoints
Returns: Two.Points
| Argument | Description |
|---|---|
| points | An array of Two.Vector points |
Alternatively you can pass alternating x / y coordinate values as individual arguments. 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
Two.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.
makeText
Two.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
Two.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
Two.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 radial-gradient object and adds it to the scene. In the case of an effect it's added to an invisible "definitions" group.
makeSprite
Two.makeSprite
Returns: Two.Sprite
| Argument | Description |
|---|---|
| src | 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.
makeImage
Two.makeImage
Returns: Two.Image
| Argument | Description |
|---|---|
| src | The URL path to an image or an already created Two.Texture. |
| x | |
| y | |
| width | |
| height | |
| mode |
Creates a Two.js image object and adds it to the scene. Images are scaled to fit the provided width and height.
makeImageSequence
Two.makeImageSequence
Returns: Two.ImageSequence
| Argument | Description |
|---|---|
| src | 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
Two.makeTexture
Returns: Two.Texture
| Argument | Description |
|---|---|
| src | 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
Two.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
Two.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.