### Install Development Dependencies Source: https://github.com/jonobr1/two.js/blob/dev/README.md Install the necessary Node.js dependencies for building Two.js from source. Navigate to the repository folder first. ```bash cd ~/path-to-repo/two.js npm install ``` -------------------------------- ### left Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/linear-gradient/README.md Gets or sets the starting point of the linear gradient. ```APIDOC ## left ### Description The x and y value for where the first end point is placed on the canvas. ### Properties * **left** (Object) - An object with `x` and `y` properties representing the start point. ``` -------------------------------- ### Install Two.js with npm Source: https://github.com/jonobr1/two.js/blob/dev/wiki/README.md Install the latest version of Two.js using npm for Node.js environments. ```bash npm install --save two.js@latest ``` -------------------------------- ### Install Two.js via npm Source: https://github.com/jonobr1/two.js/blob/dev/README.md Install the Two.js library using npm for Node.js projects. ```javascript npm install --save two.js ``` -------------------------------- ### Two.Points.beginning Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/shapes/points/README.md Sets the starting percentage for rendering the path. ```APIDOC ## beginning ### Description [Two.Points.beginning](/docs/shapes/points/#beginning) is a percentage value that represents at what percentage into the path should the renderer start drawing. ### Properties - **beginning** (Number) - Number between zero and one to state the beginning of where the path is rendered. ``` -------------------------------- ### play Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md Call to start an internal animation loop. ```APIDOC ## play ### Description Call to start an internal animation loop. ### Method - **play**() ### Fires - `event:play` ### Notes This function initiates a `requestAnimationFrame` loop. ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/linear-gradient/README.md Initializes a new Two.LinearGradient instance with specified start and end points, and color stops. ```APIDOC ## Constructor ### Parameters * **x1** (number) - The x position of the first end point of the linear gradient. * **y1** (number) - The y position of the first end point of the linear gradient. * **x2** (number) - The x position of the second end point of the linear gradient. * **y2** (number) - The y position of the second end point of the linear gradient. * **stops** (Array) - A list of [Two.Stop](/docs/effects/stop/)s that contain the gradient fill pattern for the gradient. ``` -------------------------------- ### Animate Shapes with Two.js Bind and Play Source: https://github.com/jonobr1/two.js/blob/dev/wiki/README.md Utilize `two.bind()` to synchronize functions with the animation loop and `two.play()` to start the rendering at 60 frames per second. This example demonstrates scaling and rotating a group over time. ```javascript var params = { fullscreen: true }; var elem = document.body; var two = new Two(params).appendTo(elem); var circle = two.makeCircle(-70, 0, 50); var rect = two.makeRectangle(70, 0, 100, 100); circle.fill = '#FF8000'; rect.fill = 'rgba(0, 200, 255, 0.75)'; var cx = two.width * 0.5; var cy = two.height * 0.5; var group = two.makeGroup(circle, rect); group.position.set(cx, cy); group.scale = 0; group.noStroke(); // Bind a function to scale and rotate the group to the animation loop. two.bind('update', update); // Finally, start the animation loop two.play(); function update(frameCount) { // This code is called every time two.update() is called. if (group.scale > 0.9999) { group.scale = group.rotation = 0; } var t = (1 - group.scale) * 0.04; group.scale += t; group.rotation += t * 4 * Math.PI; } ``` -------------------------------- ### Two.Path.beginning Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/path/README.md A value between zero and one indicating the start point for rendering the path. ```APIDOC ## beginning ### Description Number between zero and one to state the beginning of where the path is rendered. [Two.Path.beginning](/docs/path/#beginning) is a percentage value that represents at what percentage into the path should the renderer start drawing. ### Note This is great for animating in and out stroked paths in conjunction with [Two.Path.ending](/docs/path/#ending). ``` -------------------------------- ### React Component with Two.js and ES6 Imports Source: https://github.com/jonobr1/two.js/blob/dev/README.md Example of using Two.js within a React component with ES6 imports. This setup is suitable for modern frameworks and bundlers. ```jsx import React, { useEffect, useRef } from "react"; import Two from "two.js"; export default function App() { var domElement = useRef(); useEffect(setup, []); function setup() { var two = new Two({ fullscreen: true, autostart: true }).appendTo(domElement.current); var rect = two.makeRectangle(two.width / 2, two.height / 2, 50, 50); two.bind("update", update); return unmount; function unmount() { two.unbind("update"); two.pause(); domElement.current.removeChild(two.renderer.domElement); } function update() { rect.rotation += 0.001; } } return
; } ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/shapes/arc-segment/README.md Initializes a new ArcSegment. It takes x and y coordinates for position, inner and outer radii, start and end angles, and the number of vertices for resolution. ```APIDOC ## Constructor ### Description Initializes a new ArcSegment with the specified parameters. ### Parameters - **x** (number) - The x position of the arc segment. - **y** (number) - The y position of the arc segment. - **innerRadius** (number) - The inner radius value of the arc segment. - **outerRadius** (number) - The outer radius value of the arc segment. - **startAngle** (number) - The start angle of the arc segment. - **endAngle** (number) - The end angle of the arc segment. - **resolution** (number) - The number of vertices used to construct the arc segment. ``` -------------------------------- ### Two.Line Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/shapes/line/README.md Initializes a new Two.Line object. The constructor takes four arguments to define the start and end points of the line. ```APIDOC ## Constructor Two.Line ### Description Initializes a new Two.Line object with the specified start and end points. ### Parameters #### Path Parameters - **x1** (number) - The x-coordinate of the first vertex. - **y1** (number) - The y-coordinate of the first vertex. - **x2** (number) - The x-coordinate of the second vertex. - **y2** (number) - The y-coordinate of the second vertex. ``` -------------------------------- ### Two.Ellipse Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/shapes/ellipse/README.md Initializes a new instance of an ellipse. You can optionally pass in the starting position and radius values. ```APIDOC ## Constructor ### Parameters * **x** (number) - The x position of the ellipse. * **y** (number) - The y position of the ellipse. * **rx** (number) - The radius value of the ellipse in the x direction. * **ry** (number) - The radius value of the ellipse in the y direction. * **resolution** (number) - The number of vertices used to construct the ellipse. ``` -------------------------------- ### Render Rectangle in Headless Environment Source: https://github.com/jonobr1/two.js/blob/dev/README.md Use this snippet to render a rectangle in a headless environment using Node Canvas. Ensure Node Canvas and two.js are installed. The output is saved as a PNG image. ```javascript var { createCanvas, Image } = require('canvas'); var Two = require('two.js') var fs = require('fs'); var path = require('path'); var width = 800; var height = 600; var canvas = createCanvas(width, height); Two.Utils.polyfill(canvas, Image); var time = Date.now(); var two = new Two({ width: width, height: height, domElement: canvas }); var rect = two.makeRectangle(width / 2, height / 2, 50, 50); rect.fill = 'rgb(255, 100, 100)'; rect.noStroke(); two.render(); var settings = { compressionLevel: 3, filters: canvas.PNG_FILTER_NONE }; fs.writeFileSync(path.resolve(__dirname, './images/rectangle.png'), canvas.toBuffer('image/png', settings)); console.log('Finished rendering. Time took: ', Date.now() - time); process.exit(); ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/image/README.md Initializes a new Two.Image instance. ```APIDOC ## Constructor ### Parameters - **src** (string | Two.Texture) - The URL path or Two.Texture to be used as the bitmap data displayed on the image. - **ox** (number) - The initial `x` position of the Two.Image. - **oy** (number) - The initial `y` position of the Two.Image. - **width** (number) - The width to display the image at. - **height** (number) - The height to display the image at. - **mode** (string) - The fill mode ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/renderers/webgl/README.md Initializes a new instance of Two.WebGLRenderer. It accepts an optional parameters object for configuration. ```APIDOC ## Constructor ### Description Initializes a new instance of Two.WebGLRenderer. It accepts an optional parameters object for configuration. ### Parameters - **parameters** (object) - This object is inherited when constructing a new instance of [Two](). - **parameters.domElement** (HTMLElement) - The `` to draw to. If none given a new one will be constructed. - **parameters.offscreenElement** (HTMLCanvasElement) - The offscreen two dimensional `` to render each element on WebGL texture updates. - **parameters.antialias** (boolean) - Determines whether the canvas should clear render with antialias on. ``` -------------------------------- ### Two.Circle.radius Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/shapes/circle/README.md Gets or sets the radius of the circle. ```APIDOC ## radius ### Description The size of the radius of the circle. ### Properties - **radius** (number) - The radius of the circle. ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/image-sequence/README.md Initializes a new Two.ImageSequence instance. It can be configured with a list of image sources, initial position, and frame rate. ```APIDOC ## Constructor ### Description Initializes a new Two.ImageSequence instance. ### Parameters #### Arguments - **src** (Array) - A list of URLs or [Two.Texture](/docs/effects/texture/)s. - **ox** (number) - The initial `x` position of the Two.ImageSequence. - **oy** (number) - The initial `y` position of the Two.ImageSequence. - **frameRate** (number) - The frame rate at which the images should playback at. ``` -------------------------------- ### color Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/stop/README.md Gets or sets the color of the stop. ```APIDOC ## color ### Description The color of the stop. ### Type string | Two.Color ``` -------------------------------- ### texture Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/image/README.md Gets or sets the texture used for the image. ```APIDOC ## texture ### Description The texture to be used as bitmap data to display image in the scene. ### Properties - **texture** (Two.Texture | string) - The texture object or URL path. ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/gradient/README.md Initializes a new Two.Gradient instance with a list of stops. ```APIDOC ## Constructor ### Parameters #### Path Parameters - **stops** (Two.Stop[]) - A list of [Two.Stop](/docs/effects/stop/)s that contain the gradient fill pattern for the gradient. ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/matrix/README.md Initializes a new Two.Matrix instance with values for each element of the 3x3 matrix. ```APIDOC ## Constructor ### Description Initializes a new Two.Matrix instance with values for each element of the 3x3 matrix. ### Parameters #### Path Parameters - **a** (number) - The value for element at the first column and first row. - **b** (number) - The value for element at the second column and first row. - **c** (number) - The value for element at the third column and first row. - **d** (number) - The value for element at the first column and second row. - **e** (number) - The value for element at the second column and second row. - **f** (number) - The value for element at the third column and second row. - **g** (number) - The value for element at the first column and third row. - **h** (number) - The value for element at the second column and third row. - **i** (number) - The value for element at the third column and third row. ``` -------------------------------- ### Generate Two.js Documentation Source: https://github.com/jonobr1/two.js/blob/dev/README.md Commands to generate and build the documentation for Two.js using Vuepress. Note that these commands may rely on older Node.js versions. ```bash npm run docs:generate // Generate README.md files for documentation from source code comments npm run docs:dev // Creates a local server to generate all documentation npm run docs:build // Builds out static site and associated files to wiki/.vuepress/dist ``` -------------------------------- ### right Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/linear-gradient/README.md Gets or sets the ending point of the linear gradient. ```APIDOC ## right ### Description The x and y value for where the second end point is placed on the canvas. ### Properties * **right** (Object) - An object with `x` and `y` properties representing the end point. ``` -------------------------------- ### center Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/radial-gradient/README.md Gets or sets the x and y coordinates for the origin of the radial gradient. ```APIDOC ## center ### Description The x and y value for where the origin of the radial gradient is. This property can be accessed and modified directly. ### Properties * **center** (Object) - An object with `x` and `y` properties representing the origin coordinates. ``` -------------------------------- ### Two Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md The entrypoint for Two.js. Instantiate a `new Two` to set up a scene to render to. `Two` is also the publicly accessible namespace that all other sub-classes, functions, and utilities attach to. ```APIDOC ## Constructor ### Parameters #### options - **options.fullscreen** (boolean) - Optional - 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** (boolean) - Optional - 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** (number) - Optional - The width of the stage on construction. This can be set at a later time. - **options.height** (number) - Optional - The height of the stage on construction. This can be set at a later time. - **options.type** (string) - Optional - The type of renderer to setup drawing with. See [Two.Types](/docs/two/#types) for available options. - **options.autostart** (boolean) - Optional - Set to `true` to add the instance to draw on `requestAnimationFrame`. This is a convenient substitute for [Two.play](/docs/two/#play). - **options.domElement** (HTMLElement) - Optional - The canvas or SVG element to draw into. This overrides the `options.type` argument. ``` -------------------------------- ### offset Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/stop/README.md Gets or sets the offset percentage of the stop, represented as a value between 0 and 1. ```APIDOC ## offset ### Description The offset percentage of the stop represented as a zero-to-one value. ### Type number ``` -------------------------------- ### spread Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/gradient/README.md Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle. ```APIDOC ## spread ### Description Indicates what happens if the gradient starts or ends inside the bounds of the target rectangle. Possible values are `'pad'`, `'reflect'`, and `'repeat'`. ### See See: [https://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementSpreadMethodAttribute](https://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementSpreadMethodAttribute) for more information ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/stop/README.md Initializes a new Two.Stop instance. The offset and color arguments have default values that alternate between 0 and 1 for offset, and white and black for color, as new stops are created. Opacity defaults to 1 and cannot be less than 0. ```APIDOC ## Constructor ### Description Initializes a new Two.Stop instance. ### Parameters #### Path Parameters - **offset** (number) - Optional - The offset percentage of the stop represented as a zero-to-one value. Default value flip flops from zero-to-one as new stops are created. - **color** (string) - Optional - The color of the stop. Default value flip flops from white to black as new stops are created. - **opacity** (number) - Optional - The opacity value. Default value is 1, cannot be lower than 0. ``` -------------------------------- ### Build Two.js from Source Source: https://github.com/jonobr1/two.js/blob/dev/README.md Build the Two.js library after modifying build configurations in `/utils/build.js`. This command generates the `/build/two.js` and `/build/two.min.js` files. ```bash node ./utils/build ``` -------------------------------- ### focal Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/radial-gradient/README.md Gets or sets the x and y coordinates for the focal point of the radial gradient, affecting its spread. ```APIDOC ## focal ### Description The x and y value for where the focal point of the radial gradient is. This effects the spray or spread of the radial gradient. ### Properties * **focal** (Object) - An object with `x` and `y` properties representing the focal point coordinates. ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/vector/README.md Initializes a new Two.Vector instance with optional x and y components. ```APIDOC ## Constructor ### Description Initializes a new Two.Vector instance. ### Parameters #### Path Parameters - **x** (number) - Optional - The horizontal component of the vector. - **y** (number) - Optional - The vertical component of the vector. ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/texture/README.md Initializes a new Two.Texture instance. It can take a URL path to an image file or an existing HTMLImageElement. An optional callback function can be provided to execute once the image has been loaded. ```APIDOC ## Constructor ### Description Initializes a new Two.Texture instance. ### Parameters #### Path Parameters - **src** (URL or HTMLImageElement) - The URL path to an image file or an `` element. - **callback** (Function) - An optional callback function once the image has been loaded. ``` -------------------------------- ### Two.Group.stroke Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/group/README.md Gets or sets the stroke style for all child shapes within the group. This property accepts CSS color values. ```APIDOC ## stroke ### Description The value of what all child shapes should be outlined in with. ### See [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) for more information on CSS's colors as `String`. ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/shapes/rectangle/README.md Initializes a new instance of Two.Rectangle. You can specify the position and dimensions of the rectangle. ```APIDOC ## Constructor ### Description Initializes a new instance of Two.Rectangle. ### Parameters #### Path Parameters - **x** (number) - The x position of the rectangle. - **y** (number) - The y position of the rectangle. - **width** (number) - The width value of the rectangle. - **height** (number) - The width value of the rectangle. ``` -------------------------------- ### Two.Group.fill Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/group/README.md Gets or sets the fill style for all child shapes within the group. This property accepts CSS color values. ```APIDOC ## fill ### Description The value of what all child shapes should be filled in with. ### See [https://developer.mozilla.org/en-US/docs/Web/CSS/color_value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) for more information on CSS's colors as `String`. ``` -------------------------------- ### Two.ZUI Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/extras/zui/README.md Initializes a new Two.ZUI instance. It requires a scene or group and an HTML element to attach event listeners. ```APIDOC ## Constructor ### Parameters #### Path Parameters - **group** (Scene or Group) - The scene or group to attach the ZUI to. - **domElement** (HTMLElement) - The HTML Element to attach event listeners to. ``` -------------------------------- ### opacity Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/stop/README.md Gets or sets the alpha transparency of the stop, represented as a value between 0 and 1. This property is primarily supported by the SVGRenderer. ```APIDOC ## opacity ### Description The alpha percentage of the stop represented as a zero-to-one value. ### Type number ### Note This is only supported on the [Two.SVGRenderer](/docs/renderers/svg/). You can get the same effect by encoding opacity into `rgba` strings in the color. ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/sprite/README.md Initializes a new instance of Two.Sprite. It can take a URL path or a Two.Texture, initial x and y positions, and the number of columns and rows in the sprite sheet, along with a frame rate for animation. ```APIDOC ## Constructor ### Description Initializes a new instance of Two.Sprite. ### Parameters #### Arguments - **src** (string | Two.Texture) - The URL path or [Two.Texture](/docs/effects/texture/) to be used as the bitmap data displayed on the sprite. - **ox** (number) - The initial `x` position of the Two.Sprite. - **oy** (number) - The initial `y` position of the Two.Sprite. - **cols** (number) - The number of columns the sprite contains. - **rows** (number) - The number of rows the sprite contains. - **frameRate** (number) - The frame rate at which the partitions of the image should playback at. ``` -------------------------------- ### play Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/image-sequence/README.md Initiates animation playback of a Two.ImageSequence. ```APIDOC ## play ### Description Initiate animation playback of a [Two.ImageSequence](/docs/effects/image-sequence/). ### Parameters #### Path Parameters - **firstFrame** (Number) - The index of the frame to start the animation with. - **lastFrame** (Number) - The index of the frame to end the animation with. Defaults to the last item in the [Two.ImageSequence.textures](/docs/effects/image-sequence/#textures). - **onLastFrame** (Function) - Optional callback function to be triggered after playing the last frame. This fires multiple times when the image sequence is looped. ``` -------------------------------- ### makeLinearGradient Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md Creates a Two.js linear gradient and adds it to the scene. It takes coordinates for the gradient's start and end points, and optional color stops. ```APIDOC ## makeLinearGradient ### Description 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. ### Parameters - **x1** (number) - The x-coordinate of the gradient's start point. - **y1** (number) - The y-coordinate of the gradient's start point. - **x2** (number) - The x-coordinate of the gradient's end point. - **y2** (number) - The y-coordinate of the gradient's end point. - **args** (Array) - 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. ### Returns Two.LinearGradient ``` -------------------------------- ### Two.Version Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md The current working version of the library. ```APIDOC ## Version ### Description The current working version of the library, `v0.8.23`. ``` -------------------------------- ### makeArcSegment Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md Creates a Two.js arc segment and adds it to the scene. Parameters include x, y coordinates, inner and outer radii, start and end angles, and resolution. ```APIDOC ## makeArcSegment ### Description Creates a Two.js arc segment and adds it to the scene. ### Parameters #### Path Parameters - **x** (number) - Description not provided - **y** (number) - Description not provided - **innerRadius** (number) - Description not provided - **outerRadius** (number) - Description not provided - **startAngle** (number) - Description not provided - **endAngle** (number) - Description not provided - **resolution** (number) - The number of vertices that should comprise the arc segment. ### Returns Two.ArcSegment ``` -------------------------------- ### Two.Path.Properties Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/path/README.md A list of properties available on every Two.Path instance. ```APIDOC ## Properties ### Description A list of properties that are on every [Two.Path](/docs/path/). (No specific properties are detailed in the source for this section, but it indicates a general set of properties exists.) ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/shapes/rounded-rectangle/README.md Initializes a new Two.RoundedRectangle instance with specified dimensions and properties. ```APIDOC ## Constructor ### Description Initializes a new Two.RoundedRectangle instance. ### Parameters - **x** (number) - The x position of the rounded rectangle. - **y** (number) - The y position of the rounded rectangle. - **width** (number) - The width value of the rounded rectangle. - **height** (number) - The width value of the rounded rectangle. - **radius** (number) - The radius value of the rounded rectangle. - **resolution** (number) - The number of vertices used to construct the rounded rectangle. ``` -------------------------------- ### Two.Path Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/path/README.md Initializes a new Two.Path instance with specified vertices, and options for closed, curved, and manual plotting. ```APIDOC ## Constructor ### Description Initializes a new Two.Path instance. ### Parameters * **vertices** (Array) - A list of anchors representing the order and coordinates of the shape. * **closed** (Boolean) - Describes whether the shape is closed or open. * **curved** (Boolean) - Describes whether the shape automatically calculates bezier handles for each vertex. * **manual** (Boolean) - Describes whether the developer controls vertex plotting or if Two.js plots them automatically. ``` -------------------------------- ### Two.Star Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/shapes/star/README.md Initializes a new star shape. You can set its position, inner and outer radii, and the number of sides. ```APIDOC ## Constructor ### Parameters - **x** (number) - The x position of the star. - **y** (number) - The y position of the star. - **innerRadius** (number) - The inner radius value of the star. - **outerRadius** (number) - The outer radius value of the star. - **sides** (number) - The number of sides used to construct the star. ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/radial-gradient/README.md Initializes a new Two.RadialGradient instance. It takes parameters for the origin (x, y), radius, color stops, and focal point (focalX, focalY). ```APIDOC ## Constructor ### Parameters * **x** (number) - The x position of the origin of the radial gradient. * **y** (number) - The y position of the origin of the radial gradient. * **radius** (number) - The radius of the radial gradient. * **stops** (Array) - A list of [Two.Stop](/docs/effects/stop/)s that contain the gradient fill pattern for the gradient. * **focalX** (number) - The x position of the focal point on the radial gradient. * **focalY** (number) - The y position of the focal point on the radial gradient. ``` -------------------------------- ### fit Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md 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. ```APIDOC ## fit ### Description 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. ### Method - **fit**() ``` -------------------------------- ### programs Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/renderers/webgl/README.md WebGL programs used for rendering all elements in the scenegraph. ```APIDOC ## programs ### Description Associated WebGL programs to render all elements from the scenegraph. ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/renderers/svg/README.md Initializes a new instance of Two.SVGRenderer. It inherits parameters from the base Two() constructor and can optionally take a DOM element to draw to. ```APIDOC ## Constructor ### Description Initializes a new instance of Two.SVGRenderer. It inherits parameters from the base Two() constructor and can optionally take a DOM element to draw to. ### Parameters - **parameters** (object) - This object is inherited when constructing a new instance of [Two](). - **parameters.domElement** (HTMLElement) - The `` to draw to. If none given a new one will be constructed. ``` -------------------------------- ### Two.Anchor Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/anchor/README.md Initializes a new Two.Anchor object. It takes x and y coordinates for the anchor point, and ax, ay, bx, by for the left and right handles respectively. An optional command can be provided to specify rendering behavior. ```APIDOC ## Constructor ### Parameters - **x** (number) - The x position of the root anchor point. - **y** (number) - The y position of the root anchor point. - **ax** (number) - The x position of the left handle point. - **ay** (number) - The y position of the left handle point. - **bx** (number) - The x position of the right handle point. - **by** (number) - The y position of the right handle point. - **command** (Two.Commands) - The command to describe how to render. Applicable commands are [Two.Commands](/docs/two/#commands) ``` -------------------------------- ### Draw Basic Shapes with Two.js Source: https://github.com/jonobr1/two.js/blob/dev/wiki/README.md Create an instance of Two.js, draw a circle and a rectangle, style them, and update the scene to render them on the page. Ensure Two.js is included in your HTML. ```javascript // Make an instance of two and place it on the page. var params = { fullscreen: true }; var elem = document.body; var two = new Two(params).appendTo(elem); // Two.js has convenient methods to make shapes and insert them into the scene. var radius = 50; var x = two.width * 0.5; var y = two.height * 0.5 - radius * 1.25; var circle = two.makeCircle(x, y, radius); y = two.height * 0.5 + radius * 1.25; var width = 100; var height = 100; var rect = two.makeRectangle(x, y, width, height); // The object returned has many stylable properties: circle.fill = '#FF8000'; // And accepts all valid CSS color: circle.stroke = 'orangered'; circle.linewidth = 5; rect.fill = 'rgb(0, 200, 255)'; rect.opacity = 0.75; rect.noStroke(); // Don’t forget to tell two to draw everything to the screen two.update(); ``` -------------------------------- ### Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/renderers/canvas/README.md Initializes a new instance of Two.CanvasRenderer. It accepts an optional parameters object to configure the canvas element, overdraw behavior, and smoothing. ```APIDOC ## Constructor ### Parameters * **parameters** (object) - Inherited from [Two]() constructor. * **parameters.domElement** (HTMLCanvasElement) - The canvas element to draw on. If not provided, a new canvas will be created. * **parameters.overdraw** (boolean) - Determines if the canvas background should be cleared. Defaults to `true`. * **parameters.smoothing** (boolean) - Determines if drawing should be anti-aliased. Set to `false` for pixel art or potential performance gains. ``` -------------------------------- ### Two.Polygon Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/shapes/polygon/README.md Initializes a new instance of a polygon. You can optionally pass in the x and y position, the radius, and the number of sides. ```APIDOC ## Constructor ### Parameters - **x** (number) - The x position of the polygon. - **y** (number) - The y position of the polygon. - **radius** (number) - The radius value of the polygon. - **sides** (number) - The number of vertices used to construct the polygon. ``` -------------------------------- ### clientToSurface (x, y, z Overload) Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/extras/zui/README.md Converts client coordinates (x, y, and optional z) to the projected surface space. ```APIDOC ## clientToSurface (x, y, z Overload) ### Description Convert an x, y coordinate in the user’s space to the object's projected space. Optionally pass a z property on the object to apply depth. ### Method (Implicitly a method of Two.ZUI) ### Parameters #### Path Parameters - **a** (Number) - The x component of position to be transformed. - **b** (Number) - The y component of position to be transformed. - **c** (Number) - The optional z component of position to be transformed. ``` -------------------------------- ### Utils Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/renderers/svg/README.md A collection of utility functions and properties for rendering Two.js objects to SVG. ```APIDOC ## Utils ### Description A massive object filled with utility functions and properties to render Two.js objects to a ``. ### Properties - **Utils** (object) - Contains utility functions and properties for SVG rendering. ``` -------------------------------- ### makeTexture Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md Creates a Two.js texture object. ```APIDOC ## makeTexture ### Description Creates a Two.js texture object. ### Parameters * **src** (URL path or DOM image-like element) - The URL path to an image or a DOM image-like element. * **callback** (Function) - Function to be invoked when the image is loaded. ### Returns Two.Texture ``` -------------------------------- ### Two.Sprite.play Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/sprite/README.md Initiate animation playback of a Two.Sprite. ```APIDOC ## Two.Sprite.play ### Description Initiate animation playback of a [Two.Sprite](/docs/effects/sprite/). ### Parameters #### Path Parameters - **firstFrame** (Number) - Required - The index of the frame to start the animation with. - **lastFrame** (Number) - Optional - The index of the frame to end the animation with. Defaults to the last item in the [Two.Sprite.textures](/docs/effects/sprite/#textures). - **onLastFrame** (Function) - Optional - Callback function to be triggered after playing the last frame. This fires multiple times when the sprite is looped. ``` -------------------------------- ### makeImage Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md Creates a Two.js image object and adds it to the scene. Images are scaled to fit the provided width and height. ```APIDOC ## makeImage ### Description Creates a Two.js image object and adds it to the scene. Images are scaled to fit the provided width and height. ### Parameters * **src** (URL path or Two.Texture) - The URL path to an image or an already created [Two.Texture](/docs/effects/texture/). * **x** (number) - The x-coordinate for the image. * **y** (number) - The y-coordinate for the image. * **width** (number) - The desired width of the image. * **height** (number) - The desired height of the image. * **mode** (string) - The scaling mode for the image. ### Returns Two.Image ``` -------------------------------- ### Two.Points Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/shapes/points/README.md Initializes a new Two.Points instance with a list of vertices. ```APIDOC ## Constructor ### Description Initializes a new Two.Points instance. ### Parameters #### Path Parameters - **vertices** (Array) - A list of Two.Vector objects that represent the order and coordinates to construct a rendered set of points. ``` -------------------------------- ### Two.ImageSequence.fromObject Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/image-sequence/README.md Creates a new Two.ImageSequence instance from an object notation. ```APIDOC ## Two.ImageSequence.fromObject ### Description Create a new [Two.ImageSequence](/docs/effects/image-sequence/) from an object notation of a [Two.ImageSequence](/docs/effects/image-sequence/). ### Returns Two.ImageSequence ### Parameters #### Arguments - **obj** (Object) - Object notation of a [Two.ImageSequence](/docs/effects/image-sequence/) to create a new instance. ::: tip nota-bene Works in conjunction with [Two.ImageSequence.toObject](/docs/effects/image-sequence/#toobject) ::: ``` -------------------------------- ### toString Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/matrix/README.md Create a transform string. Used for the Two.js rendering APIs. ```APIDOC ## toString ### Description Create a transform string. Used for the Two.js rendering APIs. ### Parameters #### Path Parameters - **fullMatrix** (boolean) - Optional - Return the full 9 elements of the matrix or just 6 for 2D transformations. ### Returns - String - The transformation matrix as a 6 component string separated by spaces. ``` -------------------------------- ### Utils Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/renderers/canvas/README.md A collection of utility functions and properties for rendering Two.js objects to a canvas. ```APIDOC ## Utils ### Description A massive object filled with utility functions and properties to render Two.js objects to a ``. ``` -------------------------------- ### Two.Path.fromObject Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/path/README.md Creates a new Two.Path instance from an object notation. ```APIDOC ## fromObject ### Description Create a new [Two.Path](/docs/path/) from an object notation of a [Two.Path](/docs/path/). ### Parameters * **obj** (Object) - Object notation of a [Two.Path](/docs/path/) to create a new instance. ### Returns * Two.Path - A new instance of Two.Path. ### Note Works in conjunction with [Two.Path.toObject](/docs/path/#toobject) ``` -------------------------------- ### Two.Text.decoration Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/text/README.md String to delineate whether text should be decorated with for instance an `'underline'`. Defaults to `'none'`. ```APIDOC ## Two.Text.decoration ### Description String to delineate whether text should be decorated with for instance an `'underline'`. ### Default Value `'none'` ``` -------------------------------- ### Two.makeLine Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md Creates a Two.js line and adds it to the scene. ```APIDOC ## makeLine ### Description Creates a Two.js line and adds it to the scene. ### Method Instance method. ### Returns Two.Line ### Parameters #### Path Parameters - **x1** (number) - The x-coordinate of the starting point. - **y1** (number) - The y-coordinate of the starting point. - **x2** (number) - The x-coordinate of the ending point. - **y2** (number) - The y-coordinate of the ending point. ``` -------------------------------- ### Two.render Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md Renders all drawable and visible objects of the scene. This action triggers the 'render' event. ```APIDOC ## Two.render ### Description Render all drawable and visible objects of the scene. ### Triggers - `event:render` ``` -------------------------------- ### addLimits Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/extras/zui/README.md Sets the minimum and maximum zoom scale for the ZUI. ```APIDOC ## addLimits ### Description Sets the minimum and maximum scale the ZUI can zoom out to and zoom in to, respectively. ### Method (Implicitly a method of Two.ZUI) ### Parameters #### Path Parameters - **min** (Number) - The minimum scale the ZUI can zoom out to. - **max** (Number) - The maximum scale the ZUI can zoom in to. ``` -------------------------------- ### clone Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/image-sequence/README.md Creates a new instance of Two.ImageSequence with the same properties as the current one. ```APIDOC ## clone ### Description Create a new instance of [Two.ImageSequence](/docs/effects/image-sequence/) with the same properties of the current image sequence. ### Parameters #### Path Parameters - **parent** (Object) - The parent group or scene to add the clone to. ### Returns - **Two.ImageSequence** - A new instance of Two.ImageSequence. ``` -------------------------------- ### setSize Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/renderers/svg/README.md Changes the size of the renderer and triggers a resize event. ```APIDOC ## setSize ### Description Change the size of the renderer. ### Parameters - **width** (number) - The new width of the renderer. - **height** (number) - The new height of the renderer. ### Events - Triggers a `Two.Events.resize`. ``` -------------------------------- ### setSize Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/renderers/canvas/README.md Changes the size of the renderer and triggers a 'resize' event. ```APIDOC ## setSize ### Description Change the size of the renderer. __Triggers__: `event:resize` ### Parameters * **width** (number) - The new width of the renderer. * **height** (number) - The new height of the renderer. * **ratio** (number, optional) - The new pixel ratio (pixel density) of the renderer. Defaults to the screen's pixel density. ``` -------------------------------- ### makeImageSequence Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md Creates a Two.js image sequence object and adds it to the scene. ```APIDOC ## makeImageSequence ### Description Creates a Two.js image sequence object and adds it to the scene. ### Parameters * **src** (Array) - An array of paths or of [Two.Textures](/docs/effects/texture/). * **x** (number) - The x-coordinate for the image sequence. * **y** (number) - The y-coordinate for the image sequence. * **frameRate** (number) - The frame rate of the sequence. * **autostart** (boolean) - Whether the sequence should start automatically. ### Returns Two.ImageSequence ``` -------------------------------- ### width Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md The width of the instance's DOM element. ```APIDOC ## width ### Description The width of the instance's dom element. ### Properties - **width** (number) - The current width of the element. ``` -------------------------------- ### Two.Types Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md The different rendering types available in the library. ```APIDOC ## Types ### Description The different rendering types available in the library. ``` -------------------------------- ### height Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md The height of the instance's DOM element. ```APIDOC ## height ### Description The height of the instance's dom element. ### Properties - **height** (number) - The current height of the element. ``` -------------------------------- ### Two.Image.fromObject Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/image/README.md Creates a new Two.Image instance from an object notation. ```APIDOC ## fromObject ### Description Create a new [Two.Image](/docs/effects/image/) from an object notation of a [Two.Image](/docs/effects/image/). ### Parameters - **obj** (object) - Object notation of a [Two.Image](/docs/effects/image/) to create a new instance ### Returns - **Two.Image** - A new Two.Image instance. ``` -------------------------------- ### Two.Circle Constructor Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/shapes/circle/README.md Initializes a new circle object. You can optionally set the x, y, and radius of the circle, as well as the number of vertices used to draw it. ```APIDOC ## Constructor ### Parameters #### Path Parameters - **x** (number) - The x position of the circle. - **y** (number) - The y position of the circle. - **radius** (number) - The radius value of the circle. - **resolution** (number) - The number of vertices used to construct the circle. ``` -------------------------------- ### clone Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/matrix/README.md Clone the current matrix. ```APIDOC ## clone ### Description Clone the current matrix. ``` -------------------------------- ### toObject Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/shapes/polygon/README.md Returns a JSON-compatible plain object representation of the path. ```APIDOC ## toObject ### Description Return a JSON compatible plain object that represents the path. ### Returns - **Object** - A plain object representing the path. ### Request Example ```javascript // Example usage not provided in source ``` ### Response #### Success Response (200) // Response details not provided in source ``` -------------------------------- ### load Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/two/README.md Load an SVG file or SVG text and interpret it into Two.js legible objects. ```APIDOC ## load ### Description Load an SVG file or SVG text and interpret it into Two.js legible objects. ### Parameters * **pathOrSVGContent** (string) - The URL path of an SVG file or an SVG document as text. * **callback** (Function) - Function to call once loading has completed. ### Returns Two.Group ``` -------------------------------- ### Two.Text.Properties Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/text/README.md A list of properties that are on every Two.Text instance. ```APIDOC ## Properties ### Description A list of properties that are on every [Two.Text](/docs/text/) instance. ``` -------------------------------- ### Two.Texture.loadHeadlessBuffer Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/effects/texture/README.md Loads an image as a buffer in headless environments. This function uses node's `fs.readFileSync` to spoof the `` loading process in the browser. ```APIDOC ## loadHeadlessBuffer ### Description Loads an image as a buffer in headless environments. ### Parameters #### Path Parameters - **texture** (Two.Texture) - The texture to be loaded. - **onLoad** (function) - The callback function to be triggered once the image is loaded. ### Notes This function uses node's `fs.readFileSync` to spoof the `` loading process in the browser. ``` -------------------------------- ### Two.ZUI.surfaceToClient Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/extras/zui/README.md Converts an x, y coordinate in projected space to the user's space. Optionally, a z component can be provided for depth. ```APIDOC ## Two.ZUI.surfaceToClient ### Description Convert an x, y coordinate in projected space to the user’s space. Optionally pass a z property on the object to apply depth. ### Returns Object - An object with x, y, and z components ### Parameters - **a** (number) - The x component of position to be transformed. - **b** (number) - The y component of position to be transformed. - **c** (number) - The optional z component of position to be transformed. ``` -------------------------------- ### Two.Path.clone Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/path/README.md Creates a new instance of Two.Path with the same properties as the current path. ```APIDOC ## Two.Path.clone ### Description Create a new instance of [Two.Path](/docs/path/) with the same properties of the current path. ### Parameters #### Path Parameters - **parent** (Object) - The parent group or scene to add the clone to. ### Returns Two.Path - A new Two.Path instance. ``` -------------------------------- ### surfaceToClient Source: https://github.com/jonobr1/two.js/blob/dev/wiki/docs/extras/zui/README.md Converts a surface coordinate (with optional depth) to the client space. ```APIDOC ## surfaceToClient ### Description Convert an x, y coordinate in projected space to the user’s space. Optionally pass a z property on the object to apply depth. ### Method (Implicitly a method of Two.ZUI) ### Parameters #### Path Parameters - **a** (Object) - An object with x, y, and optionally z properties representing the surface coordinate. ```