\n \n \n \n\n \n\n \n \n \n \n \n \n \n \n \n \n \n
\n \n\n"
},
{
"path": "tests/noWebGL.html",
"content": "\n\n \n \n \n\n \n \n \n\n \n\n \n \n \n \n \n \n \n \n\n
\n \n\n"
},
{
"path": "tests/src/utils.js",
"content": "/**\n * Convenience properties and methods for QUnit testing within two.js\n */\n\n(function () {\n var root = this;\n var QU = root.QUnit || {};\n var TEMP = document.createElement('div');\n var Tolerance = 0.001;\n\n var Utils = (QU.Utils = {\n digits: function (v, d) {\n var r = '';\n var s = v + '';\n var diff = Math.max(d - s.length, 0);\n var i = 0;\n\n while (i < diff) {\n r += '0';\n i++;\n }\n\n return r + v;\n },\n\n getSelector: function (test) {\n return '#qunit-test-output-' + test.testId + ' ol';\n },\n\n /**\n * Add a DOM Element to your current unit test.\n */\n addElemToTest: function (test, elem) {\n // // Skip for headless\n // if (window.URL) return;\n\n var domElement = document.createElement('li');\n\n if (Array.isArray(elem)) {\n _.each(elem, function (el) {\n domElement.appendChild(el);\n });\n } else {\n domElement.appendChild(elem);\n }\n\n _.delay(function () {\n var selector = Utils.getSelector(test);\n document.querySelector(selector).appendChild(domElement);\n }, 100);\n },\n\n /**\n * Add an instance of Two.js to your current unit test.\n */\n addInstanceToTest: function (test, two) {\n var elem;\n\n if (Array.isArray(two)) {\n elem = two.map(function (t) {\n var el = t.renderer.domElement;\n switch (el.tagName.toLowerCase()) {\n case 'svg':\n break;\n default:\n el.style.width = 200 + 'px';\n el.style.height = (200 * el.height) / el.width + 'px';\n }\n el.style.border = '1px solid #ccc';\n return el;\n });\n } else {\n elem = two.renderer.domElement;\n switch (elem.tagName.toLowerCase()) {\n case 'svg':\n break;\n default:\n elem.style.width = 200 + 'px';\n elem.style.height = (200 * elem.height) / elem.width + 'px';\n }\n elem.style.border = '1px solid #ccc';\n }\n\n Utils.addElemToTest(test, elem);\n },\n\n get: function (path, callback) {\n var xhr = new XMLHttpRequest();\n xhr.open('GET', path, true);\n\n xhr.onreadystatechange = function (e) {\n if (xhr.readyState !== 4 || xhr.status !== 200) {\n return;\n }\n\n callback(xhr.response);\n };\n\n xhr.send();\n },\n\n /**\n * Ajax get request to get blob.\n */\n getImageBlob: function (path, callback) {\n var xhr = new XMLHttpRequest();\n xhr.open('GET', path, true);\n\n if (window.URL) {\n xhr.responseType = 'blob';\n } else {\n xhr.responseType = 'arraybuffer';\n }\n\n xhr.onreadystatechange = function (e) {\n if (xhr.readyState !== 4 || xhr.status !== 200) {\n return;\n }\n\n if (window.URL) {\n callback(this.response);\n } else {\n var blob;\n var mimeString = 'image/png';\n\n // Some older Webkits don't support responseType blob,\n // So create a blob from arraybuffer\n\n try {\n blob = new Blob([this.response], { type: mimeString });\n } catch (e) {\n // The BlobBuilder API has been deprecated in favour of Blob, but older\n // browsers don't know about the Blob constructor\n // IE10 also supports BlobBuilder, but since the `Blob` constructor\n // also works, there's no need to add `MSBlobBuilder`.\n var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;\n var bb = new BlobBuilder();\n bb.append(this.response);\n blob = bb.getBlob(mimeString);\n }\n\n callback(blob);\n }\n };\n\n xhr.send();\n },\n\n /**\n * Compare a specific instance of two to an image in the context of a\n * specific test.\n */\n compare: function (path, renderer, message, callback) {\n var assert = this;\n\n QUnit.Utils.getImageBlob(path, function (reference) {\n var data = renderer.domElement.toDataURL('image/png');\n resemble(reference)\n .compareTo(data)\n .onComplete(function (data) {\n var pct = parseFloat(data.misMatchPercentage);\n\n // Can differ a bit due to antialiasing etc.\n assert.ok(pct <= 3, message);\n if (assert.done) {\n assert.done();\n }\n\n var img = document.createElement('img');\n img.src = path;\n img.title = 'Reference Image';\n img.width = 200;\n img.style.border = '1px solid #ccc';\n\n var domElement = document.createElement('li');\n renderer.domElement.title = 'Computed Image';\n renderer.domElement.style.border = '1px solid #000';\n renderer.domElement.style.width = 200 + 'px';\n renderer.domElement.style.height =\n 200 * (renderer.height / renderer.width) + 'px';\n renderer.domElement.style.marginLeft = 10 + 'px';\n\n domElement.appendChild(img);\n domElement.appendChild(renderer.domElement);\n\n _.delay(function () {\n var selector = Utils.getSelector(assert.test);\n document.querySelector(selector).appendChild(domElement);\n }, 100);\n\n if (typeof callback === 'function') {\n callback();\n }\n });\n });\n },\n\n textToDOM: function (str) {\n TEMP.innerHTML = str;\n return Array.prototype.map.call(TEMP.children, function (child) {\n return child;\n });\n },\n\n /**\n * Deep equality between an answer, a, and an object in question, q.\n */\n shapeEquals: function (a, q) {\n for (var i in a) {\n var check;\n\n if (Array.isArray(a[i])) {\n check = Utils.shapeEquals(a[i], Array.prototype.slice.call(q[i]));\n } else if (_.isObject(a[i])) {\n check = Utils.shapeEquals(a[i], q[i]);\n } else if (typeof a[i] === 'number') {\n check = Math.abs(a[i] - q[i]) <= Tolerance; // Fuzzy checking\n } else {\n check = q[i] === a[i];\n }\n\n if (!check) {\n return false;\n }\n }\n\n return true;\n },\n });\n})();\n"
},
{
"path": "tests/suite/bounding-box.js",
"content": "/**\n * Tests Two.js Utilities related to getBoundingClientRect methods:\n * + polygon._matrix transformations\n * + Two.getComputedMatrix\n */\n\n(function () {\n QUnit.module('getBoundingClientRect');\n\n QUnit.test('Two.Path.getBoundingClientRect', function (assert) {\n assert.expect(5);\n // assert.done = assert.async(4);\n\n (function () {\n var two = new Two({\n width: 400,\n height: 400,\n });\n\n var answer = {\n top: 134.671853,\n left: 134.671853,\n right: 265.328146,\n bottom: 265.328146,\n width: 130.656293,\n height: 130.656293,\n };\n var shape = two.makeRectangle(200, 200, 100, 100);\n shape.rotation = Math.PI / 8;\n shape.noStroke().fill = 'rgb(60, 209, 201)';\n\n var box = two.makeRectangle(\n answer.left + answer.width / 2,\n answer.top + answer.height / 2,\n answer.width,\n answer.height\n );\n box.noFill();\n\n two.update();\n\n var rect = shape.getBoundingClientRect();\n for (let prop in rect) {\n var value = rect[prop];\n rect[prop] = Two.Utils.toFixed(value);\n }\n var a1 = JSON.stringify(answer);\n var a2 = JSON.stringify(rect);\n\n assert.equal(\n a1,\n a2,\n true,\n 'Two.Path.getBoundingClientRect properly calculates rotated shapes.'\n );\n\n QUnit.Utils.addElemToTest(assert.test, [two.renderer.domElement]);\n })();\n\n (function () {\n var two = new Two({\n width: 400,\n height: 400,\n });\n\n var answer = {\n top: 129.671853,\n left: 129.671853,\n right: 270.328146,\n bottom: 270.328146,\n width: 140.656293,\n height: 140.656293,\n };\n var shape = two.makeRectangle(200, 200, 50, 50);\n shape.rotation = Math.PI / 8;\n shape.fill = 'rgb(60, 209, 201)';\n shape.stroke = '#ccc';\n shape.linewidth = 5;\n shape.scale = 2;\n\n var box = two.makeRectangle(\n answer.left + answer.width / 2,\n answer.top + answer.height / 2,\n answer.width,\n answer.height\n );\n box.noFill();\n\n two.update();\n\n var rect = shape.getBoundingClientRect();\n for (let prop in rect) {\n var value = rect[prop];\n rect[prop] = Two.Utils.toFixed(value);\n }\n var a1 = JSON.stringify(answer);\n var a2 = JSON.stringify(rect);\n\n assert.equal(\n a1,\n a2,\n true,\n 'Two.Path.getBoundingClientRect properly calculates scaled shapes.'\n );\n\n QUnit.Utils.addElemToTest(assert.test, [two.renderer.domElement]);\n })();\n\n (function () {\n var two = new Two({\n width: 400,\n height: 400,\n });\n\n var answer = {\n top: 150,\n left: 150,\n right: 250,\n bottom: 250,\n width: 100,\n height: 100,\n };\n var shape = two.makeCircle(200, 200, 50);\n shape.fill = 'rgb(60, 209, 201)';\n shape.linewidth = 0;\n\n var box = two.makeRectangle(\n answer.left + answer.width / 2,\n answer.top + answer.height / 2,\n answer.width,\n answer.height\n );\n box.noFill();\n\n two.update();\n\n var rect = shape.getBoundingClientRect();\n for (let prop in rect) {\n var value = rect[prop];\n rect[prop] = Two.Utils.toFixed(value);\n }\n var a1 = JSON.stringify(answer);\n var a2 = JSON.stringify(rect);\n\n assert.equal(\n a1,\n a2,\n true,\n 'Two.Path.getBoundingClientRect properly calculates circles.'\n );\n\n QUnit.Utils.addElemToTest(assert.test, [two.renderer.domElement]);\n })();\n\n (function () {\n var two = new Two({\n width: 400,\n height: 400,\n });\n\n var answer = {\n top: 150,\n left: 150,\n right: 249.999999,\n bottom: 249.999999,\n width: 99.999998,\n height: 99.999998,\n };\n var shape = two.makeCircle(200, 200, 50);\n shape.fill = 'rgb(60, 209, 201)';\n shape.linewidth = 0;\n shape.rotation = Math.PI / 4;\n\n var box = two.makeRectangle(\n answer.left + answer.width / 2,\n answer.top + answer.height / 2,\n answer.width,\n answer.height\n );\n box.noFill();\n\n two.update();\n\n var rect = shape.getBoundingClientRect();\n for (let prop in rect) {\n var value = rect[prop];\n rect[prop] = Two.Utils.toFixed(value);\n }\n var a1 = JSON.stringify(answer);\n var a2 = JSON.stringify(rect);\n\n assert.equal(\n a1,\n a2,\n true,\n 'Two.Path.getBoundingClientRect properly calculates rotated circles (projected).'\n );\n\n QUnit.Utils.addElemToTest(assert.test, [two.renderer.domElement]);\n })();\n\n (function () {\n var two = new Two({\n width: 400,\n height: 400,\n });\n\n var answer = {\n top: 182.752229,\n left: 167.233141,\n right: 232.766858,\n bottom: 217.24777,\n width: 65.533717,\n height: 34.495541,\n };\n var shape = two.makeText('Hello World', 200, 200);\n shape.rotation = Math.PI / 8;\n shape.noStroke().fill = 'rgb(60, 209, 201)';\n\n var box = two.makeRectangle(\n answer.left + answer.width / 2,\n answer.top + answer.height / 2,\n answer.width,\n answer.height\n );\n box.noFill();\n\n two.update();\n\n var rect = shape.getBoundingClientRect();\n for (let prop in rect) {\n var value = rect[prop];\n rect[prop] = Two.Utils.toFixed(value);\n }\n var a1 = JSON.stringify(answer);\n var a2 = JSON.stringify(rect);\n\n assert.equal(\n a1,\n a2,\n true,\n 'Two.Text.getBoundingClientRect properly calculates rotated shapes.'\n );\n\n QUnit.Utils.addElemToTest(assert.test, [two.renderer.domElement]);\n })();\n });\n\n QUnit.test('Two.getComputedMatrix', function (assert) {\n assert.expect(2);\n // assert.done = assert.async(1);\n\n (function () {\n var two = new Two({\n width: 400,\n height: 400,\n });\n\n two.renderer.domElement.style.border = '1px solid blue';\n\n var parentGroup = two.makeGroup();\n parentGroup.scale = 2;\n parentGroup.translation.set(two.width / 2, two.height / 2);\n parentGroup.rotation = Math.PI / 8;\n\n var group = two.makeGroup();\n group.scale = 2;\n group.translation.set(50, 0);\n group.rotation = Math.PI / 8;\n\n var shape = two.makeRectangle(0, 0, 50, 50);\n shape.fill = 'black';\n shape.stroke = 'yellow';\n shape.linewidth = 2;\n\n parentGroup.add(group);\n group.add(shape);\n\n var answer = {\n top: 95.846993,\n left: 149.966591,\n right: 434.809287,\n bottom: 380.689688,\n width: 284.842695,\n height: 284.842695,\n };\n\n var bBox = group.getBoundingClientRect();\n var rect = two.makeRectangle(\n bBox.left + bBox.width / 2,\n bBox.top + bBox.height / 2,\n bBox.width,\n bBox.height\n );\n rect.noFill().stroke = 'orangered';\n\n var bBoxClose = shape.getBoundingClientRect();\n var rectClose = two.makeRectangle(\n bBoxClose.left + bBoxClose.width / 2,\n bBoxClose.top + bBoxClose.height / 2,\n bBoxClose.width,\n bBoxClose.height\n );\n rectClose.noFill().stroke = 'green';\n\n two.update();\n\n for (var prop in bBox) {\n bBox[prop] = Two.Utils.toFixed(bBox[prop]);\n bBoxClose[prop] = Two.Utils.toFixed(bBoxClose[prop]);\n }\n\n var a1 = JSON.stringify(answer);\n var a2 = JSON.stringify(bBox);\n var a3 = JSON.stringify(bBoxClose);\n\n assert.equal(\n a1,\n a2,\n true,\n 'Two.Path.getBoundingClientRect properly calculates parent’s Two.Group.getBoundingClientRect.'\n );\n assert.equal(\n a1,\n a3,\n true,\n 'Two.Path.getBoundingClientRect properly calculates child’s Two.Group.getBoundingClientRect.'\n );\n\n QUnit.Utils.addElemToTest(assert.test, [two.renderer.domElement]);\n })();\n });\n})();\n"
},
{
"path": "tests/suite/canvas.js",
"content": "/**\n * Tests Two.js Canvas Rendering Functionality:\n */\n\n(function () {\n QUnit.module('CanvasRenderer');\n\n var getRatio = function (v) {\n return Math.round(window.devicePixelRatio);\n };\n var deviceRatio = getRatio(document.createElement('canvas').getContext('2d'));\n var suffix = '@' + deviceRatio + 'x.png';\n\n QUnit.test('Two.makeLine', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n two.makeLine(0, 0, two.width, two.height);\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/line' + suffix,\n two.renderer,\n 'Two.makeLine renders properly.'\n );\n });\n\n QUnit.test('Two.makeRectangle', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n two.makeRectangle(two.width / 2, two.height / 2, 100, 100);\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/rectangle' + suffix,\n two.renderer,\n 'Two.makeRectangle renders properly.'\n );\n });\n\n QUnit.test('Two.makeEllipse', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n two.makeEllipse(two.width / 2, two.height / 2, 100, 100);\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/ellipse' + suffix,\n two.renderer,\n 'Two.makeEllipse renders properly.'\n );\n });\n\n QUnit.test('Two.makeCircle', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n two.makeCircle(two.width / 2, two.height / 2, 50);\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/circle' + suffix,\n two.renderer,\n 'Two.makeCircle renders properly.'\n );\n });\n\n QUnit.test('Two.makePoints', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: 1,\n });\n\n var points = two.makePoints(200, 200, 220, 200, 180, 200);\n points.size = 10;\n points.noStroke();\n points.fill = '#00AEFF';\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/points' + suffix,\n two.renderer,\n 'Two.makePoints renders properly.'\n );\n });\n\n QUnit.test('Two.makePath', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n var amount = 20;\n var points = [];\n for (var i = 0; i < amount; i++) {\n var pct = i / amount;\n var x = pct * 300 + 50;\n var y = i % 2 ? 25 : 75;\n points.push(new Two.Anchor(x, y));\n }\n two.makePath(points, true);\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/polygon' + suffix,\n two.renderer,\n 'Two.makePath renders properly.'\n );\n });\n\n QUnit.test('Two.makeCurve', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n var amount = 20;\n var points = [];\n for (var i = 0; i < amount; i++) {\n var pct = i / amount;\n var x = pct * 300 + 50;\n var y = i % 2 ? 25 : 75;\n points.push(new Two.Anchor(x, y));\n }\n two.makeCurve(points, true);\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/curve' + suffix,\n two.renderer,\n 'Two.makeCurve renders properly.'\n );\n });\n\n QUnit.test('Two.makeLinearGradient', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n var gradient = two.makeLinearGradient(\n 0,\n -two.height / 2,\n 0,\n two.height / 2,\n new Two.Gradient.Stop(0, 'rgb(255, 100, 100)'),\n new Two.Gradient.Stop(1, 'rgb(100, 100, 255)')\n );\n\n var rect = two.makeRectangle(\n two.width / 2,\n two.height / 2,\n two.width / 4,\n two.height / 4\n );\n rect.fill = gradient;\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/linear-gradient' + suffix,\n two.renderer,\n 'Two.makeLinearGradient renders properly.'\n );\n });\n\n QUnit.test('Two.makeRadialGradient', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n var gradient = two.makeRadialGradient(\n 0.5,\n 0.5,\n 2,\n new Two.Gradient.Stop(0, 'rgb(255, 100, 100)'),\n new Two.Gradient.Stop(1, 'rgb(100, 100, 255)')\n );\n\n var rect = two.makeRectangle(\n two.width / 2,\n two.height / 2,\n two.width / 4,\n two.height / 4\n );\n rect.fill = gradient;\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/radial-gradient' + suffix,\n two.renderer,\n 'Two.makeLinearGradient renders properly.'\n );\n });\n\n QUnit.test('two.makeImage (Simple)', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 200,\n height: 100,\n ratio: deviceRatio,\n });\n\n var path = '/tests/images/spritesheet.jpg';\n var image = two.makeImage(path, two.width / 2, two.height / 2, 200, 100);\n var texture = image.texture;\n\n var loaded = function () {\n texture.unbind(Two.Events.Types.load, loaded);\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/image-fill' + suffix,\n two.renderer,\n 'Two.makeImage renders properly with default fill mode.'\n );\n };\n\n texture.bind(Two.Events.Types.load, loaded);\n texture._update();\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('two.makeImage (Mode: fit)', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 200,\n height: 100,\n ratio: deviceRatio,\n });\n\n var path = '/tests/images/spritesheet.jpg';\n var image = two.makeImage(\n path,\n two.width / 2,\n two.height / 2,\n 200,\n 100,\n 'fit'\n );\n var texture = image.texture;\n\n var loaded = function () {\n texture.unbind(Two.Events.Types.load, loaded);\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/image-fit' + suffix,\n two.renderer,\n 'Two.makeImage renders properly in fit mode.'\n );\n };\n\n texture.bind(Two.Events.Types.load, loaded);\n texture._update();\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('two.makeImage (Mode: fill)', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 200,\n height: 100,\n ratio: deviceRatio,\n });\n\n var path = '/tests/images/spritesheet.jpg';\n var image = two.makeImage(\n path,\n two.width / 2,\n two.height / 2,\n 200,\n 100,\n 'fill'\n );\n var texture = image.texture;\n\n var loaded = function () {\n texture.unbind(Two.Events.Types.load, loaded);\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/image-fill' + suffix,\n two.renderer,\n 'Two.makeImage renders properly in fill mode.'\n );\n };\n\n texture.bind(Two.Events.Types.load, loaded);\n texture._update();\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('two.makeImage (Mode: crop)', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 200,\n height: 100,\n ratio: deviceRatio,\n });\n\n var path = '/tests/images/spritesheet.jpg';\n var image = two.makeImage(\n path,\n two.width / 2,\n two.height / 2,\n 200,\n 100,\n 'crop'\n );\n var texture = image.texture;\n\n var loaded = function () {\n texture.unbind(Two.Events.Types.load, loaded);\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/image-crop' + suffix,\n two.renderer,\n 'Two.makeImage renders properly in crop mode.'\n );\n };\n\n texture.bind(Two.Events.Types.load, loaded);\n texture._update();\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('two.makeImage (Mode: tile)', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 200,\n height: 100,\n ratio: deviceRatio,\n });\n\n var path = '/tests/images/spritesheet.jpg';\n var image = two.makeImage(\n path,\n two.width / 2,\n two.height / 2,\n 200,\n 100,\n 'tile'\n );\n var texture = image.texture;\n\n var loaded = function () {\n texture.unbind(Two.Events.Types.load, loaded);\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/image-tile' + suffix,\n two.renderer,\n 'Two.makeImage renders properly in tile mode.'\n );\n };\n\n texture.bind(Two.Events.Types.load, loaded);\n texture._update();\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('two.makeImage (Mode: stretch)', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 200,\n height: 100,\n ratio: deviceRatio,\n });\n\n var path = '/tests/images/spritesheet.jpg';\n var image = two.makeImage(\n path,\n two.width / 2,\n two.height / 2,\n 200,\n 100,\n 'stretch'\n );\n var texture = image.texture;\n\n var loaded = function () {\n texture.unbind(Two.Events.Types.load, loaded);\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/image-stretch' + suffix,\n two.renderer,\n 'Two.makeImage renders properly in stretch mode.'\n );\n };\n\n texture.bind(Two.Events.Types.load, loaded);\n texture._update();\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('two.makeImage (Mode switching)', function (assert) {\n assert.expect(2);\n assert.done = assert.async(2);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 200,\n height: 100,\n ratio: deviceRatio,\n });\n\n var path = '/tests/images/spritesheet.jpg';\n var image = two.makeImage(\n path,\n two.width / 2,\n two.height / 2,\n 200,\n 100,\n 'fit'\n );\n var texture = image.texture;\n\n var loaded = function () {\n texture.unbind(Two.Events.Types.load, loaded);\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/image-fit' + suffix,\n two.renderer,\n 'Two.makeImage renders properly in initial fit mode.',\n function () {\n image.mode = 'fill';\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/image-fill' + suffix,\n two.renderer,\n 'Two.Image changes mode properly from fit to fill.'\n );\n }\n );\n };\n\n texture.bind(Two.Events.Types.load, loaded);\n texture._update();\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('two.makeSprite (Simple)', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n var path = '/tests/images/sequence/00000.png';\n var sprite = two.makeSprite(path, two.width / 2, two.height / 2);\n var texture = sprite.texture;\n\n var loaded = function () {\n texture.unbind(Two.Events.Types.load, loaded);\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/sprite-simple' + suffix,\n two.renderer,\n 'Two.makeSprite renders properly.'\n );\n };\n\n texture.bind(Two.Events.Types.load, loaded);\n texture._update();\n });\n\n QUnit.test('two.makeImageSequence', function (assert) {\n assert.expect(2);\n assert.done = assert.async(2);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n var paths = [];\n for (var i = 0; i < 30; i++) {\n paths.push('/tests/images/sequence/' + QUnit.Utils.digits(i, 5) + '.png');\n }\n var sequence = two.makeImageSequence(\n paths,\n two.width / 2,\n two.height / 2,\n 2\n );\n sequence.index = 3;\n var texture = sequence.textures[sequence.index];\n\n var loaded = function () {\n texture.unbind(Two.Events.Types.load, loaded);\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/image-sequence-1' + suffix,\n two.renderer,\n 'Two.ImageSequence applied the correct texture properly.',\n function () {\n sequence.index = 7;\n texture = sequence.textures[sequence.index];\n texture._flagImage = true;\n\n texture.bind(Two.Events.Types.load, function () {\n texture.unbind(Two.Events.Types.load);\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/image-sequence-2' + suffix,\n two.renderer,\n 'Two.ImageSequence can change index properly.'\n );\n });\n\n texture._update();\n }\n );\n };\n\n texture.bind(Two.Events.Types.load, loaded);\n texture._update();\n\n two.renderer.domElement.style.cursor = 'pointer';\n two.renderer.domElement.addEventListener(\n 'click',\n function () {\n if (two.playing) {\n two.pause();\n } else {\n sequence.loop = true;\n sequence.play();\n two.play();\n }\n },\n false\n );\n });\n\n QUnit.test('two.makeSprite', function (assert) {\n assert.expect(2);\n assert.done = assert.async(2);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n var path = '/tests/images/spritesheet.jpg';\n var sprite = two.makeSprite(\n path,\n two.width / 2,\n two.height / 2,\n 4,\n 4,\n 2,\n false\n );\n var texture = sprite.texture;\n sprite.index = 3;\n\n var loaded = function () {\n texture.unbind(Two.Events.Types.load, loaded);\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/image-sequence-1' + suffix,\n two.renderer,\n 'Two.makeSprite renders properly.',\n function () {\n sprite.index = 7;\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/image-sequence-2' + suffix,\n two.renderer,\n 'Two.Sprite changed index properly.'\n );\n }\n );\n };\n\n texture.bind(Two.Events.Types.load, loaded);\n texture._update();\n\n two.renderer.domElement.style.cursor = 'pointer';\n two.renderer.domElement.addEventListener(\n 'click',\n function () {\n if (two.playing) {\n two.pause();\n } else {\n sprite.loop = true;\n sprite.play();\n two.play();\n }\n },\n false\n );\n });\n\n QUnit.test('Two.makeText', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n var text = two.makeText('Hello World', two.width / 2, two.height / 2);\n text.fill = '#00aeff';\n text.noStroke();\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/text' + suffix,\n two.renderer,\n 'Two.makeText renders properly.'\n );\n });\n\n QUnit.test('Styles', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400,\n ratio: deviceRatio,\n });\n\n var shape = two.makeRectangle(two.width / 2, two.height / 2, 50, 50);\n\n shape.rotation = Math.PI / 2;\n shape.scale = 0.5;\n\n shape.fill = 'lightcoral';\n shape.stroke = '#333';\n shape.linewidth = 10;\n shape.opacity = 0.5;\n shape.join = 'miter';\n shape.cap = 'butt';\n shape.miter = 10;\n\n shape.closed = false;\n shape.curved = true;\n\n shape.visible = false;\n shape.visible = true;\n\n two.update();\n\n QUnit.Utils.compare.call(\n assert,\n './images/canvas/styles' + suffix,\n two.renderer,\n 'Styles render properly.'\n );\n });\n})();\n"
},
{
"path": "tests/suite/core.js",
"content": "/**\n * Tests Two.js Core Classes Functionality:\n * + Two.Utils ( Underscore Methods )\n * + Two.Events\n * + Two.Vector\n * + Two.Matrix\n * + Two.Collection\n * + Two.Shape\n * + Two.Registry\n * + Two.Texture\n * + Two\n */\n\nQUnit.module('Core');\n\nQUnit.test('Two.Events', function (assert) {\n assert.expect(1);\n\n var item = new Two.Events();\n\n item.bind('change', function (message) {\n assert.equal(message, 'hello', 'Bound Two.Events successfully.');\n });\n item.trigger('change', 'hello');\n item.unbind('change');\n item.trigger('change');\n});\n\nQUnit.test('Two.Vector', function (assert) {\n assert.expect(48);\n\n var vector = new Two.Anchor();\n\n assert.equal(vector.x, 0, 'x property defaults to 0.');\n assert.equal(vector.y, 0, 'y property defaults to 0.');\n\n vector.x = 5;\n vector.y = 5;\n\n assert.equal(vector.x, 5, 'x property can be set properly.');\n assert.equal(vector.y, 5, 'y property can be set properly.');\n\n vector.set(10, 10);\n assert.equal(vector.x, 10, 'Two.Vector.set applies x value properly.');\n assert.equal(vector.y, 10, 'Two.Vector.set applies y value properly.');\n\n vector.copy({ x: 20, y: 20 });\n assert.equal(vector.x, 20, 'Two.Vector.copy applies x value properly.');\n assert.equal(vector.y, 20, 'Two.Vector.copy applies y value properly.');\n\n vector.clear();\n assert.equal(vector.x, 0, 'Two.Vector.clear applies x value properly.');\n assert.equal(vector.y, 0, 'Two.Vector.clear applies y value properly.');\n\n vector.set(10, 10);\n var clone = vector.clone();\n assert.ok(\n clone instanceof Two.Vector,\n 'Two.Vector.clone returns an instance of Two.Vector.'\n );\n assert.equal(clone.x, vector.x, 'Two.Vector.clone applies x value properly.');\n assert.equal(clone.y, vector.y, 'Two.Vector.clone applies y value properly.');\n\n vector.add({ x: 5, y: 5 });\n assert.equal(vector.x, 15, 'Two.Vector.add applies x value properly.');\n assert.equal(vector.y, 15, 'Two.Vector.add applies y value properly.');\n\n vector.addSelf({ x: 5, y: 5 });\n assert.equal(vector.x, 20, 'Two.Vector.addSelf applies x value properly.');\n assert.equal(vector.y, 20, 'Two.Vector.addSelf applies y value properly.');\n\n vector.sub({ x: 15, y: 15 });\n assert.equal(vector.x, 5, 'Two.Vector.sub applies x value properly.');\n assert.equal(vector.y, 5, 'Two.Vector.sub applies y value properly.');\n\n vector.subSelf({ x: 5, y: 5 });\n assert.equal(vector.x, 0, 'Two.Vector.subSelf applies x value properly.');\n assert.equal(vector.y, 0, 'Two.Vector.subSelf applies y value properly.');\n\n vector.set(2.5, 2.5);\n vector.multiplySelf({ x: 2, y: 2 });\n assert.equal(\n vector.x,\n 5,\n 'Two.Vector.multiplySelf applies x value properly.'\n );\n assert.equal(\n vector.y,\n 5,\n 'Two.Vector.multiplySelf applies y value properly.'\n );\n\n vector.multiplyScalar(2);\n assert.equal(\n vector.x,\n 10,\n 'Two.Vector.multiplyScalar applies x value properly.'\n );\n assert.equal(\n vector.y,\n 10,\n 'Two.Vector.multiplyScalar applies y value properly.'\n );\n\n vector.divideScalar(2);\n assert.equal(\n vector.x,\n 5,\n 'Two.Vector.divideScalar applies x value properly.'\n );\n assert.equal(\n vector.y,\n 5,\n 'Two.Vector.divideScalar applies y value properly.'\n );\n\n vector.divideScalar();\n assert.equal(\n vector.x,\n 5,\n 'Two.Vector.divideScalar applies x value properly.'\n );\n assert.equal(\n vector.y,\n 5,\n 'Two.Vector.divideScalar applies y value properly.'\n );\n\n vector.set(1, -1);\n vector.negate();\n assert.equal(vector.x, -1, 'Two.Vector.negate applies x value properly.');\n assert.equal(vector.y, 1, 'Two.Vector.negate applies y value properly.');\n\n assert.equal(\n vector.dot({ x: 5, y: 5 }),\n 0,\n 'Two.Vector.dot returns correct result.'\n );\n\n vector.set(5, 5);\n assert.equal(\n vector.lengthSquared(),\n 50,\n 'Two.Vector.lengthSquared returns correct result.'\n );\n assert.equal(\n vector.length(),\n Math.sqrt(50),\n 'Two.Vector.length returns correct result.'\n );\n\n vector.normalize();\n assert.equal(\n vector.x,\n 5 / Math.sqrt(50),\n 'Two.Vector.normalize applies x value properly.'\n );\n assert.equal(\n vector.y,\n 5 / Math.sqrt(50),\n 'Two.Vector.normalize applies y value properly.'\n );\n\n vector.set(0, 0);\n clone.set(5, 5);\n assert.equal(\n vector.distanceToSquared(clone),\n 50,\n 'Two.Vector.distanceToSquared returns correct result.'\n );\n assert.equal(\n vector.distanceTo(clone),\n Math.sqrt(50),\n 'Two.Vector.distanceTo, returns correct result.'\n );\n\n vector.set(1, 1).setLength(5);\n assert.equal(\n vector.x,\n 5 / Math.sqrt(2),\n 'Two.Vector.setLength applies x value properly.'\n );\n assert.equal(\n vector.y,\n 5 / Math.sqrt(2),\n 'Two.Vector.setLength applies x value properly.'\n );\n\n vector.set(1, 1);\n assert.equal(\n vector.equals({ x: 1, y: 1 }),\n true,\n 'Two.Vector.equals returns correct result.'\n );\n\n vector.lerp({ x: 5, y: 5 }, 0.5);\n assert.equal(\n vector.x,\n (5 - 1) * 0.5 + 1,\n 'Two.Vector.lerp applies x value properly.'\n );\n assert.equal(\n vector.y,\n (5 - 1) * 0.5 + 1,\n 'Two.Vector.lerp applies y value properly.'\n );\n\n vector.clear();\n assert.equal(\n vector.isZero(),\n true,\n 'Two.Vector.isZero returns correct result.'\n );\n\n vector.set(9, 3);\n vector.rotate(Math.PI / 2);\n assert.equal(\n vector.equals({ x: -2.9999999999999996, y: 9 }),\n true,\n 'Two.Vector.rotate applies x, y properly.'\n );\n vector.rotate(Math.PI / 2);\n assert.equal(\n vector.equals({ x: -9, y: -2.999999999999999 }),\n true,\n 'Two.Vector.rotate applies x, y properly.'\n );\n vector.rotate(Math.PI / 2);\n assert.equal(\n vector.equals({ x: 2.9999999999999987, y: -9 }),\n true,\n 'Two.Vector.rotate applies x, y properly.'\n );\n vector.rotate(Math.PI / 2);\n assert.equal(\n vector.equals({ x: 9, y: 2.9999999999999982 }),\n true,\n 'Two.Vector.rotate applies x, y properly.'\n );\n});\n\nQUnit.test('Bound Two.Vector', function (assert) {\n assert.expect(45);\n\n var vector = new Two.Anchor();\n vector.bind(Two.Events.Types.change, function () {});\n\n assert.equal(vector._bound, true, 'Vector is bound.');\n assert.equal(vector.x, 0, 'x property defaults to 0.');\n assert.equal(vector.y, 0, 'y property defaults to 0.');\n\n vector.x = 5;\n vector.y = 5;\n\n assert.equal(vector.x, 5, 'x property can be set properly.');\n assert.equal(vector.y, 5, 'y property can be set properly.');\n\n vector.set(10, 10);\n assert.equal(vector.x, 10, 'Two.Vector.set applies x value properly.');\n assert.equal(vector.y, 10, 'Two.Vector.set applies y value properly.');\n\n vector.copy({ x: 20, y: 20 });\n assert.equal(vector.x, 20, 'Two.Vector.copy applies x value properly.');\n assert.equal(vector.y, 20, 'Two.Vector.copy applies y value properly.');\n\n vector.clear();\n assert.equal(vector.x, 0, 'Two.Vector.clear applies x value properly.');\n assert.equal(vector.y, 0, 'Two.Vector.clear applies y value properly.');\n\n vector.set(10, 10);\n var clone = vector.clone();\n assert.ok(\n clone instanceof Two.Vector,\n 'Two.Vector.clone returns an instance of Two.Vector.'\n );\n assert.equal(clone.x, vector.x, 'Two.Vector.clone applies x value properly.');\n assert.equal(clone.y, vector.y, 'Two.Vector.clone applies y value properly.');\n\n vector.add({ x: 5, y: 5 });\n assert.equal(vector.x, 15, 'Two.Vector.add applies x value properly.');\n assert.equal(vector.y, 15, 'Two.Vector.add applies y value properly.');\n\n vector.addSelf({ x: 5, y: 5 });\n assert.equal(vector.x, 20, 'Two.Vector.addSelf applies x value properly.');\n assert.equal(vector.y, 20, 'Two.Vector.addSelf applies y value properly.');\n\n vector.sub({ x: 15, y: 15 });\n assert.equal(vector.x, 5, 'Two.Vector.sub applies x value properly.');\n assert.equal(vector.y, 5, 'Two.Vector.sub applies y value properly.');\n\n vector.subSelf({ x: 5, y: 5 });\n assert.equal(vector.x, 0, 'Two.Vector.subSelf applies x value properly.');\n assert.equal(vector.y, 0, 'Two.Vector.subSelf applies y value properly.');\n\n vector.set(2.5, 2.5);\n vector.multiplySelf({ x: 2, y: 2 });\n assert.equal(\n vector.x,\n 5,\n 'Two.Vector.multiplySelf applies x value properly.'\n );\n assert.equal(\n vector.y,\n 5,\n 'Two.Vector.multiplySelf applies y value properly.'\n );\n\n vector.multiplyScalar(2);\n assert.equal(\n vector.x,\n 10,\n 'Two.Vector.multiplyScalar applies x value properly.'\n );\n assert.equal(\n vector.y,\n 10,\n 'Two.Vector.multiplyScalar applies y value properly.'\n );\n\n vector.divideScalar(2);\n assert.equal(\n vector.x,\n 5,\n 'Two.Vector.divideScalar applies x value properly.'\n );\n assert.equal(\n vector.y,\n 5,\n 'Two.Vector.divideScalar applies y value properly.'\n );\n\n vector.divideScalar();\n assert.equal(\n vector.x,\n 5,\n 'Two.Vector.divideScalar applies x value properly.'\n );\n assert.equal(\n vector.y,\n 5,\n 'Two.Vector.divideScalar applies y value properly.'\n );\n\n vector.set(1, -1);\n vector.negate();\n assert.equal(vector.x, -1, 'Two.Vector.negate applies x value properly.');\n assert.equal(vector.y, 1, 'Two.Vector.negate applies y value properly.');\n\n assert.equal(\n vector.dot({ x: 5, y: 5 }),\n 0,\n 'Two.Vector.dot returns correct result.'\n );\n\n vector.set(5, 5);\n assert.equal(\n vector.lengthSquared(),\n 50,\n 'Two.Vector.lengthSquared returns correct result.'\n );\n assert.equal(\n vector.length(),\n Math.sqrt(50),\n 'Two.Vector.length returns correct result.'\n );\n\n vector.normalize();\n assert.equal(\n vector.x,\n 5 / Math.sqrt(50),\n 'Two.Vector.normalize applies x value properly.'\n );\n assert.equal(\n vector.y,\n 5 / Math.sqrt(50),\n 'Two.Vector.normalize applies y value properly.'\n );\n\n vector.set(0, 0);\n clone.set(5, 5);\n assert.equal(\n vector.distanceToSquared(clone),\n 50,\n 'Two.Vector.distanceToSquared returns correct result.'\n );\n assert.equal(\n vector.distanceTo(clone),\n Math.sqrt(50),\n 'Two.Vector.distanceTo, returns correct result.'\n );\n\n vector.set(1, 1).setLength(5);\n assert.equal(\n vector.x,\n 5 / Math.sqrt(2),\n 'Two.Vector.setLength applies x value properly.'\n );\n assert.equal(\n vector.y,\n 5 / Math.sqrt(2),\n 'Two.Vector.setLength applies x value properly.'\n );\n\n vector.set(1, 1);\n assert.equal(\n vector.equals({ x: 1, y: 1 }),\n true,\n 'Two.Vector.equals returns correct result.'\n );\n\n vector.lerp({ x: 5, y: 5 }, 0.5);\n assert.equal(\n vector.x,\n (5 - 1) * 0.5 + 1,\n 'Two.Vector.lerp applies x value properly.'\n );\n assert.equal(\n vector.y,\n (5 - 1) * 0.5 + 1,\n 'Two.Vector.lerp applies y value properly.'\n );\n\n vector.clear();\n assert.equal(\n vector.isZero(),\n true,\n 'Two.Vector.isZero returns correct result.'\n );\n});\n\nQUnit.test('Two.Matrix', function (assert) {\n assert.expect(12);\n\n var matrix = new Two.Matrix();\n var check = true;\n\n matrix.set(0, 0, 0, 0, 0, 0, 0, 0, 0);\n\n for (var i = 0; i < matrix.elements.length; i++) {\n var el = matrix.elements[i];\n if (el !== 0) {\n check = false;\n break;\n }\n }\n\n assert.equal(check, true, 'Two.Matrix.set applies elements properly.');\n\n matrix.identity();\n var identity = [1, 0, 0, 0, 1, 0, 0, 0, 1];\n\n check = true;\n\n for (var i = 0; i < matrix.elements.length; i++) {\n var a = matrix.elements[i];\n var b = identity[i];\n if (a !== b) {\n check = false;\n break;\n }\n }\n\n assert.equal(check, true, 'Two.Matrix.identity applies elements properly.');\n\n matrix.set(1, 2, 3, 4, 5, 6, 7, 8, 9);\n matrix.multiply(9, 8, 7, 6, 5, 4, 3, 2, 1);\n\n var result = [30, 24, 18, 84, 69, 54, 138, 114, 90];\n\n check = true;\n\n for (var i = 0; i < matrix.elements.length; i++) {\n var a = matrix.elements[i];\n var b = result[i];\n if (a !== b) {\n check = false;\n break;\n }\n }\n\n assert.equal(\n check,\n true,\n 'Two.Matrix.multiply applies elements properly when multiplied by another matrix.'\n );\n\n matrix.set(1, 2, 3, 4, 5, 6, 7, 8, 9);\n var vector = matrix.multiply(9, 8, 7);\n\n result = [46, 118, 190];\n\n assert.deepEqual(\n vector,\n result,\n 'Two.Matrix.multiply applies elements properly when multipled by a vector.'\n );\n\n matrix.set(1, 1, 1, 1, 1, 1, 1, 1, 1);\n matrix.multiply(9);\n\n check = true;\n\n for (var i = 0; i < matrix.elements.length; i++) {\n var el = matrix.elements[i];\n if (el !== 9) {\n check = false;\n break;\n }\n }\n\n assert.equal(\n check,\n true,\n 'Two.Matrix.multiply applies elements properly when multiplied by a scalar.'\n );\n\n matrix.set(1, 2, 3, 4, 5, 6, 7, 8, 9);\n\n assert.deepEqual(\n matrix.toTransformArray(),\n [1, 4, 2, 5, 3, 6],\n 'Two.Matrix.toTransformArray returns correct result for 6 digit transformation.'\n );\n assert.deepEqual(\n matrix.toTransformArray(true),\n [1, 4, 7, 2, 5, 8, 3, 6, 9],\n 'Two.Matrix.toTransformArray returns correct result for 9 digit transformation.'\n );\n assert.deepEqual(\n matrix.toArray(),\n [1, 2, 3, 4, 5, 6],\n 'Two.Matrix.toArray returns correct result for 6 digit transformation.'\n );\n assert.deepEqual(\n matrix.toArray(true),\n [1, 2, 3, 4, 5, 6, 7, 8, 9],\n 'Two.Matrix.toArray returns correct result for 9 digit transformation.'\n );\n assert.equal(\n matrix.toString(),\n '1 4 2 5 3 6',\n 'Two.Matrix.toString returns correct result for 6 digit transformation.'\n );\n\n var clone = matrix.clone();\n assert.ok(\n clone instanceof Two.Matrix,\n 'Two.Matrix.clone returns instance of Two.Matrix.'\n );\n assert.deepEqual(\n clone.elements,\n matrix.elements,\n 'Two.Matrix.clone applies elements properly.'\n );\n});\n\nQUnit.test('Two.Collection', function (assert) {\n assert.expect(19);\n\n var poly = new Two.Path([new Two.Anchor(0, 0)]);\n var vector = new Two.Anchor(150, 150);\n var vertices = poly.vertices;\n var removed;\n\n assert.equal(\n vertices instanceof Two.Collection,\n true,\n 'Polyon.vertices is an instance of Two.Collection'\n );\n\n assert.equal(\n vertices[0].equals(new Two.Anchor(0, 0)),\n true,\n 'Two.Collection created with correct items'\n );\n\n vertices.push(vector);\n assert.equal(\n vertices.length,\n 2,\n 'Two.Collection.push added one item to the end of vertices collection'\n );\n\n removed = vertices.pop();\n assert.equal(\n vertices.length,\n 1,\n 'Two.Collection.pop removed one item from the end of the vertices collection'\n );\n assert.equal(\n removed.equals(vector),\n true,\n 'Two.Collection.push removed the correct item'\n );\n\n // Clear removed to reuse\n removed = null;\n\n vertices.unshift(vector);\n assert.equal(\n vertices.length,\n 2,\n 'Two.Collection.unshift added one item to the front of the vertices collection'\n );\n\n removed = vertices.shift();\n assert.equal(\n vertices.length,\n 1,\n 'Two.Collection.shift removed one item from the front of the vertices collection'\n );\n assert.equal(\n removed.equals(vector),\n true,\n 'Two.Collection.shift removed the correct item'\n );\n\n // Clear removed to reuse\n removed = null;\n\n vertices.push(\n new Two.Anchor(1, 1),\n new Two.Anchor(2, 2),\n new Two.Anchor(3, 3),\n new Two.Anchor(4, 4)\n );\n\n assert.equal(\n vertices.length,\n 5,\n 'Two.Collection.push adds several items to the end of vertices collection'\n );\n\n removed = vertices.splice(2, 1, vector);\n assert.equal(\n vertices.length,\n 5,\n 'Two.Collection.splice adds and removes items from the vertices collection'\n );\n assert.equal(\n removed[0].equals(new Two.Anchor(2, 2)),\n true,\n 'Two.Collection.splice remove the correct items from the vertices collection'\n );\n assert.equal(\n vertices[2].equals(vector),\n true,\n 'Two.Collection.splice inserts correct item to the middle of the vertices collection'\n );\n\n var a = new Two.Collection('a', 'b', 'c', 'd', 'e');\n assert.equal(\n a.slice(1, 2)[0],\n 'b',\n 'Two.Collection.slice does correct beginning / end index selection.'\n );\n\n a.splice(0, 0, 'z');\n\n assert.equal(\n a[0],\n 'z',\n 'Two.Collection.splice correctly inserts properties.'\n );\n\n var children = new Two.Group.Children('a', 'b', 'c', 'd', 'e');\n\n var result = children.map(function (v) {\n return v;\n });\n\n assert.equal(\n result.length,\n 5,\n 'Two.Collection.map correctly iterates through the necessary items.'\n );\n\n const emptyCollection = new Two.Collection();\n\n assert.equal(\n emptyCollection.length,\n 0,\n 'Two.Collection correctly enumerates properties.'\n );\n\n assert.equal(\n Object.keys(emptyCollection).length,\n 0,\n 'Two.Collection correctly Object.keys an empty collection.'\n );\n\n const included = emptyCollection.filter(() => true);\n console.log(\n included.length,\n 0,\n 'Two.Collection.filter correctly iterates over items.'\n );\n\n emptyCollection.push(5, 10, 432, 90);\n\n assert.equal(\n Object.keys(emptyCollection).length,\n 4,\n 'Two.Collection correctly Object.keys a populated list collection.'\n );\n\n assert.equal(\n emptyCollection.find((v) => v === 5),\n 5,\n 'Two.Collection.find correctly iterates over items.'\n );\n});\n\nQUnit.test('Two.Children', function (assert) {\n assert.expect(4);\n\n var group = new Two.Group();\n var shape = new Two.Shape();\n\n group.add(shape);\n shape._update(true);\n\n assert.equal(\n shape.id in group.children.ids,\n true,\n 'Two.Children properly adds child elements to list.'\n );\n\n group.remove(shape);\n group._update(true);\n assert.equal(\n shape.id in group.children.ids,\n false,\n 'Two.Children properly removes child element from list.'\n );\n\n group.add(shape);\n shape.id = 'custom';\n shape._update(true);\n assert.equal(\n shape.id in group.children.ids,\n true,\n 'Two.Children properly updates ids map when child id changes.'\n );\n\n try {\n // Check to be able to add and remove masks freely without errors\n group.mask = new Two.Rectangle(0, 0, 10, 10);\n group.mask = null;\n assert.equal(\n group.mask,\n null,\n 'Two.Group properly assigns and unassigns masks.'\n );\n } catch (e) {\n console.error(e);\n }\n});\n\nQUnit.test('Two.Shape', function (assert) {\n assert.expect(13);\n\n var shape = new Two.Shape();\n assert.equal(\n shape.translation.toString(),\n '0, 0',\n 'Two.Shape.translation constructed properly.'\n );\n assert.equal(shape.scale, 1, 'Two.Shape.scale constructed properly.');\n assert.equal(shape.rotation, 0, 'Two.Shape.rotation constructed properly.');\n\n shape.translation.x = 50;\n shape.translation.y = 25;\n shape._update();\n\n assert.equal(\n shape._matrix.toString(),\n '1 0 0 1 50 25',\n 'Two.Shape.translation binds properly.'\n );\n\n shape.translation = new Two.Anchor(25, 50);\n shape._update();\n\n assert.equal(\n shape._matrix.toString(),\n '1 0 0 1 25 50',\n 'Two.Shape.translation binds properly.'\n );\n\n shape.translation.x = 0;\n shape.translation.y = 0;\n shape._update();\n\n assert.equal(\n shape._matrix.toString(),\n '1 0 0 1 0 0',\n 'Two.Shape.translation binds properly.'\n );\n\n shape.scale = 3;\n shape._update();\n\n assert.equal(\n shape._matrix.toString(),\n '3 0 0 3 0 0',\n 'Two.Shape.scale uniform scale works properly.'\n );\n\n shape.scale = new Two.Anchor(1, 2);\n shape._update();\n\n assert.equal(\n shape._matrix.toString(),\n '1 0 0 2 0 0',\n 'Two.Shape.scale 2 dimension scale works properly.'\n );\n\n shape.scale.x = 2;\n shape.scale.y = 1;\n shape._update();\n\n assert.equal(\n shape._matrix.toString(),\n '2 0 0 1 0 0',\n 'Two.Shape.scale 2 dimension scale binds properly for event listening.'\n );\n\n var s = shape.scale;\n shape.scale = 10;\n s.x = 5;\n shape._update();\n\n assert.equal(\n shape._matrix.toString(),\n '10 0 0 10 0 0',\n 'Two.Shape.scale 2 dimension scale unbinds properly.'\n );\n\n shape.rotation = 3.14;\n shape._update();\n\n assert.equal(\n shape._matrix.toString(),\n '-9.999988 0.015926 -0.015927 -9.999988 0 0',\n 'Two.Shape.rotation works properly.'\n );\n\n assert.equal(\n shape.worldMatrix.toString(),\n '-9.999988 0.015926 -0.015927 -9.999988 0 0',\n 'Two.Shape.worldMatrix locally updates properly.'\n );\n\n var scene = new Two.Group();\n\n scene.add(shape);\n\n scene.position.x = 100;\n\n scene._update();\n\n assert.equal(\n shape.worldMatrix.toString(),\n '-9.999988 0.015926 -0.015927 -9.999988 100 0',\n 'Two.Shape.worldMatrix properly calculates world matrix.'\n );\n});\n\nQUnit.test('Children adding and removing', function (assert) {\n assert.expect(28);\n\n var group1 = new Two.Group();\n var group2 = new Two.Group();\n var group3 = new Two.Group();\n\n var poly1 = new Two.Path([new Two.Anchor(0, 0)]);\n var poly2 = new Two.Path([new Two.Anchor(0, 0)]);\n var poly3 = new Two.Path([new Two.Anchor(0, 0)]);\n var poly4 = new Two.Path([new Two.Anchor(0, 0)]);\n var poly5 = new Two.Path([new Two.Anchor(0, 0)]);\n\n poly1.addTo(group1);\n assert.equal(\n poly1,\n group1.children[0],\n 'Can add objects to group (via object)'\n );\n assert.equal(group1, poly1.parent, 'Can add objects to group (via object)');\n assert.ok(\n ~poly1.parent.additions.indexOf(poly1),\n 'Can add objects to group (via object)'\n );\n assert.equal(group1.children.length, 1, 'Correct childrens length');\n\n group2.add(poly2);\n assert.equal(\n poly2,\n group2.children[0],\n 'Can add objects to group (via group)'\n );\n assert.equal(group2, poly2.parent, 'Can add objects to group (via group)');\n assert.ok(\n ~poly2.parent.additions.indexOf(poly2),\n 'Can add objects to group (via group)'\n );\n assert.equal(group2.children.length, 1, 'Correct childrens length');\n\n group1.add(poly2);\n assert.equal(poly2, group1.children[1], 'Can reassign objects to group');\n assert.equal(group1, poly2.parent, 'Can reassign objects to group');\n assert.ok(\n ~poly2.parent.additions.indexOf(poly2),\n 'Can reassign objects to group'\n );\n assert.ok(!~group2.additions.indexOf(poly2), 'Can reassign objects to group');\n assert.equal(group1.children.length, 2, 'Correct childrens length');\n assert.equal(group2.children.length, 0, 'Correct childrens length');\n\n group3.add(group1);\n assert.equal(group1, group3.children[0], 'Can add groups to group');\n assert.equal(group3, group1.parent, 'Can add groups to group');\n assert.ok(~group3.additions.indexOf(group1), 'Can add groups to group');\n assert.equal(group3.children.length, 1, 'Correct childrens length');\n\n group1.add(poly3);\n group1.add(poly4);\n group1.add(poly5);\n assert.equal(group1.children.length, 5, 'Correct childrens length');\n\n group3.add(group1.children);\n assert.equal(\n group3.children.length,\n 6,\n 'Can reassign children to another group'\n );\n assert.equal(\n group1.children.length,\n 0,\n 'Can reassign children to another group'\n );\n assert.equal(\n group1.additions.length,\n 0,\n 'Can reassign children to another group'\n );\n assert.equal(poly5.parent, group3, 'Can reassign children to another group');\n assert.ok(\n ~poly5.parent.additions.indexOf(poly5),\n 'Can reassign children to another group'\n );\n\n group3.remove(poly4);\n assert.equal(group3.children.length, 5, 'Can remove objects from group');\n assert.equal(group3.additions.length, 5, 'Can remove objects from group');\n assert.equal(poly4.parent, null, 'Can remove objects from group');\n\n group3.add(void 0);\n assert.ok(true, 'Can safely add undefined stuff to group');\n});\n\nQUnit.test('Two.Registry', function (assert) {\n assert.expect(4);\n\n var registry = new Two.Registry();\n var id = 'foo';\n var val = 'bar';\n\n registry.add(id, val);\n assert.equal(\n registry.get(id),\n val,\n 'Two.Registry registers key values properly.'\n );\n assert.equal(\n registry.contains(id),\n true,\n 'Two.Registry.contains found registered value properly.'\n );\n\n registry.remove(id);\n assert.equal(\n registry.map[id],\n undefined,\n 'Two.Registry removes key values properly.'\n );\n assert.equal(\n registry.contains(id),\n false,\n 'Two.Registry.contains did not find removed id.'\n );\n});\n\nQUnit.test('Two.Texture', function (assert) {\n assert.expect(7);\n assert.done = assert.async(2);\n\n // Test Image Loading to Texture\n var root = '/tests/images/sequence/';\n var path = [root, '00000.png'].join('');\n\n var ta = new Two.Texture(path, function () {\n assert.ok(true, 'Two.Texture callback on load triggered properly.');\n tc._update();\n assert.equal(\n ta.image,\n tc.image,\n 'Two.Texture applies image properties properly after undefined.'\n );\n assert.ok(\n tc.loaded,\n 'Two.Texture applies loaded property correctly on undefined source images.'\n );\n assert.done();\n });\n ta.image.id = 'first-original-image';\n\n var image = document.createElement('img');\n var onload = function () {\n var tb = new Two.Texture(image);\n var absolutePath = [\n window.location.protocol,\n '//',\n window.location.host,\n path,\n ].join('');\n\n assert.equal(\n tb.src,\n absolutePath,\n 'Two.Texture takes in image and applies path properly.'\n );\n assert.equal(\n tb.image,\n ta.image,\n 'Two.Texture takes in image and applies registered image tag properly.'\n );\n assert.equal(\n tb.loaded,\n true,\n 'Two.Texture takes in image and applies loaded property properly.'\n );\n assert.done();\n\n image.onload = null;\n };\n image.onload = onload;\n image.src = path;\n image.id = 'second-same-image-as-first';\n\n var tc = new Two.Texture();\n assert.ok(\n true,\n 'Two.Texture able to be constructed without any parameters properly.'\n );\n\n tc.src = path;\n});\n\nQUnit.test('Two', function (assert) {\n assert.expect(8);\n\n var selector = QUnit.Utils.getSelector(assert.test);\n var elem = document.querySelector(selector);\n elem.id = assert.test.id + '-container';\n\n var two = new Two().appendTo(elem);\n assert.equal(\n two.renderer.domElement.parentElement.id,\n elem.id,\n 'Two appends to the correct element when `appendTo` invoked.'\n );\n\n two.update();\n assert.equal(two.frameCount, 1, 'Two increments frameCount correctly.');\n\n two.play();\n assert.ok(two.playing, 'Two.Utils.setPlaying applied correctly.');\n assert.ok(\n typeof Two.NextFrameId === 'number',\n 'requestAnimationFrame runs correctly.'\n );\n\n two.pause();\n assert.ok(!two.playing, 'Two.pause correctly stops updating.');\n\n var rectangle = two.makeRectangle(two.width / 2, two.height / 2, 10, 10);\n\n assert.equal(two.scene.children.length, 1, 'Adds children correctly.');\n\n two.remove(rectangle);\n assert.equal(two.scene.children.length, 0, 'Removes children correctly');\n\n two.add(rectangle);\n two.clear();\n assert.equal(two.scene.children.length, 0, 'Clears children correctly');\n});\n\nQUnit.test('Two.Path Object Conversion', function (assert) {\n assert.expect(9);\n\n // Create an original path with some properties\n var path = new Two.Path([new Two.Anchor(0, 0), new Two.Anchor(100, 100)]);\n path.fill = '#ff0000';\n path.stroke = '#00ff00';\n path.linewidth = 5;\n path.opacity = 0.5;\n path.visible = true;\n path.cap = 'round';\n path.join = 'miter';\n path.miter = 10;\n path.id = 'my-path';\n\n // Convert to object\n var obj = path.toObject();\n\n // Test object has expected properties\n assert.equal(typeof obj, 'object', 'Two.Path.toObject creates an object');\n assert.equal(obj.vertices.length, 2, 'Two.Path.toObject preserves vertices');\n assert.equal(obj.fill, '#ff0000', 'Two.Path.toObject preserves fill');\n assert.equal(obj.id, 'my-path', 'Two.Path.toObject preserves id');\n\n // Create new path from object\n var newPath = Two.Path.fromObject(obj);\n\n // Test new path matches original\n assert.equal(newPath.fill, path.fill, 'Two.Path.fromObject preserves fill');\n assert.equal(\n newPath.stroke,\n path.stroke,\n 'Two.Path.fromObject preserves stroke'\n );\n assert.equal(\n newPath.vertices.length,\n path.vertices.length,\n 'Two.Path.fromObject preserves vertices length'\n );\n assert.equal(newPath.id, path.id, 'Two.Path.fromObject preserves id');\n\n // Test copy method\n var copiedPath = new Two.Path().copy(path);\n assert.deepEqual(\n { ...copiedPath.toObject(), id: path.id },\n obj,\n 'Two.Path.copy creates identical path'\n );\n});\n\nQUnit.test('Two.Path strokeAttenuation', function (assert) {\n assert.expect(4);\n\n var path = new Two.Path([new Two.Anchor(0, 0), new Two.Anchor(100, 100)]);\n\n path.strokeAttenuation = true;\n assert.equal(\n path.strokeAttenuation,\n true,\n 'Can get property strokeAttenuation correctly.'\n );\n assert.equal(\n path._strokeAttenuation,\n true,\n 'Can set property strokeAttenuation correctly.'\n );\n\n path.strokeAttenuation = false;\n assert.equal(\n path.strokeAttenuation,\n false,\n 'Can set property strokeAttenuation to false correctly.'\n );\n assert.equal(\n path._strokeAttenuation,\n false,\n 'Can get property strokeAttenuation false correctly.'\n );\n});\n\nQUnit.test('Two.Group Object Conversion', function (assert) {\n assert.expect(6);\n\n // Create original group with children\n var group = new Two.Group();\n var circle = new Two.Circle(0, 0, 50);\n var rect = new Two.Rectangle(100, 100, 50, 50);\n group.add(circle, rect);\n group.id = 'my-group';\n\n // Convert to object\n var obj = group.toObject();\n\n // Test object has expected properties\n assert.equal(typeof obj, 'object', 'Two.Group.toObject creates an object');\n assert.equal(obj.children.length, 2, 'Two.Group.toObject preserves children');\n assert.equal(obj.id, 'my-group', 'Two.Group.toObject preserves id');\n\n // Create new group from object\n var newGroup = Two.Group.fromObject(obj);\n\n // Test new group matches original\n assert.equal(\n newGroup.children.length,\n group.children.length,\n 'Two.Group.fromObject preserves children length'\n );\n assert.equal(newGroup.id, group.id, 'Two.Group.fromObject preserves id');\n\n // Test child types are preserved\n assert.ok(\n newGroup.children[0] instanceof Two.Circle,\n 'Two.Group.fromObject preserves child types'\n );\n\n // TODO: Implement\n // // Test copy method\n // var copiedGroup = new Two.Group().copy(group);\n // copiedGroup._update();\n // assert.deepEqual(\n // copiedGroup.toObject(),\n // group.toObject(),\n // 'Two.Group.copy creates identical group'\n // );\n});\n\nQUnit.test('Two.Group strokeAttenuation', function (assert) {\n assert.expect(4);\n\n var group = new Two.Group();\n\n group.strokeAttenuation = true;\n assert.equal(\n group.strokeAttenuation,\n true,\n 'Can get property strokeAttenuation correctly.'\n );\n assert.equal(\n group._strokeAttenuation,\n true,\n 'Can set property strokeAttenuation correctly.'\n );\n\n group.strokeAttenuation = false;\n assert.equal(\n group.strokeAttenuation,\n false,\n 'Can set property strokeAttenuation to false correctly.'\n );\n assert.equal(\n group._strokeAttenuation,\n false,\n 'Can get property strokeAttenuation false correctly.'\n );\n});\n\nQUnit.test('Two.Group.getBoundingClientRect(shallow)', function (assert) {\n assert.expect(6);\n\n const group = new Two.Group();\n\n for (let i = 0; i < 3; i++) {\n const x = i * 100;\n const width = 100;\n const height = 50;\n const child = new Two.Rectangle(x, 0, width, height);\n group.add(child);\n }\n\n const rect = group.getBoundingClientRect(true);\n assert.equal(\n rect.top,\n -25.5,\n 'Two.Group.getBoundingClientRect(shallow) correctly calculates top property.'\n );\n assert.equal(\n rect.bottom,\n 25.5,\n 'Two.Group.getBoundingClientRect(shallow) correctly calculates bottom property.'\n );\n assert.equal(\n rect.left,\n -50.5,\n 'Two.Group.getBoundingClientRect(shallow) correctly calculates left property.'\n );\n assert.equal(\n rect.right,\n 250.5,\n 'Two.Group.getBoundingClientRect(shallow) correctly calculates right property.'\n );\n assert.equal(\n rect.width,\n 301,\n 'Two.Group.getBoundingClientRect(shallow) correctly calculates width property.'\n );\n assert.equal(\n rect.height,\n 51,\n 'Two.Group.getBoundingClientRect(shallow) correctly calculates height property.'\n );\n});\n\nQUnit.test('Two.Text Object Conversion', function (assert) {\n assert.expect(9);\n\n var text = new Two.Text('Hello, World!', 100, 100);\n text.fill = '#ff0000';\n text.stroke = '#00ff00';\n text.size = 20;\n text.id = 'my-text';\n\n var obj = text.toObject();\n\n assert.equal(typeof obj, 'object', 'Two.Text.toObject creates an object');\n assert.equal(obj.value, 'Hello, World!', 'Two.Text.toObject preserves value');\n assert.equal(obj.fill, '#ff0000', 'Two.Text.toObject preserves fill');\n assert.equal(obj.stroke, '#00ff00', 'Two.Text.toObject preserves stroke');\n assert.equal(obj.size, 20, 'Two.Text.toObject preserves size');\n assert.equal(obj.id, 'my-text', 'Two.Text.toObject preserves id');\n\n var newText = Two.Text.fromObject(obj);\n\n assert.equal(\n newText.value,\n text.value,\n 'Two.Text.fromObject preserves value'\n );\n assert.equal(newText.fill, text.fill, 'Two.Text.fromObject preserves fill');\n\n var copiedText = new Two.Text().copy(text);\n assert.deepEqual(\n { ...copiedText.toObject(), id: text.id },\n text.toObject(),\n 'Two.Text.copy creates identical text'\n );\n});\n\nQUnit.test('Two.Text strokeAttenuation', function (assert) {\n assert.expect(4);\n\n var text = new Two.Text('Hello, World!', 100, 100);\n\n text.strokeAttenuation = true;\n assert.equal(\n text.strokeAttenuation,\n true,\n 'Can get property strokeAttenuation correctly.'\n );\n assert.equal(\n text._strokeAttenuation,\n true,\n 'Can set property strokeAttenuation correctly.'\n );\n\n text.strokeAttenuation = false;\n assert.equal(\n text.strokeAttenuation,\n false,\n 'Can set property strokeAttenuation to false correctly.'\n );\n assert.equal(\n text._strokeAttenuation,\n false,\n 'Can get property strokeAttenuation false correctly.'\n );\n});\n"
},
{
"path": "tests/suite/dispose.js",
"content": "/**\n * Tests Two.js dispose() Methods:\n * Comprehensive testing of dispose() functionality across the class hierarchy.\n * Tests memory cleanup, event unbinding, renderer resource cleanup, and DOM element removal.\n */\n\n(function () {\n QUnit.module('Dispose Method');\n\n // ===========================\n // Element Tests (Base Class)\n // ===========================\n\n QUnit.test('Element.dispose - Event Unbinding', function (assert) {\n assert.expect(3);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var rect = two.makeRectangle(100, 100, 50, 50);\n var eventFired = false;\n\n rect.bind('change', function () {\n eventFired = true;\n });\n\n // Verify event fires before dispose\n rect.trigger('change');\n assert.ok(eventFired, 'Event fires before dispose');\n\n // Reset\n eventFired = false;\n\n // Dispose\n rect.dispose();\n\n // Verify event doesn't fire after dispose\n rect.trigger('change');\n assert.ok(!eventFired, 'Event does not fire after dispose');\n\n // Verify _bound flag is false\n assert.ok(!rect._bound, '_bound flag is false after dispose');\n });\n\n QUnit.test('Element.dispose - SVG DOM Cleanup', function (assert) {\n assert.expect(5);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var rect = two.makeRectangle(100, 100, 50, 50);\n var initialType = rect._renderer.type;\n two.update();\n\n // Verify element exists in DOM before dispose\n var elemBefore = two.renderer.domElement.querySelector('#' + rect.id);\n assert.ok(elemBefore, 'Element exists in DOM before dispose');\n assert.ok(rect._renderer.elem, '_renderer.elem exists before dispose');\n\n // Dispose\n rect.dispose();\n\n // Verify element removed from DOM after dispose\n var elemAfter = two.renderer.domElement.querySelector('#' + rect.id);\n assert.ok(!elemAfter, 'Element removed from DOM after dispose');\n assert.ok(!rect._renderer.elem, '_renderer.elem deleted after dispose');\n assert.equal(rect._renderer.type, initialType, 'Renderer type preserved');\n });\n\n QUnit.test('Element.dispose - Renderer Type Preservation', function (assert) {\n assert.expect(2);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var circle = two.makeCircle(100, 100, 25);\n var initialType = circle._renderer.type;\n\n circle.dispose();\n\n assert.equal(\n circle._renderer.type,\n initialType,\n 'Renderer type preserved after dispose'\n );\n assert.ok(circle._renderer.type, 'Renderer type exists after dispose');\n });\n\n QUnit.test('Element.dispose - Returns Instance', function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var line = two.makeLine(0, 0, 100, 100);\n var result = line.dispose();\n\n assert.equal(result, line, 'dispose() returns the instance for chaining');\n });\n\n QUnit.test('Element.dispose - Multiple Dispose Calls', function (assert) {\n assert.expect(2);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var star = two.makeStar(100, 100, 20, 50, 5);\n two.update();\n\n // First dispose\n try {\n star.dispose();\n assert.ok(true, 'First dispose() succeeds');\n } catch (e) {\n assert.ok(false, 'First dispose() threw error: ' + e.message);\n }\n\n // Second dispose\n try {\n star.dispose();\n assert.ok(true, 'Second dispose() succeeds without error');\n } catch (e) {\n assert.ok(false, 'Second dispose() threw error: ' + e.message);\n }\n });\n\n // ===========================\n // Shape Tests\n // ===========================\n\n QUnit.test('Shape.dispose - Translation Vector Unbinding', function (assert) {\n assert.expect(3);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var rect = two.makeRectangle(100, 100, 50, 50);\n var translationEventFired = false;\n\n rect.translation.bind('change', function () {\n translationEventFired = true;\n });\n\n // Verify event fires before dispose\n rect.translation.trigger('change');\n assert.ok(translationEventFired, 'Translation event fires before dispose');\n\n // Reset\n translationEventFired = false;\n\n // Dispose\n rect.dispose();\n\n // Verify event doesn't fire after dispose\n rect.translation.trigger('change');\n assert.ok(\n !translationEventFired,\n 'Translation event does not fire after dispose'\n );\n assert.ok(\n !rect.translation._bound,\n 'Translation Vector _bound flag is false'\n );\n });\n\n QUnit.test('Shape.dispose - Scale Vector Unbinding', function (assert) {\n assert.expect(3);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var circle = two.makeCircle(100, 100, 50);\n\n // Set scale to a Vector (non-uniform scaling)\n circle.scale = new Two.Vector(2, 3);\n\n var scaleEventFired = false;\n\n circle.scale.bind('change', function () {\n scaleEventFired = true;\n });\n\n // Verify event fires before dispose\n circle.scale.trigger('change');\n assert.ok(scaleEventFired, 'Scale event fires before dispose');\n\n // Reset\n scaleEventFired = false;\n\n // Dispose\n circle.dispose();\n\n // Verify event doesn't fire after dispose\n circle.scale.trigger('change');\n assert.ok(!scaleEventFired, 'Scale event does not fire after dispose');\n assert.ok(!circle.scale._bound, 'Scale Vector _bound flag is false');\n });\n\n QUnit.test('Shape.dispose - Inheritance Chain', function (assert) {\n assert.expect(3);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var polygon = two.makePolygon(100, 100, 50, 6);\n var eventFired = false;\n\n polygon.bind('change', function () {\n eventFired = true;\n });\n\n two.update();\n\n // Verify Element dispose behavior (event unbinding)\n polygon.trigger('change');\n assert.ok(eventFired, 'Event fires before dispose');\n\n polygon.dispose();\n\n eventFired = false;\n polygon.trigger('change');\n assert.ok(!eventFired, 'Element.dispose() was called (events unbound)');\n\n // Verify renderer cleanup (Element dispose behavior)\n var elemAfter = two.renderer.domElement.querySelector('#' + polygon.id);\n assert.ok(!elemAfter, 'Element.dispose() was called (DOM cleaned)');\n });\n\n // ===========================\n // Path Tests\n // ===========================\n\n QUnit.test('Path.dispose - Vertices Collection Unbinding', function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var path = two.makePath(0, 0, 100, 0, 100, 100, 0, 100);\n\n // Dispose should unbind vertices collection without error\n try {\n path.dispose();\n assert.ok(\n true,\n 'Path disposes and unbinds vertices collection without error'\n );\n } catch (e) {\n assert.ok(false, 'Path dispose threw error: ' + e.message);\n }\n });\n\n QUnit.test('Path.dispose - Individual Anchor Unbinding', function (assert) {\n assert.expect(9);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var path = two.makePath(0, 0, 100, 0, 100, 100);\n var anchor0EventFired = false;\n var anchor1EventFired = false;\n var anchor2EventFired = false;\n\n path.vertices[0].bind('change', function () {\n anchor0EventFired = true;\n });\n\n path.vertices[1].bind('change', function () {\n anchor1EventFired = true;\n });\n\n path.vertices[2].bind('change', function () {\n anchor2EventFired = true;\n });\n\n // Verify events fire before dispose\n path.vertices[0].trigger('change');\n path.vertices[1].trigger('change');\n path.vertices[2].trigger('change');\n assert.ok(anchor0EventFired, 'Anchor 0 event fires before dispose');\n assert.ok(anchor1EventFired, 'Anchor 1 event fires before dispose');\n assert.ok(anchor2EventFired, 'Anchor 2 event fires before dispose');\n\n // Reset\n anchor0EventFired = false;\n anchor1EventFired = false;\n anchor2EventFired = false;\n\n // Dispose\n path.dispose();\n\n // Verify events don't fire after dispose\n path.vertices[0].trigger('change');\n path.vertices[1].trigger('change');\n path.vertices[2].trigger('change');\n assert.ok(!anchor0EventFired, 'Anchor 0 event does not fire after dispose');\n assert.ok(!anchor1EventFired, 'Anchor 1 event does not fire after dispose');\n assert.ok(!anchor2EventFired, 'Anchor 2 event does not fire after dispose');\n\n // Verify _bound flags\n assert.ok(!path.vertices[0]._bound, 'Anchor 0 _bound flag is false');\n assert.ok(!path.vertices[1]._bound, 'Anchor 1 _bound flag is false');\n assert.ok(!path.vertices[2]._bound, 'Anchor 2 _bound flag is false');\n });\n\n QUnit.test('Path.dispose - Control Point Unbinding', function (assert) {\n assert.expect(7);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var path = two.makePath(0, 0, 100, 0, 100, 100);\n path.curved = true;\n\n var leftEventFired = false;\n var rightEventFired = false;\n\n // Bind to first vertex control points\n path.vertices[0].controls.left.bind('change', function () {\n leftEventFired = true;\n });\n\n path.vertices[0].controls.right.bind('change', function () {\n rightEventFired = true;\n });\n\n // Verify events fire before dispose\n path.vertices[0].controls.left.trigger('change');\n path.vertices[0].controls.right.trigger('change');\n assert.ok(leftEventFired, 'Left control point event fires before dispose');\n assert.ok(\n rightEventFired,\n 'Right control point event fires before dispose'\n );\n\n // Reset\n leftEventFired = false;\n rightEventFired = false;\n\n // Dispose\n path.dispose();\n\n // Verify events don't fire after dispose\n path.vertices[0].controls.left.trigger('change');\n path.vertices[0].controls.right.trigger('change');\n assert.ok(\n !leftEventFired,\n 'Left control point event does not fire after dispose'\n );\n assert.ok(\n !rightEventFired,\n 'Right control point event does not fire after dispose'\n );\n\n // Verify _bound flags\n assert.ok(\n !path.vertices[0].controls.left._bound,\n 'Left control point _bound flag is false'\n );\n assert.ok(\n !path.vertices[0].controls.right._bound,\n 'Right control point _bound flag is false'\n );\n\n // Verify parent anchor also unbound\n assert.ok(!path.vertices[0]._bound, 'Parent anchor _bound flag is false');\n });\n\n QUnit.test(\n 'Path.dispose - Fill Effect Disposal (Gradient)',\n function (assert) {\n assert.expect(2);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var gradient = two.makeLinearGradient(\n 0,\n 0,\n 1,\n 1,\n new Two.Stop(0, 'red'),\n new Two.Stop(1, 'blue')\n );\n\n var rect = two.makeRectangle(100, 100, 100, 100);\n rect.fill = gradient;\n\n two.update();\n\n // Verify gradient has DOM element before dispose\n var gradientElemBefore = two.renderer.domElement.querySelector(\n '#' + gradient.id\n );\n assert.ok(\n gradientElemBefore,\n 'Gradient element exists in DOM before path dispose'\n );\n\n // Dispose path (should call dispose on gradient)\n try {\n rect.dispose();\n assert.ok(true, 'Path disposes with gradient fill without error');\n } catch (e) {\n assert.ok(false, 'Path dispose threw error: ' + e.message);\n }\n }\n );\n\n QUnit.test(\n 'Path.dispose - Stroke Effect Disposal (Texture)',\n function (assert) {\n assert.expect(4);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var texture = new Two.Texture('./images/canvas/line@2x.png');\n var circle = two.makeCircle(100, 100, 50);\n circle.stroke = texture;\n circle.noFill();\n\n two.update();\n\n // Bind event to texture\n var textureEventFired = false;\n texture.bind('change', function () {\n textureEventFired = true;\n });\n\n texture.trigger('change');\n assert.ok(textureEventFired, 'Texture event fires before path dispose');\n\n textureEventFired = false;\n\n // Verify texture has renderer\n assert.ok(texture._renderer, 'Texture has _renderer before dispose');\n\n // Dispose path (should dispose texture)\n circle.dispose();\n\n // Verify texture disposed\n texture.trigger('change');\n assert.ok(\n !textureEventFired,\n 'Texture event does not fire after path dispose'\n );\n assert.ok(\n texture._renderer.type,\n 'Texture renderer type preserved after dispose'\n );\n }\n );\n\n QUnit.test('Path.dispose - String Fill/Stroke', function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var path = two.makePath(0, 0, 100, 0, 100, 100);\n path.fill = 'red';\n path.stroke = 'blue';\n\n // Dispose path with string fill/stroke (no effect objects)\n try {\n path.dispose();\n assert.ok(true, 'Path with string fill/stroke disposes without error');\n } catch (e) {\n assert.ok(\n false,\n 'Path with string fill/stroke threw error: ' + e.message\n );\n }\n });\n\n QUnit.test('Path.dispose - Incomplete Collection', function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var path = two.makePath(0, 0, 100, 0, 100, 100);\n\n // Simulate incomplete collection by removing unbind method\n var originalUnbind = path.vertices.unbind;\n delete path.vertices.unbind;\n\n // Dispose should handle incomplete collection gracefully\n try {\n path.dispose();\n assert.ok(\n true,\n 'Path disposes without error when vertices collection has no unbind method'\n );\n } catch (e) {\n assert.ok(\n false,\n 'Path dispose threw error with incomplete collection: ' + e.message\n );\n }\n\n // Restore for cleanup\n path.vertices.unbind = originalUnbind;\n });\n\n // ===========================\n // Group Tests\n // ===========================\n\n QUnit.test('Group.dispose - Recursive Child Disposal', function (assert) {\n assert.expect(7);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var group = two.makeGroup();\n var child1 = two.makeCircle(50, 50, 25);\n var child2 = two.makeRectangle(150, 150, 50, 50);\n\n group.add(child1, child2);\n\n var child1EventFired = false;\n var child2EventFired = false;\n\n child1.bind('change', function () {\n child1EventFired = true;\n });\n\n child2.bind('change', function () {\n child2EventFired = true;\n });\n\n // Verify events fire before dispose\n child1.trigger('change');\n child2.trigger('change');\n assert.ok(child1EventFired, 'Child1 event fires before group dispose');\n assert.ok(child2EventFired, 'Child2 event fires before group dispose');\n\n child1EventFired = false;\n child2EventFired = false;\n\n two.update();\n\n // Dispose group (should recursively dispose children)\n group.dispose();\n\n // Verify children disposed\n child1.trigger('change');\n child2.trigger('change');\n assert.ok(\n !child1EventFired,\n 'Child1 event does not fire after group dispose'\n );\n assert.ok(\n !child2EventFired,\n 'Child2 event does not fire after group dispose'\n );\n\n // Verify children DOM elements removed\n var child1ElemAfter = two.renderer.domElement.querySelector(\n '#' + child1.id\n );\n var child2ElemAfter = two.renderer.domElement.querySelector(\n '#' + child2.id\n );\n assert.ok(!child1ElemAfter, 'Child1 DOM element removed');\n assert.ok(!child2ElemAfter, 'Child2 DOM element removed');\n\n // Verify group DOM element removed\n var groupElemAfter = two.renderer.domElement.querySelector('#' + group.id);\n assert.ok(!groupElemAfter, 'Group DOM element removed');\n });\n\n QUnit.test('Group.dispose - Nested Group Disposal', function (assert) {\n assert.expect(9);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var rootGroup = two.makeGroup();\n var subGroup1 = two.makeGroup();\n var subGroup2 = two.makeGroup();\n var leaf1 = two.makeCircle(50, 50, 20);\n var leaf2 = two.makeRectangle(150, 50, 40, 40);\n var leaf3 = two.makeLine(200, 50, 250, 100);\n\n subGroup1.add(leaf1, leaf2);\n subGroup2.add(leaf3);\n rootGroup.add(subGroup1, subGroup2);\n\n // Bind events at all levels\n var leaf1EventFired = false;\n var leaf2EventFired = false;\n var leaf3EventFired = false;\n\n leaf1.bind('change', function () {\n leaf1EventFired = true;\n });\n leaf2.bind('change', function () {\n leaf2EventFired = true;\n });\n leaf3.bind('change', function () {\n leaf3EventFired = true;\n });\n\n // Verify events fire before dispose\n leaf1.trigger('change');\n leaf2.trigger('change');\n leaf3.trigger('change');\n assert.ok(leaf1EventFired, 'Leaf1 event fires before dispose');\n assert.ok(leaf2EventFired, 'Leaf2 event fires before dispose');\n assert.ok(leaf3EventFired, 'Leaf3 event fires before dispose');\n\n leaf1EventFired = false;\n leaf2EventFired = false;\n leaf3EventFired = false;\n\n two.update();\n\n // Dispose root group (should recursively dispose entire tree)\n rootGroup.dispose();\n\n // Verify all events unbound\n leaf1.trigger('change');\n leaf2.trigger('change');\n leaf3.trigger('change');\n assert.ok(!leaf1EventFired, 'Leaf1 event does not fire after root dispose');\n assert.ok(!leaf2EventFired, 'Leaf2 event does not fire after root dispose');\n assert.ok(!leaf3EventFired, 'Leaf3 event does not fire after root dispose');\n\n // Verify all DOM elements removed\n var leaf1ElemAfter = two.renderer.domElement.querySelector('#' + leaf1.id);\n var leaf2ElemAfter = two.renderer.domElement.querySelector('#' + leaf2.id);\n var leaf3ElemAfter = two.renderer.domElement.querySelector('#' + leaf3.id);\n assert.ok(!leaf1ElemAfter, 'Leaf1 DOM element removed');\n assert.ok(!leaf2ElemAfter, 'Leaf2 DOM element removed');\n assert.ok(!leaf3ElemAfter, 'Leaf3 DOM element removed');\n });\n\n QUnit.test(\n 'Group.dispose - Children Collection Unbinding',\n function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var group = two.makeGroup();\n var child = two.makeCircle(50, 50, 25);\n group.add(child);\n\n // Dispose should unbind children collection without error\n try {\n group.dispose();\n assert.ok(\n true,\n 'Group disposes and unbinds children collection without error'\n );\n } catch (e) {\n assert.ok(false, 'Group dispose threw error: ' + e.message);\n }\n }\n );\n\n QUnit.test('Group.dispose - Empty Group', function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var emptyGroup = two.makeGroup();\n\n // Dispose empty group\n try {\n emptyGroup.dispose();\n assert.ok(true, 'Empty group disposes without error');\n } catch (e) {\n assert.ok(false, 'Empty group dispose threw error: ' + e.message);\n }\n });\n\n // ===========================\n // Text Tests\n // ===========================\n\n QUnit.test('Text.dispose - Fill Effect Disposal', function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var gradient = two.makeLinearGradient(\n 0,\n 0,\n 1,\n 1,\n new Two.Stop(0, '#ff0000'),\n new Two.Stop(1, '#0000ff')\n );\n\n var text = two.makeText('Hello', 100, 100);\n text.fill = gradient;\n\n two.update();\n\n // Dispose text (should dispose gradient)\n try {\n text.dispose();\n assert.ok(true, 'Text disposes with gradient fill without error');\n } catch (e) {\n assert.ok(false, 'Text dispose threw error: ' + e.message);\n }\n });\n\n QUnit.test('Text.dispose - Stroke Effect Disposal', function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var gradient = two.makeRadialGradient(\n 0.5,\n 0.5,\n 1,\n new Two.Stop(0, 'white'),\n new Two.Stop(1, 'black')\n );\n\n var text = two.makeText('World', 200, 100);\n text.stroke = gradient;\n text.linewidth = 2;\n\n two.update();\n\n // Dispose text (should dispose gradient)\n try {\n text.dispose();\n assert.ok(true, 'Text disposes with gradient stroke without error');\n } catch (e) {\n assert.ok(false, 'Text dispose threw error: ' + e.message);\n }\n });\n\n // ===========================\n // Points Tests\n // ===========================\n\n QUnit.test(\n 'Points.dispose - Vertices Collection Unbinding',\n function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var points = two.makePoints([\n new Two.Vector(0, 0),\n new Two.Vector(100, 50),\n new Two.Vector(50, 100),\n ]);\n\n // Dispose should unbind vertices collection without error\n try {\n points.dispose();\n assert.ok(\n true,\n 'Points disposes and unbinds vertices collection without error'\n );\n } catch (e) {\n assert.ok(false, 'Points dispose threw error: ' + e.message);\n }\n }\n );\n\n QUnit.test('Points.dispose - Individual Vector Unbinding', function (assert) {\n assert.expect(7);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var points = two.makePoints([\n new Two.Vector(0, 0),\n new Two.Vector(100, 50),\n new Two.Vector(50, 100),\n ]);\n\n var vector0EventFired = false;\n var vector1EventFired = false;\n var vector2EventFired = false;\n\n points.vertices[0].bind('change', function () {\n vector0EventFired = true;\n });\n\n points.vertices[1].bind('change', function () {\n vector1EventFired = true;\n });\n\n points.vertices[2].bind('change', function () {\n vector2EventFired = true;\n });\n\n // Verify events fire before dispose\n points.vertices[0].trigger('change');\n points.vertices[1].trigger('change');\n points.vertices[2].trigger('change');\n assert.ok(vector0EventFired, 'Vector 0 event fires before dispose');\n assert.ok(vector1EventFired, 'Vector 1 event fires before dispose');\n assert.ok(vector2EventFired, 'Vector 2 event fires before dispose');\n\n // Reset\n vector0EventFired = false;\n vector1EventFired = false;\n vector2EventFired = false;\n\n // Dispose\n points.dispose();\n\n // Verify events don't fire after dispose\n points.vertices[0].trigger('change');\n points.vertices[1].trigger('change');\n points.vertices[2].trigger('change');\n assert.ok(!vector0EventFired, 'Vector 0 event does not fire after dispose');\n assert.ok(!vector1EventFired, 'Vector 1 event does not fire after dispose');\n assert.ok(!vector2EventFired, 'Vector 2 event does not fire after dispose');\n\n // Verify _bound flag\n assert.ok(!points.vertices[0]._bound, 'Vector 0 _bound flag is false');\n });\n\n QUnit.test('Points.dispose - Fill/Stroke Effect Disposal', function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var fillGradient = two.makeLinearGradient(\n 0,\n 0,\n 1,\n 1,\n new Two.Stop(0, 'red'),\n new Two.Stop(1, 'yellow')\n );\n\n var strokeGradient = two.makeLinearGradient(\n 0,\n 0,\n 1,\n 0,\n new Two.Stop(0, 'blue'),\n new Two.Stop(1, 'green')\n );\n\n var points = two.makePoints([\n new Two.Vector(50, 50),\n new Two.Vector(150, 50),\n new Two.Vector(100, 150),\n ]);\n\n points.fill = fillGradient;\n points.stroke = strokeGradient;\n\n two.update();\n\n // Dispose points (should dispose both gradients)\n try {\n points.dispose();\n assert.ok(\n true,\n 'Points disposes with gradient fill/stroke without error'\n );\n } catch (e) {\n assert.ok(false, 'Points dispose threw error: ' + e.message);\n }\n });\n\n // ===========================\n // Gradient Tests\n // ===========================\n\n QUnit.test('Gradient.dispose - SVG Element Removal', function (assert) {\n assert.expect(3);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var gradient = two.makeLinearGradient(\n 0,\n 0,\n 1,\n 1,\n new Two.Stop(0, '#ff0000'),\n new Two.Stop(1, '#0000ff')\n );\n\n var rect = two.makeRectangle(100, 100, 100, 100);\n rect.fill = gradient;\n\n two.update();\n\n // Verify gradient has DOM element\n var gradientElemBefore = two.renderer.domElement.querySelector(\n '#' + gradient.id\n );\n assert.ok(\n gradientElemBefore,\n 'Gradient element exists in DOM before dispose'\n );\n assert.ok(\n gradient._renderer.elem,\n 'Gradient has _renderer.elem before dispose'\n );\n\n // Dispose gradient directly\n gradient.dispose();\n\n // Verify gradient DOM element removed\n var gradientElemAfter = two.renderer.domElement.querySelector(\n '#' + gradient.id\n );\n assert.ok(\n !gradientElemAfter,\n 'Gradient element removed from DOM after dispose'\n );\n });\n\n QUnit.test('Gradient.dispose - Direct Disposal', function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var gradient = two.makeRadialGradient(\n 0.5,\n 0.5,\n 1,\n new Two.Stop(0, 'white'),\n new Two.Stop(1, 'black')\n );\n\n // Dispose gradient not attached to any shape\n try {\n gradient.dispose();\n assert.ok(\n true,\n 'Gradient disposes without error when not attached to shape'\n );\n } catch (e) {\n assert.ok(false, 'Gradient dispose threw error: ' + e.message);\n }\n });\n\n QUnit.test('Gradient.dispose - Event Unbinding', function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var gradient = two.makeLinearGradient(\n 0,\n 0,\n 1,\n 1,\n new Two.Stop(0, 'red'),\n new Two.Stop(1, 'blue')\n );\n\n // Dispose gradient directly\n try {\n gradient.dispose();\n assert.ok(true, 'Gradient disposes without error');\n } catch (e) {\n assert.ok(false, 'Gradient dispose threw error: ' + e.message);\n }\n });\n\n // ===========================\n // Texture Tests\n // ===========================\n\n QUnit.test('Texture.dispose - SVG Element Removal', function (assert) {\n assert.expect(4);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var texture = new Two.Texture('./images/canvas/line@2x.png');\n var rect = two.makeRectangle(100, 100, 100, 100);\n rect.fill = texture;\n\n two.update();\n\n // Wait for texture to render\n var textureElemBefore = two.renderer.domElement.querySelector(\n '#' + texture.id\n );\n var hasElemBefore = !!texture._renderer.elem;\n assert.ok(\n hasElemBefore || !textureElemBefore,\n 'Texture rendering state tracked'\n );\n\n // Dispose texture directly\n texture.dispose();\n\n // Verify texture DOM element removed\n var textureElemAfter = two.renderer.domElement.querySelector(\n '#' + texture.id\n );\n assert.ok(\n !textureElemAfter,\n 'Texture element removed from DOM after dispose'\n );\n assert.ok(\n !texture._renderer.elem,\n 'Texture _renderer.elem deleted after dispose'\n );\n assert.ok(texture._renderer.type, 'Texture renderer type preserved');\n });\n\n QUnit.test('Texture.dispose - Parent Dispose Called', function (assert) {\n assert.expect(3);\n\n // eslint-disable-next-line no-unused-vars\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var texture = new Two.Texture('./images/canvas/line@2x.png');\n\n // Bind event to texture\n var eventFired = false;\n texture.bind('change', function () {\n eventFired = true;\n });\n\n texture.trigger('change');\n assert.ok(eventFired, 'Texture event fires before dispose');\n\n eventFired = false;\n\n // Dispose (should call Element.dispose via inheritance)\n texture.dispose();\n\n // Verify Element.dispose was called (events unbound)\n texture.trigger('change');\n assert.ok(\n !eventFired,\n 'Texture event does not fire after dispose (Element.dispose called)'\n );\n assert.ok(!texture._bound, 'Texture _bound flag is false');\n });\n\n QUnit.test('Texture.dispose - Event Unbinding', function (assert) {\n assert.expect(3);\n\n // eslint-disable-next-line no-unused-vars\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var texture = new Two.Texture('./images/canvas/line@2x.png');\n var eventFired = false;\n\n texture.bind('change', function () {\n eventFired = true;\n });\n\n // Verify event fires before dispose\n texture.trigger('change');\n assert.ok(eventFired, 'Texture event fires before dispose');\n\n // Reset\n eventFired = false;\n\n // Dispose\n texture.dispose();\n\n // Verify event doesn't fire after dispose\n texture.trigger('change');\n assert.ok(!eventFired, 'Texture event does not fire after dispose');\n assert.ok(!texture._bound, 'Texture _bound flag is false');\n });\n\n // ===========================\n // Sprite Tests\n // ===========================\n\n QUnit.test('Sprite.dispose - Animation Stop', function (assert) {\n assert.expect(2);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var texture = new Two.Texture('./images/canvas/line@2x.png');\n var sprite = two.makeSprite(texture, 100, 100, 4, 1);\n sprite.play();\n\n assert.ok(sprite._playing, 'Sprite is playing before dispose');\n\n // Dispose\n sprite.dispose();\n\n // Verify animation stopped\n assert.ok(!sprite._playing, 'Sprite is not playing after dispose');\n });\n\n QUnit.test('Sprite.dispose - Callback Cleanup', function (assert) {\n assert.expect(2);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var texture = new Two.Texture('./images/canvas/line@2x.png');\n var sprite = two.makeSprite(texture, 100, 100, 4, 1);\n\n // eslint-disable-next-line no-unused-vars\n var callbackFired = false;\n sprite._onLastFrame = function () {\n callbackFired = true;\n };\n\n assert.ok(\n sprite._onLastFrame !== null,\n 'Sprite has _onLastFrame callback before dispose'\n );\n\n // Dispose\n sprite.dispose();\n\n // Verify callback cleared\n assert.ok(\n sprite._onLastFrame === null,\n 'Sprite _onLastFrame callback is null after dispose'\n );\n });\n\n QUnit.test('Sprite.dispose - Timing Reset', function (assert) {\n assert.expect(2);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var texture = new Two.Texture('./images/canvas/line@2x.png');\n var sprite = two.makeSprite(texture, 100, 100, 4, 1);\n sprite.play();\n\n // Manually set start time to simulate animation running\n sprite._startTime = Date.now();\n\n assert.ok(sprite._startTime > 0, 'Sprite has _startTime before dispose');\n\n // Dispose\n sprite.dispose();\n\n // Verify timing reset\n assert.equal(sprite._startTime, 0, 'Sprite _startTime is 0 after dispose');\n });\n\n QUnit.test('Sprite.dispose - Texture Disposal', function (assert) {\n assert.expect(3);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var texture = new Two.Texture('./images/canvas/line@2x.png');\n var sprite = two.makeSprite(texture, 100, 100, 4, 1);\n\n // Bind event to texture\n var textureEventFired = false;\n texture.bind('change', function () {\n textureEventFired = true;\n });\n\n texture.trigger('change');\n assert.ok(textureEventFired, 'Texture event fires before sprite dispose');\n\n textureEventFired = false;\n\n // Dispose sprite (should dispose texture)\n sprite.dispose();\n\n // Verify texture disposed\n texture.trigger('change');\n assert.ok(\n !textureEventFired,\n 'Texture event does not fire after sprite dispose'\n );\n assert.ok(!texture._bound, 'Texture _bound flag is false');\n });\n\n // ===========================\n // Image Tests\n // ===========================\n\n QUnit.test('Image.dispose - Texture Disposal', function (assert) {\n assert.expect(3);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var image = two.makeImage('./images/canvas/line@2x.png', 100, 100);\n\n // Get the texture\n var texture = image.texture;\n\n // Bind event to texture\n var textureEventFired = false;\n texture.bind('change', function () {\n textureEventFired = true;\n });\n\n texture.trigger('change');\n assert.ok(textureEventFired, 'Texture event fires before image dispose');\n\n textureEventFired = false;\n\n // Dispose image (should dispose texture)\n image.dispose();\n\n // Verify texture disposed\n texture.trigger('change');\n assert.ok(\n !textureEventFired,\n 'Texture event does not fire after image dispose'\n );\n assert.ok(!texture._bound, 'Texture _bound flag is false');\n });\n\n QUnit.test('Image.dispose - Inheritance Chain', function (assert) {\n assert.expect(4);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var image = two.makeImage('./images/canvas/line@2x.png', 100, 100);\n\n // Bind event to image\n var eventFired = false;\n image.bind('change', function () {\n eventFired = true;\n });\n\n image.trigger('change');\n assert.ok(eventFired, 'Image event fires before dispose');\n\n eventFired = false;\n\n two.update();\n\n // Dispose image\n image.dispose();\n\n // Verify Element/Shape/Path dispose called (events unbound)\n image.trigger('change');\n assert.ok(!eventFired, 'Image event does not fire after dispose');\n\n // Verify Rectangle/Path dispose called (vertices unbound)\n assert.ok(\n !image.vertices._bound,\n 'Image vertices collection _bound flag is false'\n );\n\n // Verify DOM cleanup\n var imageElemAfter = two.renderer.domElement.querySelector('#' + image.id);\n assert.ok(!imageElemAfter, 'Image DOM element removed');\n });\n\n // ===========================\n // ImageSequence Tests\n // ===========================\n\n QUnit.test('ImageSequence.dispose - Animation Stop', function (assert) {\n assert.expect(2);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var sequence = two.makeImageSequence(\n ['./images/canvas/line@2x.png', './images/canvas/line@2x.png'],\n 100,\n 100\n );\n\n sequence.play();\n\n assert.ok(sequence._playing, 'ImageSequence is playing before dispose');\n\n // Dispose\n sequence.dispose();\n\n // Verify animation stopped\n assert.ok(!sequence._playing, 'ImageSequence is not playing after dispose');\n });\n\n QUnit.test(\n 'ImageSequence.dispose - Textures Collection Unbinding',\n function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var sequence = two.makeImageSequence(\n ['./images/canvas/line@2x.png', './images/canvas/line@2x.png'],\n 100,\n 100\n );\n\n // Dispose should unbind textures collection without error\n try {\n sequence.dispose();\n assert.ok(\n true,\n 'ImageSequence disposes and unbinds textures collection without error'\n );\n } catch (e) {\n assert.ok(false, 'ImageSequence dispose threw error: ' + e.message);\n }\n }\n );\n\n QUnit.test(\n 'ImageSequence.dispose - Individual Texture Disposal',\n function (assert) {\n assert.expect(5);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var sequence = two.makeImageSequence(\n ['./images/canvas/line@2x.png', './images/canvas/line@2x.png'],\n 100,\n 100\n );\n\n var texture0EventFired = false;\n var texture1EventFired = false;\n\n sequence.textures[0].bind('change', function () {\n texture0EventFired = true;\n });\n\n sequence.textures[1].bind('change', function () {\n texture1EventFired = true;\n });\n\n // Verify events fire before dispose\n sequence.textures[0].trigger('change');\n sequence.textures[1].trigger('change');\n assert.ok(texture0EventFired, 'Texture 0 event fires before dispose');\n assert.ok(texture1EventFired, 'Texture 1 event fires before dispose');\n\n // Reset\n texture0EventFired = false;\n texture1EventFired = false;\n\n // Dispose sequence (should dispose all textures)\n sequence.dispose();\n\n // Verify textures disposed\n sequence.textures[0].trigger('change');\n sequence.textures[1].trigger('change');\n assert.ok(\n !texture0EventFired,\n 'Texture 0 event does not fire after sequence dispose'\n );\n assert.ok(\n !texture1EventFired,\n 'Texture 1 event does not fire after sequence dispose'\n );\n assert.ok(!sequence.textures[0]._bound, 'Texture 0 _bound flag is false');\n }\n );\n\n QUnit.test(\n 'ImageSequence.dispose - Incomplete Collection',\n function (assert) {\n assert.expect(1);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400,\n }).appendTo(document.body);\n\n var sequence = two.makeImageSequence(\n ['./images/canvas/line@2x.png', './images/canvas/line@2x.png'],\n 100,\n 100\n );\n\n // Simulate incomplete collection by removing unbind method\n var originalUnbind = sequence.textures.unbind;\n delete sequence.textures.unbind;\n\n // Dispose should handle incomplete collection gracefully\n try {\n sequence.dispose();\n assert.ok(\n true,\n 'ImageSequence disposes without error when textures collection has no unbind method'\n );\n } catch (e) {\n assert.ok(\n false,\n 'ImageSequence dispose threw error with incomplete collection: ' +\n e.message\n );\n }\n\n // Restore for cleanup\n sequence.textures.unbind = originalUnbind;\n }\n );\n})();\n"
},
{
"path": "tests/suite/hit-test.js",
"content": "QUnit.module('Hit Testing');\n\nQUnit.test('Shape.contains evaluates fill and stroke geometry', function (assert) {\n assert.expect(8);\n\n var two = new Two({ width: 400, height: 400, autostart: false });\n\n var circle = new Two.Circle(100, 100, 20);\n two.add(circle);\n two.update();\n\n assert.ok(circle.contains(100, 100), 'Circle contains its center point.');\n assert.notOk(circle.contains(140, 100), 'Circle excludes distant point.');\n\n var line = new Two.Line(0, 0, 100, 0);\n line.linewidth = 12;\n two.add(line);\n two.update();\n\n assert.ok(line.contains(50, 4), 'Line stroke hit succeeds within tolerance.');\n assert.notOk(line.contains(50, 40), 'Line stroke rejects far point.');\n\n var rect = new Two.Rectangle(150, 150, 40, 40);\n rect.rotation = Math.PI / 4;\n two.add(rect);\n two.update();\n\n assert.ok(rect.contains(150, 150), 'Rotated rectangle contains its center.');\n assert.notOk(rect.contains(200, 150), 'Rotated rectangle excludes outside point.');\n\n var invisible = new Two.Circle(200, 200, 10);\n invisible.visible = false;\n two.add(invisible);\n two.update();\n\n assert.notOk(\n invisible.contains(200, 200),\n 'Invisible shapes bypass contains unless ignoreVisibility is set.'\n );\n assert.ok(\n invisible.contains(200, 200, { ignoreVisibility: true }),\n 'ignoreVisibility option bypasses visibility check.'\n );\n});\n\nQUnit.test('Two#getShapesAtPoint respects options', function (assert) {\n assert.expect(6);\n\n var two = new Two({ width: 400, height: 400, autostart: false });\n\n var circle = new Two.Circle(100, 100, 20);\n two.add(circle);\n\n var line = new Two.Line(0, 0, 100, 0);\n line.linewidth = 12;\n two.add(line);\n\n var rect = new Two.Rectangle(150, 150, 40, 40);\n rect.rotation = Math.PI / 4;\n two.add(rect);\n\n var hidden = new Two.Circle(200, 200, 10);\n hidden.visible = false;\n two.add(hidden);\n\n two.update();\n\n var circleHits = two.getShapesAtPoint(100, 100);\n assert.ok(circleHits.indexOf(circle) > -1, 'Circle reported at its center.');\n\n var sceneHits = two.scene.getShapesAtPoint(100, 100);\n assert.ok(\n sceneHits.indexOf(circle) > -1,\n 'Scene group reports circle at its center.'\n );\n\n var deepest = two.getShapesAtPoint(50, 4, { mode: 'deepest' });\n assert.deepEqual(deepest, [line], 'Deepest mode returns top-most shape only.');\n\n var visibleHits = two.getShapesAtPoint(200, 200);\n assert.strictEqual(\n visibleHits.indexOf(hidden),\n -1,\n 'Hidden shapes excluded when visibleOnly is true.'\n );\n\n var allHits = two.getShapesAtPoint(200, 200, { visibleOnly: false });\n assert.ok(\n allHits.indexOf(hidden) > -1,\n 'Hidden shapes included when visibleOnly is false.'\n );\n\n var sceneAll = two.scene.getShapesAtPoint(200, 200, {\n visibleOnly: false,\n });\n assert.ok(\n sceneAll.indexOf(hidden) > -1,\n 'Scene group honours visibleOnly option.'\n );\n});\n"
},
{
"path": "tests/suite/release.js",
"content": "/**\n * Tests Two.js release() Method Enhanced Functionality:\n * + Basic release functionality\n * + SVG DOM element cleanup\n * + Canvas renderer cleanup \n * + WebGL resource cleanup\n * + Memory leak prevention\n * + Recursive cleanup of nested objects\n */\n\n(function () {\n QUnit.module('Release Method');\n\n QUnit.test('Two.release - Basic Functionality', function (assert) {\n assert.expect(3);\n\n var two = new Two({\n width: 400,\n height: 400\n });\n\n var rect = two.makeRectangle(100, 100, 50, 50);\n \n // Test release method exists\n assert.ok(typeof two.release === 'function', 'Two.release method exists');\n \n // Test release returns the object\n var result = two.release(rect);\n assert.equal(result, rect, 'Two.release returns the released object');\n \n // Test release works with undefined (the default case)\n var undefinedResult = two.release();\n assert.ok(undefinedResult !== null, 'Two.release handles undefined gracefully by releasing scene');\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('Two.release - SVG DOM Element Cleanup', function (assert) {\n assert.expect(6);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400\n }).appendTo(document.body);\n\n var rect = two.makeRectangle(100, 100, 50, 50);\n var circle = two.makeCircle(200, 200, 25);\n \n two.update();\n \n // Verify elements exist in DOM\n var rectElem = two.renderer.domElement.querySelector('#' + rect.id);\n var circleElem = two.renderer.domElement.querySelector('#' + circle.id);\n \n assert.ok(rectElem, 'Rectangle SVG element exists in DOM before release');\n assert.ok(circleElem, 'Circle SVG element exists in DOM before release');\n assert.ok(rect._renderer.elem, 'Rectangle has _renderer.elem before release');\n assert.ok(circle._renderer.elem, 'Circle has _renderer.elem before release');\n \n // Release objects\n two.release(rect);\n two.release(circle);\n \n // Verify elements are removed from DOM\n var rectElemAfter = two.renderer.domElement.querySelector('#' + rect.id);\n var circleElemAfter = two.renderer.domElement.querySelector('#' + circle.id);\n \n assert.ok(!rectElemAfter, 'Rectangle SVG element removed from DOM after release');\n assert.ok(!circleElemAfter, 'Circle SVG element removed from DOM after release');\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('Two.release - SVG Gradient Cleanup', function (assert) {\n assert.expect(4);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400\n }).appendTo(document.body);\n\n var gradient = two.makeLinearGradient(0, 0, 1, 1,\n new Two.Stop(0, 'red'),\n new Two.Stop(1, 'blue')\n );\n \n var rect = two.makeRectangle(100, 100, 50, 50);\n rect.fill = gradient;\n \n two.update();\n \n // Verify gradient exists in DOM\n var gradientElem = two.renderer.domElement.querySelector('#' + gradient.id);\n assert.ok(gradientElem, 'Gradient SVG element exists in DOM before release');\n assert.ok(gradient._renderer.elem, 'Gradient has _renderer.elem before release');\n \n // Release gradient\n two.release(gradient);\n \n // Verify gradient is removed from DOM\n var gradientElemAfter = two.renderer.domElement.querySelector('#' + gradient.id);\n assert.ok(!gradientElemAfter, 'Gradient SVG element removed from DOM after release');\n assert.ok(!gradient._renderer.elem, 'Gradient _renderer.elem is cleared after release');\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('Two.release - Canvas Renderer Cleanup', function (assert) {\n assert.expect(3);\n\n var two = new Two({\n type: Two.Types.canvas,\n width: 400,\n height: 400\n }).appendTo(document.body);\n\n var rect = two.makeRectangle(100, 100, 50, 50);\n \n two.update();\n \n // Verify renderer context exists\n assert.ok(two.renderer.ctx, 'Canvas renderer has context');\n assert.ok(rect._renderer, 'Rectangle has _renderer object');\n \n // Release object\n two.release(rect);\n \n // Verify cleanup (context references should be cleared if they existed)\n // Canvas cleanup mainly involves clearing cached references\n assert.ok(true, 'Canvas release completed without errors');\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('Two.release - WebGL Resource Cleanup', function (assert) {\n assert.expect(5);\n\n var two = new Two({\n type: Two.Types.webgl,\n width: 400,\n height: 400\n }).appendTo(document.body);\n\n var rect = two.makeRectangle(100, 100, 50, 50);\n \n two.update();\n \n // Verify WebGL context and basic setup\n var gl = two.renderer.ctx;\n assert.ok(gl, 'WebGL context exists');\n assert.ok(rect._renderer, 'Rectangle has _renderer object');\n \n // Test that we can release WebGL objects without errors\n var releaseResult = two.release(rect);\n assert.equal(releaseResult, rect, 'WebGL object release returns the object');\n \n // Test effect cleanup - manually set an effect and verify it gets cleared\n var rect2 = two.makeRectangle(150, 150, 50, 50);\n rect2._renderer.effect = 'test-effect';\n two.release(rect2);\n assert.ok(!rect2._renderer.effect, 'WebGL effect cleared after release');\n \n assert.ok(true, 'WebGL release completed without errors');\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('Two.release - Recursive Group Cleanup', function (assert) {\n assert.expect(8);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400\n }).appendTo(document.body);\n\n var group = two.makeGroup();\n var rect1 = two.makeRectangle(100, 100, 50, 50);\n var rect2 = two.makeRectangle(200, 200, 50, 50);\n var subGroup = two.makeGroup();\n var circle = two.makeCircle(150, 150, 25);\n \n // Build hierarchy\n group.add(rect1, rect2, subGroup);\n subGroup.add(circle);\n \n two.update();\n \n // Verify all elements exist in DOM\n assert.ok(two.renderer.domElement.querySelector('#' + group.id), 'Group exists in DOM');\n assert.ok(two.renderer.domElement.querySelector('#' + rect1.id), 'Rect1 exists in DOM');\n assert.ok(two.renderer.domElement.querySelector('#' + rect2.id), 'Rect2 exists in DOM');\n assert.ok(two.renderer.domElement.querySelector('#' + subGroup.id), 'SubGroup exists in DOM');\n assert.ok(two.renderer.domElement.querySelector('#' + circle.id), 'Circle exists in DOM');\n \n // Release the group (should recursively clean up children)\n two.release(group);\n \n // Verify all elements are removed from DOM\n assert.ok(!two.renderer.domElement.querySelector('#' + rect1.id), 'Rect1 removed from DOM');\n assert.ok(!two.renderer.domElement.querySelector('#' + rect2.id), 'Rect2 removed from DOM');\n assert.ok(!two.renderer.domElement.querySelector('#' + circle.id), 'Circle removed from DOM');\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('Two.release - Event Unbinding', function (assert) {\n assert.expect(4);\n\n var two = new Two({\n width: 400,\n height: 400\n });\n\n var rect = two.makeRectangle(100, 100, 50, 50);\n var eventFired = false;\n \n // Bind event listener\n rect.bind('change', function() {\n eventFired = true;\n });\n \n // Test event fires before release\n rect.trigger('change');\n assert.ok(eventFired, 'Event fires before release');\n \n // Reset flag\n eventFired = false;\n \n // Release object\n two.release(rect);\n \n // Test event doesn't fire after release\n rect.trigger('change');\n assert.ok(!eventFired, 'Event does not fire after release');\n \n // Test vertex event unbinding\n var path = two.makePath(0, 0, 100, 0, 100, 100, 0, 100);\n var vertexEventFired = false;\n \n if (path.vertices && path.vertices[0]) {\n path.vertices[0].bind('change', function() {\n vertexEventFired = true;\n });\n \n path.vertices[0].trigger('change');\n assert.ok(vertexEventFired, 'Vertex event fires before release');\n \n vertexEventFired = false;\n two.release(path);\n \n path.vertices[0].trigger('change');\n assert.ok(!vertexEventFired, 'Vertex event does not fire after release');\n } else {\n assert.ok(true, 'Path has no vertices to test');\n assert.ok(true, 'Skipping vertex event test');\n }\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('Two.release - Effects Cleanup', function (assert) {\n assert.expect(6);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400\n }).appendTo(document.body);\n\n var gradient = two.makeLinearGradient(0, 0, 1, 1,\n new Two.Stop(0, 'red'),\n new Two.Stop(1, 'blue')\n );\n \n var rect = two.makeRectangle(100, 100, 50, 50);\n rect.fill = gradient;\n rect.stroke = gradient;\n \n var eventFired = false;\n gradient.bind('change', function() {\n eventFired = true;\n });\n \n two.update();\n \n // Test effects are bound\n gradient.trigger('change');\n assert.ok(eventFired, 'Gradient event fires before release');\n \n eventFired = false;\n \n // Release object (should clean up effects)\n two.release(rect);\n \n // Test that gradient events are unbound for fill\n if (rect.fill && typeof rect.fill.unbind === 'function') {\n gradient.trigger('change');\n assert.ok(!eventFired, 'Fill gradient event does not fire after release');\n } else {\n assert.ok(true, 'Fill gradient already unbound or not applicable');\n }\n \n // Test that gradient events are unbound for stroke \n if (rect.stroke && typeof rect.stroke.unbind === 'function') {\n gradient.trigger('change');\n assert.ok(!eventFired, 'Stroke gradient event does not fire after release');\n } else {\n assert.ok(true, 'Stroke gradient already unbound or not applicable');\n }\n \n // Test gradient disposal\n var gradientElem = two.renderer.domElement.querySelector('#' + gradient.id);\n if (gradientElem) {\n assert.ok(gradientElem, 'Gradient still exists in DOM (expected for shared effects)');\n } else {\n assert.ok(true, 'Gradient removed from DOM');\n }\n \n // Release the gradient itself\n two.release(gradient);\n var gradientElemAfter = two.renderer.domElement.querySelector('#' + gradient.id);\n assert.ok(!gradientElemAfter, 'Gradient removed from DOM after direct release');\n \n assert.ok(true, 'Effects cleanup completed without errors');\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n QUnit.test('Two.release - Scene Release', function (assert) {\n assert.expect(4);\n\n var two = new Two({\n type: Two.Types.svg,\n width: 400,\n height: 400\n }).appendTo(document.body);\n\n var rect = two.makeRectangle(100, 100, 50, 50);\n var circle = two.makeCircle(200, 200, 25);\n \n two.update();\n \n // Verify elements exist\n assert.ok(two.renderer.domElement.querySelector('#' + rect.id), 'Rectangle exists before scene release');\n assert.ok(two.renderer.domElement.querySelector('#' + circle.id), 'Circle exists before scene release');\n \n // Release entire scene\n two.release();\n \n // Verify all elements are cleaned up\n assert.ok(!two.renderer.domElement.querySelector('#' + rect.id), 'Rectangle removed after scene release');\n assert.ok(!two.renderer.domElement.querySelector('#' + circle.id), 'Circle removed after scene release');\n\n QUnit.Utils.addInstanceToTest(assert.test, two);\n });\n\n})();"
},
{
"path": "tests/suite/shapes.js",
"content": "QUnit.module('Primitives');\n\nQUnit.test('Two.Points', function (assert) {\n var props = Two.Points.Properties.slice(0, 7);\n\n assert.expect(props.length + 15);\n\n var two = new Two();\n var points = new Two.Points();\n two.add(points);\n two.update();\n\n points = new Two.Points([\n new Two.Anchor(0, 0),\n new Two.Anchor(100, 100),\n new Two.Anchor(200, 200),\n new Two.Anchor(300, 300),\n ]);\n\n assert.equal(points.vertices.length, 4, 'Amount of vertices set correctly.');\n\n points.fill = 'red';\n assert.equal(points.fill, 'red', 'Can get property fill correctly.');\n assert.equal(points._fill, 'red', 'Can set property fill correctly.');\n\n points.stroke = 'red';\n assert.equal(points.stroke, 'red', 'Can get property stroke correctly.');\n assert.equal(points._stroke, 'red', 'Can set property stroke correctly.');\n\n points.size = 6;\n assert.equal(points.size, 6, 'Can get property size correctly.');\n assert.equal(points._size, 6, 'Can set property size correctly.');\n\n points.sizeAttenuation = true;\n assert.equal(\n points.sizeAttenuation,\n true,\n 'Can get property sizeAttenuation correctly.'\n );\n assert.equal(\n points._sizeAttenuation,\n true,\n 'Can set property sizeAttenuation correctly.'\n );\n\n points.strokeAttenuation = true;\n assert.equal(\n points.strokeAttenuation,\n true,\n 'Can get property strokeAttenuation correctly.'\n );\n assert.equal(\n points._strokeAttenuation,\n true,\n 'Can set property strokeAttenuation correctly.'\n );\n\n points.dashes = [2, 2];\n assert.equal(\n points.dashes.length === 2 &&\n points.dashes[0] === 2 &&\n points.dashes[1] === 2,\n true,\n 'Can get property dashes correctly.'\n );\n assert.equal(\n points._dashes.length === 2 &&\n points._dashes[0] === 2 &&\n points._dashes[1] === 2,\n true,\n 'Can set property dashes correctly.'\n );\n\n points.className = 'ui-points';\n assert.equal(\n points.className,\n 'ui-points',\n 'Can get property className correctly.'\n );\n assert.equal(\n points._className,\n 'ui-points',\n 'Can set property className correctly.'\n );\n\n points._update();\n points.flagReset();\n\n for (var i = 0; i < props.length; i++) {\n var prop = props[i];\n assert.equal(\n points['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n false,\n 'Reset flag ' + prop + ' correctly.'\n );\n }\n\n points.beginning = 0.5;\n points.ending = 0.5;\n two.add(points);\n two.update();\n});\n\nQUnit.test('Two.Points Object Conversion', function (assert) {\n assert.expect(7);\n\n var point = new Two.Points(new Two.Anchor(50, 50));\n point.id = 'my-point';\n\n var obj = point.toObject();\n\n assert.equal(typeof obj, 'object', 'Two.Points.toObject creates an object');\n assert.equal(obj.vertices[0].x, 50, 'Two.Points.toObject preserves x');\n assert.equal(obj.vertices[0].y, 50, 'Two.Points.toObject preserves y');\n assert.equal(obj.id, 'my-point', 'Two.Points.toObject preserves id');\n\n var newPoint = Two.Points.fromObject(obj);\n\n assert.equal(\n newPoint.vertices[0].x,\n point.vertices[0].x,\n 'Two.Points.fromObject preserves x'\n );\n assert.equal(\n newPoint.vertices[0].y,\n point.vertices[0].y,\n 'Two.Points.fromObject preserves y'\n );\n\n var copiedPoint = new Two.Points().copy(point);\n assert.deepEqual(\n { ...copiedPoint.toObject(), id: point.id },\n point.toObject(),\n 'Two.Points.copy creates identical point'\n );\n});\n\nQUnit.test('Two.ArcSegment', function (assert) {\n assert.expect(Two.ArcSegment.Properties.length * 4 + 2);\n\n var innerRadius = 5;\n var outerRadius = 10;\n var startAngle = 0;\n var endAngle = Math.PI / 2;\n\n var properties = [startAngle, endAngle, innerRadius, outerRadius];\n\n var path = new Two.ArcSegment(\n 0,\n 0,\n innerRadius,\n outerRadius,\n startAngle,\n endAngle\n );\n assert.equal(\n path.vertices.length,\n Two.Resolution * 3,\n 'Amount of vertices set correctly.'\n );\n\n for (var i = 0; i < Two.ArcSegment.Properties.length; i++) {\n var prop = Two.ArcSegment.Properties[i];\n assert.equal(\n path[prop],\n properties[i],\n 'Can get property ' + prop + ' correctly.'\n );\n path[prop] = properties[i] * 2;\n assert.equal(\n path[prop],\n properties[i] * 2,\n 'Can set property ' + prop + ' correctly.'\n );\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n true,\n 'Set ' + prop + \"'s property flag correctly.\"\n );\n }\n\n path._update();\n path.flagReset();\n\n for (var i = 0; i < Two.ArcSegment.Properties.length; i++) {\n var prop = Two.ArcSegment.Properties[i];\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n false,\n 'Reset flag ' + prop + ' correctly.'\n );\n }\n\n path.closed = false;\n path._update();\n\n assert.equal(\n path.vertices[0].equals(path.vertices[path.vertices.length - 1]),\n true,\n 'Circle has standardized vertex generation when shape is not closed'\n );\n});\n\nQUnit.test('Two.Path.smooth assigns handles', function (assert) {\n assert.expect(5);\n\n var a0 = new Two.Anchor(0, 0);\n var a1 = new Two.Anchor(50, 100);\n var a2 = new Two.Anchor(100, 0);\n var path = new Two.Path([a0, a1, a2]);\n\n assert.strictEqual(\n path.automatic,\n true,\n 'automatic defaults to true before smoothing'\n );\n\n path.smooth({ type: 'continuous' });\n\n assert.strictEqual(\n path.automatic,\n false,\n 'smooth disables automatic plotting for manual control'\n );\n\n var middle = path.vertices[1];\n assert.ok(\n middle.controls.left.length() > 0,\n 'left handle assigned on interior vertex'\n );\n assert.ok(\n middle.controls.right.length() > 0,\n 'right handle assigned on interior vertex'\n );\n\n assert.strictEqual(\n middle.command,\n Two.Commands.curve,\n 'middle vertex command converted to curve'\n );\n});\n\nQUnit.test('Two.Path.subdivide recomputes handles', function (assert) {\n assert.expect(5);\n\n var start = new Two.Anchor(0, 0);\n start.controls.right.set(50, 0);\n var end = new Two.Anchor(100, 0);\n end.controls.left.set(-50, 0);\n var path = new Two.Path([start, end]);\n\n path.subdivide(1);\n\n assert.strictEqual(path.vertices.length, 3, 'midpoint inserted');\n assert.ok(\n path.vertices[0].controls.right.length() > 0,\n 'original start handle preserved after subdivision'\n );\n assert.ok(\n path.vertices[2].controls.left.length() > 0,\n 'original end handle preserved after subdivision'\n );\n\n var mid = path.vertices[1];\n assert.strictEqual(\n mid.command,\n Two.Commands.curve,\n 'midpoint inherits curve command'\n );\n assert.ok(\n mid.controls.left.length() > 0 && mid.controls.right.length() > 0,\n 'midpoint handles computed from original curve'\n );\n});\n\nQUnit.test('Two.ArcSegment Object Conversion', function (assert) {\n assert.expect(11);\n\n // Create original arc segment\n var innerRadius = 5;\n var outerRadius = 10;\n var startAngle = 0;\n var endAngle = Math.PI / 2;\n var arcSegment = new Two.ArcSegment(\n 0,\n 0,\n innerRadius,\n outerRadius,\n startAngle,\n endAngle\n );\n arcSegment.fill = '#0000ff';\n arcSegment.stroke = '#ff00ff';\n arcSegment.linewidth = 3;\n arcSegment.id = 'my-arcSegment';\n\n // Convert to object\n var obj = arcSegment.toObject();\n\n // Test object has expected properties\n assert.equal(\n typeof obj,\n 'object',\n 'Two.ArcSegment.toObject creates an object'\n );\n assert.equal(\n obj.innerRadius,\n innerRadius,\n 'Two.ArcSegment.toObject preserves innerRadius'\n );\n assert.equal(\n obj.outerRadius,\n outerRadius,\n 'Two.ArcSegment.toObject preserves outerRadius'\n );\n assert.equal(\n obj.startAngle,\n startAngle,\n 'Two.ArcSegment.toObject preserves startAngle'\n );\n assert.equal(\n obj.endAngle,\n endAngle,\n 'Two.ArcSegment.toObject preserves endAngle'\n );\n assert.equal(obj.fill, '#0000ff', 'Two.ArcSegment.toObject preserves fill');\n assert.equal(obj.id, 'my-arcSegment', 'Two.ArcSegment.toObject preserves id');\n\n // Create new arc segment from object\n var newArcSegment = Two.ArcSegment.fromObject(obj);\n\n // Test new circle matches original\n assert.equal(\n newArcSegment.radius,\n arcSegment.radius,\n 'Two.ArcSegment.fromObject preserves radius'\n );\n assert.equal(\n newArcSegment.fill,\n arcSegment.fill,\n 'Two.ArcSegment.fromObject preserves fill'\n );\n assert.equal(\n newArcSegment.id,\n arcSegment.id,\n 'Two.ArcSegment.fromObject preserves id'\n );\n\n // Test copy method\n var copiedArcSegment = new Two.ArcSegment().copy(arcSegment);\n assert.deepEqual(\n { ...copiedArcSegment.toObject(), id: arcSegment.id },\n arcSegment.toObject(),\n 'Two.ArcSegment.copy creates identical arcSegment'\n );\n});\n\nQUnit.test('Two.Circle', function (assert) {\n assert.expect(Two.Circle.Properties.length * 4 + 2);\n\n var radius = 50;\n var properties = [radius];\n\n var path = new Two.Circle(0, 0, radius);\n assert.equal(path.vertices.length, 4, 'Amount of vertices set correctly.');\n\n for (var i = 0; i < Two.Circle.Properties.length; i++) {\n var prop = Two.Circle.Properties[i];\n assert.equal(\n path[prop],\n properties[i],\n 'Can get property ' + prop + ' correctly.'\n );\n path[prop] = properties[i] * 2;\n assert.equal(\n path[prop],\n properties[i] * 2,\n 'Can set property ' + prop + ' correctly.'\n );\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n true,\n 'Set ' + prop + \"'s property flag correctly.\"\n );\n }\n\n path._update();\n path.flagReset();\n\n for (var i = 0; i < Two.Circle.Properties.length; i++) {\n var prop = Two.Circle.Properties[i];\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n false,\n 'Reset flag ' + prop + ' correctly.'\n );\n }\n\n path.closed = false;\n path._update();\n\n assert.equal(\n path.vertices[0].equals(path.vertices[path.vertices.length - 1]),\n true,\n 'Circle has standardized vertex generation when shape is not closed'\n );\n});\n\nQUnit.test('Two.Circle Object Conversion', function (assert) {\n assert.expect(8);\n\n // Create original circle\n var circle = new Two.Circle(100, 100, 50);\n circle.fill = '#0000ff';\n circle.stroke = '#ff00ff';\n circle.linewidth = 3;\n circle.id = 'my-circle';\n\n // Convert to object\n var obj = circle.toObject();\n\n // Test object has expected properties\n assert.equal(typeof obj, 'object', 'Two.Circle.toObject creates an object');\n assert.equal(obj.radius, 50, 'Two.Circle.toObject preserves radius');\n assert.equal(obj.fill, '#0000ff', 'Two.Circle.toObject preserves fill');\n assert.equal(obj.id, 'my-circle', 'Two.Circle.toObject preserves id');\n\n // Create new circle from object\n var newCircle = Two.Circle.fromObject(obj);\n\n // Test new circle matches original\n assert.equal(\n newCircle.radius,\n circle.radius,\n 'Two.Circle.fromObject preserves radius'\n );\n assert.equal(\n newCircle.fill,\n circle.fill,\n 'Two.Circle.fromObject preserves fill'\n );\n assert.equal(newCircle.id, circle.id, 'Two.Circle.fromObject preserves id');\n\n // Test copy method\n var copiedCircle = new Two.Circle().copy(circle);\n assert.deepEqual(\n { ...copiedCircle.toObject(), id: circle.id },\n circle.toObject(),\n 'Two.Circle.copy creates identical circle'\n );\n});\n\nQUnit.test('Two.Ellipse', function (assert) {\n assert.expect(Two.Ellipse.Properties.length * 4 + 2);\n\n var rx = 50;\n var ry = 75;\n var properties = [rx * 2, ry * 2];\n\n var path = new Two.Ellipse(0, 0, rx, ry);\n assert.equal(path.vertices.length, 4, 'Amount of vertices set correctly.');\n\n for (var i = 0; i < Two.Ellipse.Properties.length; i++) {\n var prop = Two.Ellipse.Properties[i];\n assert.equal(\n path[prop],\n properties[i],\n 'Can get property ' + prop + ' correctly.'\n );\n path[prop] = properties[i] * 2;\n assert.equal(\n path[prop],\n properties[i] * 2,\n 'Can set property ' + prop + ' correctly.'\n );\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n true,\n 'Set ' + prop + \"'s property flag correctly.\"\n );\n }\n\n path._update();\n path.flagReset();\n\n for (var i = 0; i < Two.Ellipse.Properties.length; i++) {\n var prop = Two.Ellipse.Properties[i];\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n false,\n 'Reset flag ' + prop + ' correctly.'\n );\n }\n\n path.closed = false;\n path._update();\n\n assert.equal(\n path.vertices[0].equals(path.vertices[path.vertices.length - 1]),\n true,\n 'Ellipse has standardized vertex generation when shape is not closed'\n );\n});\n\nQUnit.test('Two.Ellipse Object Conversion', function (assert) {\n assert.expect(9);\n\n // Create original ellipse\n var ellipse = new Two.Ellipse(100, 100, 50, 75);\n ellipse.fill = '#0000ff';\n ellipse.stroke = '#ff00ff';\n ellipse.linewidth = 3;\n ellipse.id = 'my-ellipse';\n\n // Convert to object\n var obj = ellipse.toObject();\n\n // Test object has expected properties\n assert.equal(typeof obj, 'object', 'Two.Ellipse.toObject creates an object');\n assert.equal(obj.width, 100, 'Two.Ellipse.toObject preserves width');\n assert.equal(obj.height, 150, 'Two.Ellipse.toObject preserves height');\n assert.equal(obj.fill, '#0000ff', 'Two.Ellipse.toObject preserves fill');\n assert.equal(obj.id, 'my-ellipse', 'Two.Ellipse.toObject preserves id');\n\n // Create new ellipse from object\n var newEllipse = Two.Ellipse.fromObject(obj);\n\n // Test new ellipse matches original\n assert.equal(\n newEllipse.width,\n ellipse.width,\n 'Two.Ellipse.fromObject preserves width'\n );\n assert.equal(\n newEllipse.height,\n ellipse.height,\n 'Two.Ellipse.fromObject preserves height'\n );\n assert.equal(\n newEllipse.fill,\n ellipse.fill,\n 'Two.Ellipse.fromObject preserves fill'\n );\n\n // Test copy method\n var copiedEllipse = new Two.Ellipse().copy(ellipse);\n assert.deepEqual(\n { ...copiedEllipse.toObject(), id: ellipse.id },\n ellipse.toObject(),\n 'Two.Ellipse.copy creates identical ellipse'\n );\n});\n\nQUnit.test('Two.Polygon', function (assert) {\n assert.expect(Two.Polygon.Properties.length * 4 + 1);\n\n var radius = 50;\n var sides = 5;\n var properties = [radius * 2, radius * 2, sides];\n\n var path = new Two.Polygon(0, 0, radius, sides);\n\n for (var i = 0; i < Two.Polygon.Properties.length; i++) {\n var prop = Two.Polygon.Properties[i];\n assert.equal(\n path[prop],\n properties[i],\n 'Can get property ' + prop + ' correctly.'\n );\n path[prop] = properties[i] * 2;\n assert.equal(\n path[prop],\n properties[i] * 2,\n 'Can set property ' + prop + ' correctly.'\n );\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n true,\n 'Set ' + prop + \"'s property flag correctly.\"\n );\n }\n\n path._update();\n path.flagReset();\n\n for (var i = 0; i < Two.Polygon.Properties.length; i++) {\n var prop = Two.Polygon.Properties[i];\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n false,\n 'Reset flag ' + prop + ' correctly.'\n );\n }\n\n path.closed = false;\n path._update();\n\n assert.equal(\n path.vertices[0].equals(path.vertices[path.vertices.length - 1]),\n true,\n 'Polygon has standardized vertex generation when shape is not closed'\n );\n});\n\nQUnit.test('Two.Polygon Object Conversion', function (assert) {\n assert.expect(9);\n\n // Create original polygon\n var polygon = new Two.Polygon(100, 100, 50, 5);\n polygon.fill = '#0000ff';\n polygon.stroke = '#ff00ff';\n polygon.linewidth = 3;\n polygon.id = 'my-polygon';\n\n // Convert to object\n var obj = polygon.toObject();\n\n // Test object has expected properties\n assert.equal(typeof obj, 'object', 'Two.Polygon.toObject creates an object');\n assert.equal(obj.width, 100, 'Two.Polygon.toObject preserves width');\n assert.equal(obj.height, 100, 'Two.Polygon.toObject preserves height');\n assert.equal(obj.sides, 5, 'Two.Polygon.toObject preserves sides');\n assert.equal(obj.fill, '#0000ff', 'Two.Polygon.toObject preserves fill');\n assert.equal(obj.id, 'my-polygon', 'Two.Polygon.toObject preserves id');\n\n // Create new polygon from object\n var newPolygon = Two.Polygon.fromObject(obj);\n\n // Test new polygon matches original\n assert.equal(\n newPolygon.width,\n polygon.width,\n 'Two.Polygon.fromObject preserves width'\n );\n assert.equal(\n newPolygon.sides,\n polygon.sides,\n 'Two.Polygon.fromObject preserves sides'\n );\n\n // Test copy method\n var copiedPolygon = new Two.Polygon().copy(polygon);\n assert.deepEqual(\n { ...copiedPolygon.toObject(), id: polygon.id },\n polygon.toObject(),\n 'Two.Polygon.copy creates identical polygon'\n );\n});\n\nQUnit.test('Two.Rectangle', function (assert) {\n assert.expect(Two.Rectangle.Properties.length * 4 + 1);\n\n var width = 50;\n var height = 75;\n var origin = '{\"x\":0,\"y\":0}';\n var properties = [width, height, origin];\n\n var path = new Two.Rectangle(0, 0, width, height);\n\n for (var i = 0; i < Two.Rectangle.Properties.length; i++) {\n var prop = Two.Rectangle.Properties[i];\n var isOrigin = i === 2;\n assert.equal(\n isOrigin ? JSON.stringify(path[prop].toObject()) : path[prop],\n properties[i],\n 'Can get property ' + prop + ' correctly.'\n );\n if (isOrigin) {\n path[prop].set(50, 50);\n assert.equal(\n JSON.stringify(path[prop].toObject()),\n '{\"x\":50,\"y\":50}',\n 'Can set property ' + prop + ' correctly.'\n );\n } else {\n path[prop] = properties[i] * 2;\n assert.equal(\n path[prop],\n properties[i] * 2,\n 'Can set property ' + prop + ' correctly.'\n );\n }\n if (isOrigin) {\n console.log(path._flagVertices);\n assert.equal(\n path['_flagVertices'],\n true,\n 'Set ' + prop + \"'s property flag correctly.\"\n );\n } else {\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n true,\n 'Set ' + prop + \"'s property flag correctly.\"\n );\n }\n }\n\n path._update();\n path.flagReset();\n\n for (var i = 0; i < Two.Rectangle.Properties.length; i++) {\n var prop = Two.Rectangle.Properties[i];\n var isOrigin = i === 2;\n if (isOrigin) {\n assert.equal(\n path['_flagVertices'],\n false,\n 'Reset flag ' + prop + ' correctly.'\n );\n } else {\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n false,\n 'Reset flag ' + prop + ' correctly.'\n );\n }\n }\n\n path.closed = false;\n path._update();\n\n assert.equal(\n path.vertices[0].equals(path.vertices[path.vertices.length - 1]),\n true,\n 'Rectangle has standardized vertex generation when shape is not closed'\n );\n});\n\nQUnit.test('Two.Rectangle Object Conversion', function (assert) {\n assert.expect(9);\n\n // Create original rectangle\n var rectangle = new Two.Rectangle(100, 100, 50, 75);\n rectangle.fill = '#0000ff';\n rectangle.stroke = '#ff00ff';\n rectangle.linewidth = 3;\n rectangle.id = 'my-rectangle';\n\n // Convert to object\n var obj = rectangle.toObject();\n\n // Test object has expected properties\n assert.equal(\n typeof obj,\n 'object',\n 'Two.Rectangle.toObject creates an object'\n );\n assert.equal(obj.width, 50, 'Two.Rectangle.toObject preserves width');\n assert.equal(obj.height, 75, 'Two.Rectangle.toObject preserves height');\n assert.equal(obj.fill, '#0000ff', 'Two.Rectangle.toObject preserves fill');\n assert.equal(obj.id, 'my-rectangle', 'Two.Rectangle.toObject preserves id');\n\n // Create new rectangle from object\n var newRectangle = Two.Rectangle.fromObject(obj);\n\n // Test new rectangle matches original\n assert.equal(\n newRectangle.width,\n rectangle.width,\n 'Two.Rectangle.fromObject preserves width'\n );\n assert.equal(\n newRectangle.height,\n rectangle.height,\n 'Two.Rectangle.fromObject preserves height'\n );\n assert.equal(\n newRectangle.fill,\n rectangle.fill,\n 'Two.Rectangle.fromObject preserves fill'\n );\n\n // Test copy method\n var copiedRectangle = new Two.Rectangle().copy(rectangle);\n copiedRectangle._update();\n assert.deepEqual(\n { ...copiedRectangle.toObject(), id: rectangle.id },\n rectangle.toObject(),\n 'Two.Rectangle.copy creates identical rectangle'\n );\n});\n\nQUnit.test('Two.RoundedRectangle', function (assert) {\n assert.expect(Two.RoundedRectangle.Properties.length * 4 + 3);\n\n var width = 50;\n var height = 75;\n var radius = 8;\n var properties = [width, height, radius];\n\n var path = new Two.RoundedRectangle(0, 0, width, height, radius);\n\n for (var i = 0; i < Two.RoundedRectangle.Properties.length; i++) {\n var prop = Two.RoundedRectangle.Properties[i];\n assert.equal(\n path[prop],\n properties[i],\n 'Can get property ' + prop + ' correctly.'\n );\n path[prop] = properties[i] * 2;\n assert.equal(\n path[prop],\n properties[i] * 2,\n 'Can set property ' + prop + ' correctly.'\n );\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n true,\n 'Set ' + prop + \"'s property flag correctly.\"\n );\n }\n\n radius = new Two.Anchor(4, 6);\n path.radius = radius.clone();\n assert.equal(\n radius.equals(path.radius),\n true,\n 'Can get and set radius as a vector correctly.'\n );\n\n path._update();\n path.flagReset();\n\n for (var i = 0; i < Two.RoundedRectangle.Properties.length; i++) {\n var prop = Two.RoundedRectangle.Properties[i];\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n false,\n 'Reset flag ' + prop + ' correctly.'\n );\n }\n\n assert.equal(path._flagRadius, false, 'Reset flag radius correctly.');\n\n path.closed = false;\n path._update();\n\n assert.equal(\n path.vertices[0].equals(path.vertices[path.vertices.length - 1]),\n true,\n 'RoundedRectangle has standardized vertex generation when shape is not closed'\n );\n});\n\nQUnit.test('Two.RoundedRectangle Object Conversion', function (assert) {\n assert.expect(10);\n\n // Create original rounded rectangle\n var roundedRect = new Two.RoundedRectangle(100, 100, 50, 75, 8);\n roundedRect.fill = '#0000ff';\n roundedRect.stroke = '#ff00ff';\n roundedRect.linewidth = 3;\n roundedRect.id = 'my-rounded-rect';\n\n // Convert to object\n var obj = roundedRect.toObject();\n\n // Test object has expected properties\n assert.equal(\n typeof obj,\n 'object',\n 'Two.RoundedRectangle.toObject creates an object'\n );\n assert.equal(obj.width, 50, 'Two.RoundedRectangle.toObject preserves width');\n assert.equal(\n obj.height,\n 75,\n 'Two.RoundedRectangle.toObject preserves height'\n );\n assert.equal(obj.radius, 8, 'Two.RoundedRectangle.toObject preserves radius');\n assert.equal(\n obj.fill,\n '#0000ff',\n 'Two.RoundedRectangle.toObject preserves fill'\n );\n assert.equal(\n obj.id,\n 'my-rounded-rect',\n 'Two.RoundedRectangle.toObject preserves id'\n );\n\n // Create new rounded rectangle from object\n var newRoundedRect = Two.RoundedRectangle.fromObject(obj);\n\n // Test new rounded rectangle matches original\n assert.equal(\n newRoundedRect.width,\n roundedRect.width,\n 'Two.RoundedRectangle.fromObject preserves width'\n );\n assert.equal(\n newRoundedRect.height,\n roundedRect.height,\n 'Two.RoundedRectangle.fromObject preserves height'\n );\n assert.equal(\n newRoundedRect.radius,\n roundedRect.radius,\n 'Two.RoundedRectangle.fromObject preserves radius'\n );\n\n // Test copy method\n var copiedRoundedRect = new Two.RoundedRectangle().copy(roundedRect);\n assert.deepEqual(\n { ...copiedRoundedRect.toObject(), id: roundedRect.id },\n roundedRect.toObject(),\n 'Two.RoundedRectangle.copy creates identical rounded rectangle'\n );\n});\n\nQUnit.test(\n 'Two.RoundedRectangle Vector Radius Construction',\n function (assert) {\n assert.expect(6);\n\n var width = 100;\n var height = 80;\n var rx = 10;\n var ry = 15;\n var vectorRadius = new Two.Vector(rx, ry);\n\n var rect = new Two.RoundedRectangle(0, 0, width, height, vectorRadius);\n\n assert.equal(rect.width, width, 'Width set correctly with Vector radius');\n assert.equal(\n rect.height,\n height,\n 'Height set correctly with Vector radius'\n );\n assert.equal(\n rect.radius instanceof Two.Vector,\n true,\n 'Radius is Vector instance'\n );\n assert.equal(rect.radius.x, rx, 'Vector radius x value set correctly');\n assert.equal(rect.radius.y, ry, 'Vector radius y value set correctly');\n\n rect._update();\n\n var expectedX1 = width / 2 - rx;\n var expectedY1 = -height / 2;\n assert.equal(\n rect.vertices[1].x === expectedX1 && rect.vertices[1].y === expectedY1,\n true,\n 'Vertices calculated correctly with Vector radius'\n );\n }\n);\n\nQUnit.test('Two.Star', function (assert) {\n assert.expect(Two.Star.Properties.length * 4 + 1);\n\n var innerRadius = 50;\n var outerRadius = 75;\n var sides = 5;\n var properties = [innerRadius, outerRadius, sides];\n\n var path = new Two.Star(0, 0, innerRadius, outerRadius, sides);\n\n for (var i = 0; i < Two.Star.Properties.length; i++) {\n var prop = Two.Star.Properties[i];\n assert.equal(\n path[prop],\n properties[i],\n 'Can get property ' + prop + ' correctly.'\n );\n path[prop] = properties[i] * 2;\n assert.equal(\n path[prop],\n properties[i] * 2,\n 'Can set property ' + prop + ' correctly.'\n );\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n true,\n 'Set ' + prop + \"'s property flag correctly.\"\n );\n }\n\n path._update();\n path.flagReset();\n\n for (var i = 0; i < Two.Star.Properties.length; i++) {\n var prop = Two.Star.Properties[i];\n assert.equal(\n path['_flag' + prop.charAt(0).toUpperCase() + prop.slice(1)],\n false,\n 'Reset flag ' + prop + ' correctly.'\n );\n }\n\n path.closed = false;\n path._update();\n\n assert.equal(\n path.vertices[0].equals(path.vertices[path.vertices.length - 1]),\n true,\n 'Star has standardized vertex generation when shape is not closed'\n );\n});\n\nQUnit.test('Two.Star Object Conversion', function (assert) {\n assert.expect(10);\n\n // Create original star\n var star = new Two.Star(100, 100, 50, 75, 5);\n star.fill = '#0000ff';\n star.stroke = '#ff00ff';\n star.linewidth = 3;\n star.id = 'my-star';\n\n // Convert to object\n var obj = star.toObject();\n\n // Test object has expected properties\n assert.equal(typeof obj, 'object', 'Two.Star.toObject creates an object');\n assert.equal(obj.innerRadius, 50, 'Two.Star.toObject preserves innerRadius');\n assert.equal(obj.outerRadius, 75, 'Two.Star.toObject preserves outerRadius');\n assert.equal(obj.sides, 5, 'Two.Star.toObject preserves sides');\n assert.equal(obj.fill, '#0000ff', 'Two.Star.toObject preserves fill');\n assert.equal(obj.id, 'my-star', 'Two.Star.toObject preserves id');\n\n // Create new star from object\n var newStar = Two.Star.fromObject(obj);\n\n // Test new star matches original\n assert.equal(\n newStar.innerRadius,\n star.innerRadius,\n 'Two.Star.fromObject preserves innerRadius'\n );\n assert.equal(\n newStar.outerRadius,\n star.outerRadius,\n 'Two.Star.fromObject preserves outerRadius'\n );\n assert.equal(\n newStar.sides,\n star.sides,\n 'Two.Star.fromObject preserves sides'\n );\n\n // Test copy method\n var copiedStar = new Two.Star().copy(star);\n assert.deepEqual(\n { ...copiedStar.toObject(), id: star.id },\n star.toObject(),\n 'Two.Star.copy creates identical star'\n );\n});\n"
},
{
"path": "tests/suite/svg-interpreter.js",
"content": "/**\n * Tests Two.js Utilities related to Svg Interpretation:\n * + two.load()\n * + two.interpret()\n * + polygon.subdivide()\n */\n\n(function () {\n QUnit.module('SvgInterpreter');\n\n QUnit.test('Two.load', function (assert) {\n assert.expect(1);\n assert.done = assert.async(1);\n\n var two = new Two({\n width: 400,\n height: 400,\n });\n\n two.load('./images/interpretation/D.svg', function (scene, svg) {\n const shape = scene.children[0];\n shape.center();\n\n var answer = {\n children: [\n {\n vertices: [\n {\n x: -77.9515,\n y: 150,\n command: 'M',\n relative: true,\n controls: { left: { x: 0, y: 0 }, right: { x: 0, y: 0 } },\n rx: 0,\n ry: 0,\n xAxisRotation: 0,\n largeArcFlag: 0,\n sweepFlag: 1,\n },\n {\n x: -77.8935,\n y: -150,\n command: 'L',\n relative: true,\n controls: { left: { x: 0, y: 0 }, right: { x: 77.899, y: 0 } },\n rx: 0,\n ry: 0,\n xAxisRotation: 0,\n largeArcFlag: 0,\n sweepFlag: 1,\n },\n {\n x: 77.9515,\n y: -81.117,\n command: 'C',\n relative: true,\n controls: { left: { x: 0, y: -67.354 }, right: { x: 0, y: 0 } },\n rx: 0,\n ry: 0,\n xAxisRotation: 0,\n largeArcFlag: 0,\n sweepFlag: 1,\n },\n {\n x: 77.9515,\n y: 73.965,\n command: 'C',\n relative: true,\n controls: {\n left: { x: 0, y: -75.976 },\n right: { x: -0.001, y: 75.976 },\n },\n rx: 0,\n ry: 0,\n xAxisRotation: 0,\n largeArcFlag: 0,\n sweepFlag: 1,\n },\n {\n x: -77.9515,\n y: 150,\n command: 'C',\n relative: true,\n controls: { left: { x: 77.957, y: 0 }, right: { x: 0, y: 0 } },\n rx: 0,\n ry: 0,\n xAxisRotation: 0,\n largeArcFlag: 0,\n sweepFlag: 1,\n },\n ],\n fill: 'none',\n stroke: '#333333',\n linewidth: 10,\n opacity: 1,\n visible: true,\n cap: 'round',\n join: 'round',\n miter: '10',\n closed: true,\n curved: false,\n automatic: false,\n beginning: 0,\n ending: 1,\n className: '',\n translation: { x: -3.54003907432e-6, y: 0 },\n rotation: 0,\n scale: 1,\n skewX: 0,\n skewY: 0,\n },\n ],\n translation: { x: 200, y: 200 },\n rotation: 0,\n scale: { x: 1, y: 1 },\n opacity: 1,\n className: '',\n mask: {\n vertices: [\n {\n x: 0,\n y: 0,\n command: 'M',\n relative: true,\n controls: { left: { x: 0, y: 0 }, right: { x: 0, y: 0 } },\n rx: 0,\n ry: 0,\n xAxisRotation: 0,\n largeArcFlag: 0,\n sweepFlag: 1,\n },\n {\n x: 400,\n y: 0,\n command: 'L',\n relative: true,\n controls: { left: { x: 0, y: 0 }, right: { x: 0, y: 0 } },\n rx: 0,\n ry: 0,\n xAxisRotation: 0,\n largeArcFlag: 0,\n sweepFlag: 1,\n },\n {\n x: 400,\n y: 400,\n command: 'L',\n relative: true,\n controls: { left: { x: 0, y: 0 }, right: { x: 0, y: 0 } },\n rx: 0,\n ry: 0,\n xAxisRotation: 0,\n largeArcFlag: 0,\n sweepFlag: 1,\n },\n {\n x: 0,\n y: 400,\n command: 'L',\n relative: true,\n controls: { left: { x: 0, y: 0 }, right: { x: 0, y: 0 } },\n rx: 0,\n ry: 0,\n xAxisRotation: 0,\n largeArcFlag: 0,\n sweepFlag: 1,\n },\n ],\n fill: '#fff',\n stroke: '#000',\n linewidth: 1,\n opacity: 1,\n visible: true,\n cap: 'butt',\n join: 'miter',\n miter: 4,\n closed: true,\n curved: false,\n automatic: false,\n beginning: 0,\n ending: 1,\n className: '',\n translation: { x: -200.0005035400391, y: -200 },\n rotation: 0,\n scale: 1,\n skewX: 0,\n skewY: 0,\n width: 400,\n height: 400,\n origin: { x: -200, y: -200 },\n },\n };\n shape.translation.set(two.width / 2, two.height / 2);\n two.add(shape).update();\n\n assert.ok(\n QUnit.Utils.shapeEquals(answer, shape),\n 'Two.load loads SVG files properly.'\n );\n\n assert.done();\n\n QUnit.Utils.addElemToTest(assert.test, [two.renderer.domElement, svg]);\n });\n });\n\n QUnit.test('Two.interpret', function (assert) {\n assert.expect(10);\n assert.done = assert.async(10);\n\n (function () {\n var two = new Two({\n width: 400,\n height: 400,\n });\n\n QUnit.Utils.get('./images/interpretation/D.svg', function (resp) {\n var answer = {\n children: [\n {\n vertices: [\n {\n x: -77.9515,\n y: 150,\n command: 'M',\n relative: true,\n controls: { left: { x: 0, y: 0 }, right: { x: 0, y: 0 } },\n },\n {\n x: -77.8935,\n y: -150,\n command: 'L',\n relative: true,\n controls: {\n left: { x: 0, y: 0 },\n right: { x: 77.899, y: 0 },\n },\n },\n {\n x: 77.9515,\n y: -81.117,\n command: 'C',\n relative: true,\n controls: {\n left: { x: 0, y: -67.354 },\n right: { x: 0, y: 0 },\n },\n },\n {\n x: 77.9515,\n y: 73.965,\n command: 'C',\n relative: true,\n controls: {\n left: { x: 0, y: -75.976 },\n right: { x: -0.001, y: 75.976 },\n },\n },\n {\n x: -77.9515,\n y: 150,\n command: 'C',\n relative: true,\n controls: {\n left: { x: 77.957, y: 0 },\n right: { x: 0, y: 0 },\n },\n },\n ],\n fill: 'none',\n stroke: '#333333',\n linewidth: 10,\n opacity: 1,\n visible: true,\n cap: 'round',\n join: 'round',\n miter: '10',\n closed: true,\n curved: false,\n automatic: false,\n beginning: 0,\n ending: 1,\n className: '',\n translation: { x: 200.0005, y: 200 },\n rotation: 0,\n scale: 1,\n skewX: 0,\n skewY: 0,\n },\n ],\n translation: { x: 0, y: 0 },\n rotation: 0,\n scale: { x: 1, y: 1 },\n opacity: 1,\n className: '',\n mask: {\n vertices: [\n {\n x: 0,\n y: 0,\n command: 'M',\n relative: true,\n controls: { left: { x: 0, y: 0 }, right: { x: 0, y: 0 } },\n },\n {\n x: 400,\n y: 0,\n command: 'L',\n relative: true,\n controls: { left: { x: 0, y: 0 }, right: { x: 0, y: 0 } },\n },\n {\n x: 400,\n y: 400,\n command: 'L',\n relative: true,\n controls: { left: { x: 0, y: 0 }, right: { x: 0, y: 0 } },\n },\n {\n x: 0,\n y: 400,\n command: 'L',\n relative: true,\n controls: { left: { x: 0, y: 0 }, right: { x: 0, y: 0 } },\n },\n ],\n fill: '#fff',\n stroke: '#000',\n linewidth: 1,\n opacity: 1,\n visible: true,\n cap: 'butt',\n join: 'miter',\n miter: 4,\n closed: true,\n curved: false,\n automatic: false,\n beginning: 0,\n ending: 1,\n className: '',\n translation: { x: 0, y: 0 },\n rotation: 0,\n scale: 1,\n skewX: 0,\n skewY: 0,\n width: 400,\n height: 400,\n origin: { x: -200, y: -200 },\n },\n };\n var svg = QUnit.Utils.textToDOM(resp)[0];\n var shape = two.interpret(svg);\n\n two.update();\n\n assert.ok(\n QUnit.Utils.shapeEquals(answer, shape),\n 'Two.interpret imports \n\nExtends: [<%= root.augments %>](<%= root.augmentsHref %>)\n\n
\n<% } %>\n\n<%= root.description %>\n\n<% if (root.meta) { %>\n\n<% } %>\n\n <%= item.kind %> <%= item.overloaded ? 'overloaded' : '' %>\">\n\n## <%= item.shortname %>\n\n
\n\n<% }); %>\n"
},
{
"path": "utils/document.js",
"content": "var _ = require('underscore');\nvar fs = require('fs');\nvar path = require('path');\nvar compiler = require('jsdoc-api');\nvar sourceFiles = require('./source-files');\n\nvar pkg = JSON.parse(\n fs.readFileSync(path.resolve(__dirname, '../package.json'))\n);\nvar directory = [];\n\nvar template = _.template(\n fs.readFileSync(path.resolve(__dirname, './docs.template'), {\n encoding: 'utf8',\n })\n);\n\npkg.template = function (str) {\n if (typeof str === 'string') {\n var regex = /\\$\\w*/g;\n var match = str.match(regex);\n if (match && match.length > 0) {\n var prop = match[0].replace('$', '');\n str = str.replace(regex, pkg[prop]);\n }\n }\n return str;\n};\n\npreprocess();\n\nfunction preprocess() {\n _.each(sourceFiles, function (file) {\n var sourceFile = path.resolve(__dirname, '../', file);\n var pivotDir = [\n '/docs/',\n file.replace('jsm/', '').replace('src/', '').replace('.js', '/'),\n ].join('');\n\n var citations = compiler.explainSync({\n files: sourceFile,\n cache: false,\n });\n\n var root = getRoot(citations);\n\n directory.push({ name: root.longname, dir: pivotDir });\n });\n\n process();\n}\n\nfunction process() {\n _.each(sourceFiles, function (file) {\n var sourceFile = path.resolve(__dirname, '../', file);\n var pivotDir = [\n '/docs/',\n file.replace('jsm/', '').replace('src/', '').replace('.js', '/'),\n ].join('');\n\n var outputDir = path.resolve(__dirname, '../wiki' + pivotDir);\n var outputFile = path.join(outputDir, '/README.md');\n\n var citations = compiler.explainSync({\n files: sourceFile,\n cache: false,\n });\n\n citations.slice(0).forEach(function (object) {\n var a = object.undocumented;\n var b = /package:undefined/i.test(object.longname);\n var c = /Two\\.Utils\\.Events\\.(bind|unbind)/i.test(object.memberof);\n var d = /(private|protected)/i.test(object.access);\n\n if (a || b || c || d) {\n // Remove private / hidden / incomplete documented citations\n citations.splice(citations.indexOf(object), 1);\n } else {\n expandLink(object, 'description');\n _.each(object.params, expandParam, object);\n _.each(object.returns, expandParam, object);\n _.each(object.properties, expandParam, object);\n _.each(object.tags, expandTag, object);\n object.see = _.map(object.see, expandSee, object);\n\n var sn;\n sn = object.longname.replace(/#/gi, '.');\n var snList = sn.split('.');\n var snIndex = snList.length > 2 ? 2 : 1;\n object.shortname = snList.slice(snIndex).join('.');\n object.prefixname = sn.replace(object.shortname, '');\n\n // name and href for augments property\n var an;\n\n if (Array.isArray(object.augments) && object.augments.length > 0) {\n an = object.augments[object.augments.length - 1].split('.');\n } else if (typeof object.augments === 'string') {\n an = object.augments.split('.');\n }\n\n if (an) {\n object.augmentsHref = getHref(an.slice(1).join('.'));\n }\n }\n });\n\n var citationsByScope = {\n instance: [],\n static: [],\n };\n\n _.each(citations, function (citation) {\n if (/#/i.test(citation.longname)) {\n citationsByScope.instance.push(citation);\n } else {\n citationsByScope.static.push(citation);\n }\n });\n\n // citationsByScope.instance.sort(sortByFunctionThenAlphabetical);\n // citationsByScope.static.sort(sortByFunctionThenAlphabetical);\n\n citations = citationsByScope.static.concat(citationsByScope.instance);\n\n // console.log(\n // citations.map(function(a) {\n // return a.scope + '-' + a.longname;\n // })\n // );\n\n // Ensure outputDir is inside the project root\n var projectRoot = path.resolve(__dirname, '../');\n var relative = path.relative(projectRoot, outputDir);\n\n if (relative && !relative.startsWith('..') && !path.isAbsolute(relative)) {\n fs.mkdirSync(outputDir, { recursive: true });\n } else {\n throw new Error(\n 'Refusing to create output directory outside project root: ' + outputDir\n );\n }\n fs.writeFileSync(\n outputFile.replace('README.md', 'docs.json'),\n JSON.stringify(citations)\n );\n\n fs.writeFileSync(\n outputFile,\n template({\n root: getRoot(citations, true),\n citations: citations,\n package: pkg,\n })\n );\n\n console.log('Generated', outputFile);\n });\n}\n\nfunction getHref(name) {\n name = name.toLowerCase();\n\n for (var i = 0; i < sourceFiles.length; i++) {\n var sf = sourceFiles[i];\n if (sf.includes(name)) {\n return transform(sf);\n }\n }\n\n return null;\n\n function transform(str) {\n var path = str.replace('src/', '').replace('jsm/', '').replace('.js', '');\n return `/docs/${path}/`;\n }\n}\n\nfunction getRoot(citations, shouldSplice) {\n var list = citations.slice(0);\n for (var i = 0; i < list.length; i++) {\n var citation = list[i];\n if (/class/i.test(citation.kind)) {\n var index = _.indexOf(citations, citation);\n if (shouldSplice) {\n citations.splice(index, 1);\n }\n return citation;\n }\n }\n return null;\n}\n\nfunction expandSee(see) {\n return expandLink({ text: see }, 'text').text;\n}\n\nfunction expandTag(tag) {\n switch (tag.title) {\n case 'overloaded':\n this.overloaded = true;\n delete tag.title;\n delete tag.originalTitle;\n delete tag.text;\n break;\n default:\n expandLink(tag, 'text');\n }\n}\n\nfunction expandParam(param) {\n expandLink(param, 'description');\n}\n\nfunction expandLink(object, property) {\n var value = object[property];\n var shouldRecurse = false;\n\n if (value) {\n var regex = /\\{@link ([\\w\\d:/?\\-.#]*)\\}/i;\n var link = value.match(regex);\n\n if (link && link.length > 1) {\n var name = link[1];\n\n if (/http/i.test(name)) {\n object[property] = value.replace(regex, '[$1]($1)');\n shouldRecurse = true;\n } else {\n var fragments = name.split(/[.#]/i);\n var longname = name.replace(/#/i, '.');\n\n var dir = getDirectoryMatch(longname);\n var hash = fragments.length > 2 ? fragments.slice(2).join('-') : '';\n if (dir === null && fragments.length === 2) {\n dir = '/docs/two/';\n hash = fragments[1];\n }\n var href = [\n '[',\n fragments.join('.'),\n ']',\n '(',\n dir,\n hash ? '#' + hash.toLowerCase() : '',\n ')',\n ].join('');\n\n object[property] = value.replace(regex, href);\n shouldRecurse = true;\n }\n }\n }\n\n if (shouldRecurse) {\n expandLink(object, property);\n }\n\n return object;\n}\n\nfunction getDirectoryMatch(str) {\n var index = -1;\n for (var i = 0; i < directory.length; i++) {\n var { name } = directory[i];\n if (str.includes(name)) {\n index = i;\n }\n }\n if (index < 0) {\n return null;\n }\n return directory[index].dir;\n}\n"
},
{
"path": "utils/file-sizes.json",
"content": "{\"development\":\"94KB\",\"production\":\"50KB\"}"
},
{
"path": "utils/source-files.js",
"content": "var sourceFiles = [\n 'src/two.js',\n 'src/registry.js',\n 'src/collection.js',\n 'src/children.js',\n 'src/events.js',\n 'src/vector.js',\n 'src/anchor.js',\n 'src/matrix.js',\n 'src/renderers/svg.js',\n 'src/renderers/canvas.js',\n 'src/renderers/webgl.js',\n 'src/element.js',\n 'src/shape.js',\n 'src/path.js',\n 'src/shapes/line.js',\n 'src/shapes/rectangle.js',\n 'src/shapes/ellipse.js',\n 'src/shapes/circle.js',\n 'src/shapes/points.js',\n 'src/shapes/polygon.js',\n 'src/shapes/star.js',\n 'src/shapes/rounded-rectangle.js',\n 'src/text.js',\n 'src/effects/stop.js',\n 'src/effects/gradient.js',\n 'src/effects/linear-gradient.js',\n 'src/effects/radial-gradient.js',\n 'src/effects/texture.js',\n 'src/effects/sprite.js',\n 'src/effects/image.js',\n 'src/group.js',\n 'extras/jsm/arc.js',\n 'extras/jsm/zui.js',\n 'src/shapes/arc-segment.js',\n 'src/effects/image-sequence.js',\n];\n\nif (typeof module != 'undefined' && module.exports) {\n module.exports = sourceFiles;\n} else if (typeof define === 'function' && define.amd) {\n define('source-files', [], function () {\n return sourceFiles;\n });\n}\n"
},
{
"path": "wiki/.vuepress/components/carbon-ads.vue",
"content": "\n\n\n"
},
{
"path": "wiki/.vuepress/components/custom-button.vue",
"content": "\n \n \n \n {{ text }}\n \n \n {{ size }}\n \n \n\n\n\n\n\n"
},
{
"path": "wiki/.vuepress/components/example-card.vue",
"content": "\n \"><%= item.prefixname %><%= item.shortname %>
\n\n<% if (item.overloaded) { %>\n\n\n_Overloaded_\n\n
\n<% } %>\n\n<% if (item.returns && item.returns.length == 1) { %>\n\n\n__Returns__: <% _.each(item.returns, function(result) { %><% if (result.type) { %><% _.each(result.type.names, function(name) { %><%= name.replace(/([<>])/ig, '\\\\$1') %><% }); %>\n<% } %>\n<% if (result.description) { %>\n<%= result.description %>\n<% } %>\n<% }); %>\n
\n<% } %>\n\n<% if (item.returns && item.returns.length > 1) { %>\n\n\n__Returns__:\n<% _.each(item.returns, function(result) { %>\n<% if (result.type) { %>\n<% _.each(result.type.names, function(name) { %>\n+ `<%= name.replace(/([<>])/ig, '\\\\$1') %>`\n<% }); %>\n<% } %>\n<% if (result.description) { %>\n<%= result.description %>\n<% } %>\n<% }); %>\n
\n<% } %>\n\n<% if (item.fires && item.fires.length > 0) { %>\n\n\n__Triggers__:\n<% _.each(item.fires, function(name) { %>\n+ `<%= name %>`\n<% }); %>\n
\n<% } %>\n\n<% if (item.properties && item.properties.length > 0) { %>\n\n<% _.each(item.properties, function(property, i) { %>\n<% if (i > 0) { %>\n__<%= property.name %>__: <%= package.template(property.description) %>\n<% } else { %>\n<%= package.template(property.description) %>\n<% } %>\n<% }); %>\n
\n<% } %>\n\n<% if (item.params && item.params.length > 0 ) { %>\n\n<% _.each(item.params, function(param, i) { %><% if (i <= 0) { %>\n| Argument | Description |\n| ---- | ----------- |\n| <% if (param.name) { %> <%= param.name %> <% } %> | <%= param.description %> |<% } else { %>\n| <% if (param.name) { %> <%= param.name %> <% } %> | <%= param.description %> |<% } %><% }); %>\n
\n<% } %>\n\n\n<% if (item.description) { %>\n\n\n<%= item.description %>\n\n
\n<% } %>\n\n<% if (item.see && item.see.length > 0) { %>\n\n\nSee: <%= _.map(item.see, function(see) { return see; }).join(', ') %>\n\n
\n<% } %>\n\n<% if (item.meta) { %>\n\n<% } %>\n\n<% if (item.tags && item.tags.length > 0) { %>\n\n<% } %>\n\n\n\n
\n\n\n\n\n\n"
},
{
"path": "wiki/.vuepress/components/inline-editor.vue",
"content": "\n {{ title }}
\n\n \n \n\n {{ title }}\n
\n \n\n \n\n \n \n \n \n \n {{ s.title || s.path }}\n > {{ s.header.title }}\n \n \n \n
\n\n\n\n\n\n"
},
{
"path": "wiki/.vuepress/plugins/search/match-query.js",
"content": "import get from 'lodash/get';\n\nexport default (query, page, additionalStr = null) => {\n let domain = get(page, 'title', '');\n\n if (get(page, 'frontmatter.tags')) {\n domain += ` ${page.frontmatter.tags.join(' ')}`;\n }\n\n if (additionalStr) {\n domain += ` ${additionalStr}`;\n }\n\n return matchTest(query, domain);\n};\n\nconst matchTest = (query, domain) => {\n const escapeRegExp = (str) => str.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\n\n // eslint-disable-next-line no-control-regex\n const nonASCIIRegExp = new RegExp('[^\\x00-\\x7F]');\n\n const words = query\n .split(/\\s+/g)\n .map((str) => str.trim())\n .filter((str) => !!str);\n\n if (!nonASCIIRegExp.test(query)) {\n // if the query only has ASCII chars, treat as English\n const hasTrailingSpace = query.endsWith(' ');\n const searchRegex = new RegExp(\n words\n .map((word, index) => {\n if (words.length === index + 1 && !hasTrailingSpace) {\n // The last word - ok with the word being \"startswith\"-like\n return `(?=.*\\\\b${escapeRegExp(word)})`;\n } else {\n // Not the last word - expect the whole word exactly\n return `(?=.*\\\\b${escapeRegExp(word)}\\\\b)`;\n }\n })\n .join('') + '.+',\n 'gi'\n );\n return searchRegex.test(domain);\n } else {\n // if the query has non-ASCII chars, treat as other languages\n return words.some((word) => domain.toLowerCase().indexOf(word) > -1);\n }\n};\n"
},
{
"path": "wiki/.vuepress/styles/index.styl",
"content": "body {\n font-family: $fontFamily;\n font-size: 1rem;\n line-height: 1.5rem;\n // word-spacing: 0.1875rem;\n color: $textColor;\n\n .sidebar-open {\n overflow: hidden;\n width: 100vw;\n height: 100vh;\n }\n\n p {\n line-height: 1.5rem;\n margin-top: 0;\n margin-bottom: 1.25rem;\n }\n\n .edit-link span {\n display: none;\n }\n\n #carbonads {\n margin-top: 2rem;\n }\n\n .page-edit .edit-link a,\n .page a {\n color: $green;\n text-decoration: none;\n font-weight: 600;\n transition: color .2s, border-color .2s, background-color .2s;\n word-break: break-word;\n border-bottom: 1px solid $green;\n\n span { //the .icon.outbound is contained in a span that adds a space to the end of links.\n display: none;\n }\n\n &:visited {\n text-decoration: none;\n }\n &:hover {\n color: tint($green, 30%);\n text-decoration: none;\n border-bottom-color: tint($green, 60%);\n }\n &.header-anchor {\n border-bottom-width: 0;\n display: none;\n }\n }\n\n .theme-default-content {\n\n code {\n font-family: $codeFamily;\n font-size: .85rem;\n line-height: 100%;\n color: shade($codeColor, 50%);\n padding: .2rem .4rem;\n border-radius: 4px;\n background: #f6f6f6;\n word-break: break-word; //possibly only for mobile.\n }\n\n pre[class*=\"language-\"] code {\n color: $textColor;\n font-size: 1rem;\n }\n\n div[class*=\"language-\"]::before {\n color: transparent;\n }\n\n code[class*=\"language-\"],\n pre[class*=\"language-\"] {\n color: #ccc;\n background: none;\n font-family: $codeFamily;\n // font-weight: 700;\n font-size: 1rem;\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n word-wrap: normal;\n line-height: 1.5rem;\n\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n\n }\n\n /* Code blocks */\n pre[class*=\"language-\"] {\n padding: 1rem;\n margin: .5em 0;\n overflow: auto;\n font-weight: 600;\n font-size: 1rem;\n }\n\n :not(pre) > code[class*=\"language-\"],\n pre[class*=\"language-\"] {\n // background: #2d2d2d;\n }\n\n /* Inline code */\n :not(pre) > code[class*=\"language-\"] {\n padding: .1rem;\n border-radius: .3rem;\n white-space: normal;\n }\n\n .token.comment,\n .token.block-comment,\n .token.prolog,\n .token.doctype,\n .token.cdata {\n // color: #999;\n color: $codeColor;\n font-style: italic;\n }\n\n .token.punctuation {\n // color: #ccc;\n color: $codeColor;\n }\n\n .token.tag,\n .token.attr-name,\n .token.namespace,\n .token.deleted {\n // color: #e2777a;\n color: $codeColor;\n }\n\n .token.function-name {\n // color: #6196cc;\n color: $codeColor;\n }\n\n .token.boolean {\n color: #2aa89a;\n }\n\n .token.number {\n color: rgb(255, 64, 64);\n // color: #f08d49;\n }\n\n .token.function {\n color: $codeColor;\n }\n\n .token.property,\n .token.class-name,\n .token.constant,\n .token.symbol {\n // color: #f8c555;\n color: rgb(255, 64, 64);\n }\n\n .token.selector,\n .token.important,\n .token.atrule,\n .token.keyword,\n .token.builtin {\n // color: #cc99cd;\n color: #7a52cc;\n }\n\n .token.string,\n .token.char,\n .token.attr-value,\n .token.regex,\n .token.variable {\n // color: #7ec699;\n color: rgb(255, 128, 0);\n }\n\n .token.operator,\n .token.entity,\n .token.url {\n // color: #67cdcc;\n color: $codeColor;\n }\n\n .token.important,\n .token.bold {\n font-weight: bold;\n }\n .token.italic {\n font-style: italic;\n }\n\n .token.entity {\n cursor: help;\n }\n\n .token.inserted {\n // color: green;\n color: $codeColor;\n }\n\n }\n\n div[class*=\"language-\"] {\n background: rgba(255,244,95,.2);\n border: none;\n font-weight: bold;\n color: $codeColor;\n }\n\n .theme-default-content div[class*=\"language-\"] {\n margin: 0.85rem 0rem;\n border-radius: 0;\n }\n\n div.inspiration {\n margin-bottom: 1.5rem;\n margin-left: -0.5rem;\n margin-right: -0.5rem;\n ul {\n list-style: none;\n padding: 0;\n li {\n display: inline-block;\n // padding: 0 !important;\n padding: 0 0.4rem 0.5rem 0.4rem !important;\n margin: 0 0.25rem;\n position: relative;\n a {\n text-align: center;\n display: block;\n width: 100%;\n height: 100%;\n padding: 0.5rem !important;\n border: 1px solid $green;\n border-radius: 0.33rem;\n &:hover {\n border-color: tint($green, 30%);\n }\n }\n }\n }\n }\n\n div.project-footnote {\n text-align: center;\n font-size: 85%;\n margin-bottom: 2rem;\n a {\n color: tint($black, 15%);\n font-weight: normal;\n border-bottom: none;\n text-decoration: underline;\n &:hover {\n color: tint($black, 30%);\n border-bottom: none;\n text-decoration: underline !important;\n }\n }\n p {\n margin: 0;\n }\n }\n\n}\n\n.theme-default-content:not(.custom) {\n a:hover {\n text-decoration: none;\n }\n\n .icon.outbound {\n padding-left: 5px;\n }\n\n h1 {\n font-size: 2.25rem;\n }\n h1:first-child + p {\n margin-top: 1rem;\n }\n h2 {\n border: none;\n padding: 4rem 0 0 0;\n margin: -1rem 0 0 0;\n height: 0;\n overflow: hidden;\n pointer-events: none;\n }\n h2.longname {\n visibility: visible;\n font-size: 1.25rem;\n padding: 0;\n margin: 0 0 1.5rem 0;\n height: auto;\n\n a{\n color: $orange;\n text-decoration: none;\n border-left: 2px solid $orange;\n padding: .25rem 0 .4rem 1.25rem;\n\n &:hover {\n color: $red;\n border-color: $red;\n }\n }\n\n span {\n display: inline-block;\n }\n\n .prefix {\n //font-weight: normal;\n }\n\n .shortname {\n //font-weight: 600;\n }\n }\n h3 {\n display: inline-block;\n font-size: 1.25rem;\n border: none;\n border-top: 2px solid $black;\n padding-top: .625rem;\n margin: 2.5rem 0 1.25rem 0;\n }\n h3.visible {\n margin-top: 0;\n\n a {\n color: inherit;\n font-weight: inherit;\n border-bottom: none;\n\n &:hover {\n color: inherit;\n border-bottom: none;\n }\n }\n }\n h4 {\n margin: 0 0 .25rem 0;\n padding: 0rem;\n }\n ul {\n margin: 0;\n }\n li {\n padding-left: .5rem;\n }\n}\n\n.custom-block.tip {\n background-color: tint($purple, 90);\n color: $purple;\n border: none;\n margin: 1.5rem 0;\n padding: 1rem 1rem 1rem 3.5rem;\n position: relative;\n\n p:last-child {\n margin-bottom: 0;\n }\n\n .custom-block-title {\n position: absolute;\n top: 1rem;\n left: 1rem;\n width: 1.5rem;\n height: 1.5rem;\n background: transparent;\n color: transparent;\n overflow: hidden;\n text-indent: -999px;\n background-image: url(/images/info.svg);\n background-position: center;\n background-size: 100%;\n background-repeat: no-repeat;\n }\n\n a {\n color: $purple;\n border-bottom: 1px solid lighten($purple, 40%);\n\n &:hover {\n color: lighten($purple, 40%);\n border-bottom-color: lighten($purple, 60%);\n text-decoration: none;\n }\n }\n\n code {\n color: $purple;\n background: transparent;\n }\n}\n\n\n.docs {\n .sidebar {\n .sidebar-sub-headers {\n margin-left: 2.4rem;\n padding-left: 0px;\n font-size: 1rem;\n\n a.sidebar-link {\n padding-left: 0.75rem;\n color: $green;\n border-left: 2px solid tint($green, 20%);\n padding-top: 0.125rem;\n padding-bottom: 0.125rem;\n\n &:hover {\n color: $orange;\n border-left: 2px solid tint($orange, 20%);\n }\n\n &:.active {\n color: $green;\n }\n }\n }\n }\n div.fires {\n padding-bottom: 1rem;\n & > p {\n margin-bottom: 0.5rem;\n }\n }\n .page {\n table {\n tr {\n th:first-child,\n td:first-child {\n text-align: center;\n }\n td:first-child {\n font-family: $codeFamily;\n }\n }\n }\n div.member {\n h2.longname {\n a {\n color: $blue;\n border-left: 2px solid $blue;\n }\n }\n }\n div.function {\n h2.longname {\n a {\n color: $orange;\n border-left: 2px solid $orange;\n }\n }\n }\n }\n}\n\n\n.examples {\n\n .examples-wrapper {\n display: flex;\n flex-wrap: wrap;\n margin: 0 -1rem;\n }\n\n .example {\n\n padding: 0 0.5rem 1rem;\n width: calc(25% - 1rem);\n\n h2 {\n margin-top: -4rem;\n }\n\n h3 {\n font-size: 0;\n border: none;\n margin: 0;\n padding: 0;\n }\n\n a.cover {\n border-bottom none !important;\n &:hover {\n border-bottom none !important;\n }\n }\n\n .thumb {\n border-radius: .5rem .5rem 0 0;\n border-top: 1px solid $arrowBgColor;\n border-left: 1px solid $arrowBgColor;\n border-right: 1px solid $arrowBgColor;\n box-sizing: border-box;\n }\n\n .tags {\n display: flex;\n flex-wrap: wrap;\n padding: 0.75rem 0.75rem 0.5rem;\n border-radius: 0 0 .5rem .5rem;\n border: 1px solid $arrowBgColor;\n }\n }\n\n}\n\n.change-log .sidebar {\n .sidebar-link {\n display:none;\n }\n .sidebar-sub-headers {\n padding: 0;\n font-size: 1rem;\n\n a.sidebar-link {\n display:inline-block;\n font-size: 1rem;\n line-height: 1.7rem;\n font-weight: 600;\n padding: 0.35rem 1rem 0.35rem 1.25rem;\n border-left: 0.25rem solid transparent;\n }\n }\n}\n\nth {\n font-weight: 600;\n}\n\ntr {\n background-color: #f9f9f9;\n}\n\ntr:nth-child(2n), thead tr {\n background-color: transparent;\n}\n\ntable {\n border-collapse: separate;\n border-spacing: 0;\n}\ntable tr th,\ntable tr td {\n border: none;\n border-right: 1px solid #eee;\n border-bottom: 1px solid #eee;\n}\ntable tr th:first-child,\ntable tr td:first-child {\n border-left: 1px solid #eee;\n}\ntable tr th {\n background: transparent;\n border-top: 1px solid #eee;\n text-align: left;\n}\n\n/* top-left border-radius */\ntable tr:first-child th:first-child {\n border-top-left-radius: 6px;\n}\n\n/* top-right border-radius */\ntable tr:first-child th:last-child {\n border-top-right-radius: 6px;\n}\n\n/* bottom-left border-radius */\ntable tr:last-child td:first-child {\n border-bottom-left-radius: 6px;\n}\n\n/* bottom-right border-radius */\ntable tr:last-child td:last-child {\n border-bottom-right-radius: 6px;\n}\n\n.page a.lineno {\n color: lighten($codeColor, 40%);\n font-family: $codeFamily;\n // font-weight: 700;\n font-size: .85rem;\n line-height: 100%;\n word-break: break-word; //possibly only for mobile.\n border-bottom 1px solid lighten($codeColor, 40%);\n padding-bottom: 0.2rem;\n\n &:hover {\n border-bottom-color: $codeColor;\n color: $codeColor;\n }\n}\n\n.change-log .version {\n font-size: 1.25rem;\n margin-left: .5rem;\n display: inline-block;\n\n p { display: inline; }\n}\n\n.returns {\n margin: 0 0 1.25rem 0;\n}\n\n.sidebar, .page {\n transition: opacity .35s ease-in-out;\n}\n.search-open {\n .sidebar, .page {\n opacity: .5;\n }\n}\n\n.theme-container .sidebar-mask {\n display: block !important;\n}\n\n@media (max-width: $MQMobile) {\n\n .page {\n padding-top: 4rem;\n padding-bottom: 4rem !important;\n }\n\n .theme-default-content:not(.custom) {\n h2 {\n padding-top: 8rem;\n margin-top: -5rem;\n }\n }\n\n .examples .example {\n width: 100%;\n\n h2 {\n margin-top: -8rem;\n }\n }\n}\n"
},
{
"path": "wiki/.vuepress/styles/palette.styl",
"content": "$black = #333;\n$grey = #eee;\n$gray = $grey;\n$white = #fff;\n\n$red = rgb(255, 64, 64);\n$orange = rgb(255, 128, 0);\n$blue = rgb(0, 200, 255);\n$green = rgb(0, 191, 168);\n$purple = rgb(171, 130, 255);\n$yellow = rgb(255, 244, 95);\n\n//fonts\n$fontFamily = \"proxima-nova\", arial, sans-serif;\n$codeFamily = \"anonymous-pro\", monospace;\n\n// colors\n$accentColor = $orange;\n$textColor = #333;\n$sidebarText = #555;\n$codeColor = rgb(124,124,124);\n$borderColor = #eaecef;\n$codeBgColor = #282c34;\n$arrowBgColor = #ccc;\n$badgeTipColor = $purplebg;\n$badgeWarningColor = darken(#ffe564, 35%);\n$badgeErrorColor = #DA5961;\n\n// layout\n$navbarHeight = 3.6rem;\n$sidebarWidth = 20rem;\n$contentWidth = 860px;\n$homePageWidth = 960px;\n\n// responsive breakpoints\n$MQNarrow = 959px;\n$MQMobile = 719px;\n$MQMobileNarrow = 419px;\n$nprogressColor = $green\n"
},
{
"path": "wiki/.vuepress/theme/components/Navbar.vue",
"content": "\n \n
\n\n \n
\n\n\n\n"
},
{
"path": "wiki/README.md",
"content": "---\ntitle: Two.js • Homepage\nlang: en-US\n---\n\n# Two.js\n\nA two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.\n\n\n \n Take me home.\n \n
\n 404
\n\n{{ getMsg() }}\n\n
\n
\n\nDownload
\n\n\n
\n\n::: tip\nPrior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github.\n:::\n\nNode.js Version with npm:\n```\nnpm install --save two.js@latest\n```\n\n## Overview\n\nOverview
\n\n* #### Focus on Vector Shapes\n Two.js is deeply inspired by flat [motion graphics](http://en.wikipedia.org/wiki/Motion_graphics). As a result, two.js aims to make the creation and animation of flat shapes easier and more concise.\n\n* #### Scenegraph\n At its core two.js relies on a [scenegraph](http://en.wikipedia.org/wiki/Scene_graph). This means that when you draw or create an object (a Two.Path or Two.Group), two actually stores and remembers that. After you make the object you can apply any number of operations to it — e.g: rotation, position, scale, etc..\n\n* #### Animation Loop\n Two.js has a built in animation loop. It is simple in nature and can be automated or paired with another animation library. For more information check out the [examples](/examples/).\n\n* #### SVG Interpreter\n Two.js features a [Scalable Vector Graphics](http://en.wikipedia.org/wiki/Scalable_Vector_Graphics) Interpreter. This means developers and designers alike can create SVG elements in commercial applications like [Adobe Illustrator](http://www.adobe.com/products/illustrator) and bring them into your two.js scene. For more information check out the [examples](/examples/).\n\n* #### Friends with Bitmap Imagery\n Despite its early focus on easing vector shape creation and animation, Two.js offers many easy-to-use features to handle and render bitmap images. Easily load single images, sprite sheets, and image sequences with just a few method calls.\n\n## Basic Usage\n\nBasic Usage
\n\nIn order to start any of these demos you'll want to [download](#download) two.js and add it to your HTML document. Once downloaded add this tag to the `` of your document: ``. When you visit the page, you should be able to open up the console and type `Two`. If this returns a function (and not an error) then you're ready to begin!\n\n## Drawing Your First Shapes\n\nDrawing Your First Shapes
\n\nBefore we get into all the fancy animating it's good to get a feel for how to make shapes in two.js. In order to do this we need to have an instance of two. This sets up a dom element that contains either an svg or canvas element to add to the webpage. The two object has a scene which holds all shapes as well as methods for creating shapes.\n\n::: tip\nFor a list of all properties and construction parameters check out the [documentation](./docs/).\n:::\n\nShapes and Groups
\n\nAdding shapes to groups makes managing multiple shapes easier and more sane. Group's provide an easy way to move your content through `position`, `rotation`, and `scale`. These operations emit from the coordinate space `(0, 0)`. In the example below we can see that the initial orientation of the circle and rectangle changed from the first example. These shapes are oriented around `(0, 0)`, which allows us to transform the group around the centeroid of the shapes. In addition Group's styling operations trickle down and apply to each shape.\n\nAdding Motion
\n\nFinally, let's add some motion to our shapes. So far the examples use `two.update();` to draw content to the screen. The instance of two.js has two particular methods for animation. The first is `two.play();` which calls `two.update();` at 60 frames-per-second. This rate, however, will slowdown if there's too much content to render per frame.\n\nThe second method is `two.bind();` This method takes a string as its first parameter indicating what event to listen to and a function as its second argument delineating what to do when the event described in the first parameter happens. To sync a function with the animation loop simply invoke `two.bind('update', referenceToFunction);` as outlined below:\n\n\n\n#### Project Credits\n\nTwo.js is dependency free, but its creation would not have been possible without these great contributions to the JavaScript ecosystem:\n\n
\n\n+ [Three.js](http://threejs.org/)\n+ [Vuepress](https://vuepress.vuejs.org/)\n+ [Underscore.js](https://underscorejs.org/)\n+ [Backbone.js](https://backbonejs.org/)\n+ [QUnit](https://qunitjs.com/)\n+ [Resemble.js](https://github.com/rsmbl/Resemble.js)\n+ [Canvas2Blob](https://github.com/blueimp/JavaScript-Canvas-to-Blob)\n+ [jsdoc](https://jsdoc.app/)\n+ [ESLint](https://eslint.org/)\n+ [rollup.js](https://rollupjs.org/)\n\n
\n\n\n\nTwo.js is a project by [Jono](http://jono.fyi/) and numerous [contributors](https://github.com/jonobr1/two.js/graphs/contributors) • Site design by [Yuin](https://yuinchien.com/) • Site development in collaboration with [Tonia](https://toniab.com/)\n\n
\n\nPublished under the [MIT License](https://github.com/jonobr1/two.js/blob/dev/LICENSE) © 2012 – {{ 1900 + new Date().getYear() }}\n\n[Safety & Security](/security) • [Privacy Policy](/privacy)\n\n
\n"
},
{
"path": "wiki/change-log/README.md",
"content": "\n\nPublished under the [MIT License](https://github.com/jonobr1/two.js/blob/dev/LICENSE) © 2012 – {{ 1900 + new Date().getYear() }}\n\n[Safety & Security](/security) • [Privacy Policy](/privacy)\n\n
Dec 22, 2025
Dec 3, 2025
Oct 1, 2025
Sep 8, 2025
Jun 27, 2025
Apr 8, 2025
Mar 17, 2025
Feb 13, 2025
Dec 31, 2024
Jun 10, 2024
Feb 22, 2024
Oct 16, 2023
Aug 7, 2023
Jun 9, 2022
May 9, 2022
Mar 29, 2022
Jan 29, 2022
Jan 21, 2022
Jan 10, 2022
Dec 15, 2021
Nov 24, 2021
Nov 20, 2021
Nov 11, 2021
Jul 13, 2021
Jul 10, 2021
Apr 23, 2021
Apr 2, 2021
Mar 26, 2021
Jan 12, 2021
Jan 22, 2020
Dec 8, 2018
Nov 18, 2018
Nov 3, 2018
Dec 1, 2017
Feb 9, 2016
Oct 1, 2015
Jul 22, 2014
Oct 25, 2013
May 3, 2013
Jan 29, 2013
\n\nExtends: [Two.Vector](/docs/vector/)\n\n
\n\n\nAn object that holds 3 [Two.Vector](/docs/vector/)s, the anchor point and its corresponding handles: `left` and `right`. In order to properly describe the bezier curve about the point there is also a command property to describe what type of drawing should occur when Two.js renders the anchors.\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Anchor.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Anchor\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Anchor](/docs/anchor/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Anchor](/docs/anchor/) from an object notation of a [Two.Anchor](/docs/anchor/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Anchor.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v | The anchor to apply values to. |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Anchor](/docs/anchor/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Anchor.clone
\n\n\n\n\n\n\n__Returns__: Two.Anchor\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCreate a new [Two.Anchor](/docs/anchor/), set all its values to the current instance and return it for use.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.Anchor.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n- An object with properties filled out to mirror [Two.Anchor](/docs/anchor/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCreate a JSON compatible plain object of the current instance. Intended for use with storing values in a database.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## toString\n\n
\n\n\n"
},
{
"path": "wiki/docs/children/README.md",
"content": "---\ntitle: Two.Group.Children\npageClass: docs\nlang: en-US\n---\n\n# Two.Group.Children\n\n\nTwo.Anchor.toString
\n\n\n\n\n\n\n__Returns__: String\n\n\n- A String with comma-separated values reflecting the various values on the current instance.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCreate a string form of the current instance. Intended for use with storing values in a database. This is lighter to store than the JSON compatible [Two.Anchor.toObject](/docs/anchor/#toobject).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Collection](/docs/collection/)\n\n
\n\n\nA children collection which is accesible both by index and by object `id`.\n\n\n\n\n\n\n\n## Children.ids\n\n
\n\n\n\nTwo.Group.Children.ids
\n\n\n\n\n\n\n\n\n\n\n\n\n\nMap of all elements in the list keyed by `id`s.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Children.attach\n\n
\n\n\n\nTwo.Group.Children.attach
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| children | The objects which extend [Two.Shape](/docs/shape/) to be added. |\n
\n\n\n\n\n\n\nAdds elements to the `ids` map.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## Children.detach\n\n
\n\n\n"
},
{
"path": "wiki/docs/collection/README.md",
"content": "---\ntitle: Two.Collection\npageClass: docs\nlang: en-US\n---\n\n# Two.Collection\n\n\nTwo.Group.Children.detach
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| children | The objects which extend [Two.Shape](/docs/shape/) to be removed. |\n
\n\n\n\n\n\n\nRemoves elements to the `ids` map.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Events](/docs/events/)\n\n
\n\n\nAn `Array` like object with additional event propagation on actions. `pop`, `shift`, and `splice` trigger `removed` events. `push`, `unshift`, and `splice` with more than 2 arguments trigger 'inserted'. Finally, `sort` and `reverse` trigger `order` events.\n\n\n\n\n\n\n\nExtends: [Two.Element](/docs/element/)\n\n
\n\n\nThis is the base class for constructing different types of gradients with Two.js. The two common gradients are [Two.LinearGradient](/docs/effects/linear-gradient/) and [Two.RadialGradient](/docs/effects/radial-gradient/).\n\n\n\n\n\n\n\n## Stop\n\n
\n\n\n\nTwo.Gradient.Stop
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSee: [Two.Stop](/docs/effects/stop/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Gradient.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Gradient](/docs/effects/gradient/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Gradient.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Gradient\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Gradient](/docs/effects/gradient/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Gradient](/docs/effects/gradient/) from an object notation of a [Two.Gradient](/docs/effects/gradient/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## spread\n\n
\n\n\n\nTwo.Gradient.spread
\n\n\n\n\n\n\n\n\n\n\n\n\n\nIndicates what happens if the gradient starts or ends inside the bounds of the target rectangle. Possible values are `'pad'`, `'reflect'`, and `'repeat'`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [https://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementSpreadMethodAttribute](https://www.w3.org/TR/SVG11/pservers.html#LinearGradientElementSpreadMethodAttribute) for more information\n\n
\n\n\n\n\n\n\n\n\n\n\n## units\n\n
\n\n\n\nTwo.Gradient.units
\n\n\n\n\n\n\n\n\n\n\n\n\n\nIndicates how coordinate values are interpreted by the renderer. Possible values are `'userSpaceOnUse'` and `'objectBoundingBox'`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [https://www.w3.org/TR/SVG11/pservers.html#RadialGradientElementGradientUnitsAttribute](https://www.w3.org/TR/SVG11/pservers.html#RadialGradientElementGradientUnitsAttribute) for more information\n\n
\n\n\n\n\n\n\n\n\n\n\n## stops\n\n
\n\n\n\nTwo.Gradient.stops
\n\n\n\n\n\n\n\n\n\n\n\n\n\nAn ordered list of [Two.Stop](/docs/effects/stop/)s for rendering the gradient.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Gradient.clone
\n\n\n\n\n\n\n__Returns__: Two.Gradient\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Gradient](/docs/effects/gradient/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Gradient.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| gradient | The reference [Two.Gradient](/docs/effects/gradient/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Gradient](/docs/effects/gradient/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.Gradient.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## dispose\n\n
\n\n\n"
},
{
"path": "wiki/docs/effects/image/README.md",
"content": "---\ntitle: Two.Image\npageClass: docs\nlang: en-US\n---\n\n# Two.Image\n\n\nTwo.Gradient.dispose
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nDetach instance from renderer including any `
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Rectangle](/docs/shapes/rectangle/)\n\n
\n\n\nA convenient package to display images scaled to fit specific dimensions. Unlike [Two.Sprite](/docs/effects/sprite/), this class scales the image to the provided width and height rather than using the image's native dimensions. By default, images are scaled to 'fill' within the bounds while preserving aspect ratio.\n\n\n\n\n\n\n\n## Modes\n\n
\n\n\n\nTwo.Image.Modes
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDifferent mode types to render an image inspired by Figma.\n\n\n\n__Modes.fill__: Scale image to fill the bounds while preserving aspect ratio.\n\n\n\n__Modes.fit__: Scale image to fit within bounds while preserving aspect ratio.\n\n\n\n__Modes.crop__: Scale image to fill bounds while preserving aspect ratio, cropping excess.\n\n\n\n__Modes.tile__: Repeat image at original size to fill the bounds.\n\n\n\n__Modes.stretch__: Stretch image to fill dimensions, ignoring aspect ratio.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Image.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Image](/docs/effects/image/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Image.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Image\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Image](/docs/effects/image/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Image](/docs/effects/image/) from an object notation of a [Two.Image](/docs/effects/image/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## texture\n\n
\n\n\n\nTwo.Image.texture
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe texture to be used as bitmap data to display image in the scene.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Image.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| image | The reference [Two.Image](/docs/effects/image/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Image](/docs/effects/image/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Image.clone
\n\n\n\n\n\n\n__Returns__: Two.Image\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Image](/docs/effects/image/) with the same properties of the current image.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.Image.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the image.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## dispose\n\n
\n\n\n"
},
{
"path": "wiki/docs/effects/image-sequence/README.md",
"content": "---\ntitle: Two.ImageSequence\npageClass: docs\nlang: en-US\n---\n\n# Two.ImageSequence\n\n\nTwo.Image.dispose
\n\n\n\n\n\n\n__Returns__: Two.Image\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRelease the image's renderer resources and detach all events.\nThis method disposes the texture (calling dispose() for thorough cleanup) and inherits comprehensive\ncleanup from the Rectangle/Path hierarchy while preserving the renderer type\nfor potential re-attachment.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Rectangle](/docs/shapes/rectangle/)\n\n
\n\n\nA convenient package to display still or animated images organized as a series of still images.\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.ImageSequence.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.ImageSequence](/docs/effects/image-sequence/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## DefaultFrameRate\n\n
\n\n\n\nTwo.ImageSequence.DefaultFrameRate
\n\n\n\n\n\n\n\n\n\n\n\n\n\ndefault frame rate that [Two.ImageSequence.frameRate](/docs/effects/image-sequence/#framerate) is set to when instantiated.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.ImageSequence.fromObject
\n\n\n\n\n\n\n__Returns__: Two.ImageSequence\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.ImageSequence](/docs/effects/image-sequence/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.ImageSequence](/docs/effects/image-sequence/) from an object notation of a [Two.ImageSequence](/docs/effects/image-sequence/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## textures\n\n
\n\n\n\nTwo.ImageSequence.textures
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of textures to be used as frames for animating the [Two.ImageSequence](/docs/effects/image-sequence/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## frameRate\n\n
\n\n\n\nTwo.ImageSequence.frameRate
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe number of frames to animate against per second.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## index\n\n
\n\n\n\nTwo.ImageSequence.index
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe index of the current tile of the sprite to display. Defaults to `0`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.ImageSequence.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| imageSequence | The reference [Two.ImageSequence](/docs/effects/image-sequence/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.ImageSequence](/docs/effects/image-sequence/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## play\n\n
\n\n\n\nTwo.ImageSequence.play
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| firstFrame | The index of the frame to start the animation with. |\n| lastFrame | 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). |\n| onLastFrame | Optional callback function to be triggered after playing the last frame. This fires multiple times when the image sequence is looped. |\n
\n\n\n\n\n\n\nInitiate animation playback of a [Two.ImageSequence](/docs/effects/image-sequence/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## pause\n\n
\n\n\n\nTwo.ImageSequence.pause
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHalt animation playback of a [Two.ImageSequence](/docs/effects/image-sequence/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## stop\n\n
\n\n\n\nTwo.ImageSequence.stop
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHalt animation playback of a [Two.ImageSequence](/docs/effects/image-sequence/) and set the current frame back to the first frame.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.ImageSequence.clone
\n\n\n\n\n\n\n__Returns__: Two.ImageSequence\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.ImageSequence](/docs/effects/image-sequence/) with the same properties of the current image sequence.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.ImageSequence.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## dispose\n\n
\n\n\n"
},
{
"path": "wiki/docs/effects/linear-gradient/README.md",
"content": "---\ntitle: Two.LinearGradient\npageClass: docs\nlang: en-US\n---\n\n# Two.LinearGradient\n\n\nTwo.ImageSequence.dispose
\n\n\n\n\n\n\n__Returns__: Two.ImageSequence\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRelease the image sequence's renderer resources and detach all events.\nThis method stops any running animation, clears animation callbacks, unbinds\ntextures collection events, and disposes individual textures (calling dispose()\nfor thorough cleanup) while preserving the renderer type for potential\nre-attachment to a new renderer.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Gradient](/docs/effects/gradient/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Stop\n\n
\n\n\n\nTwo.LinearGradient.Stop
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSee: [Two.Stop](/docs/effects/stop/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.LinearGradient.fromObject
\n\n\n\n\n\n\n__Returns__: Two.LinearGradient\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.LinearGradient](/docs/effects/linear-gradient/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.LinearGradient](/docs/effects/linear-gradient/) from an object notation of a [Two.LinearGradient](/docs/effects/linear-gradient/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## left\n\n
\n\n\n\nTwo.LinearGradient.left
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe x and y value for where the first end point is placed on the canvas.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## right\n\n
\n\n\n\nTwo.LinearGradient.right
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe x and y value for where the second end point is placed on the canvas.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.LinearGradient.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| gradient | The reference [Two.LinearGradient](/docs/effects/linear-gradient/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.LinearGradient](/docs/effects/linear-gradient/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.LinearGradient.clone
\n\n\n\n\n\n\n__Returns__: Two.Gradient\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.LinearGradient](/docs/effects/linear-gradient/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n"
},
{
"path": "wiki/docs/effects/radial-gradient/README.md",
"content": "---\ntitle: Two.RadialGradient\npageClass: docs\nlang: en-US\n---\n\n# Two.RadialGradient\n\n\nTwo.LinearGradient.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Gradient](/docs/effects/gradient/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Stop\n\n
\n\n\n\nTwo.RadialGradient.Stop
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSee: [Two.Stop](/docs/effects/stop/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.RadialGradient.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.RadialGradient](/docs/effects/radial-gradient/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.RadialGradient.fromObject
\n\n\n\n\n\n\n__Returns__: Two.RadialGradient\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.RadialGradient](/docs/effects/radial-gradient/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.RadialGradient](/docs/effects/radial-gradient/) from an object notation of a [Two.RadialGradient](/docs/effects/radial-gradient/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## center\n\n
\n\n\n\nTwo.RadialGradient.center
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe x and y value for where the origin of the radial gradient is.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## focal\n\n
\n\n\n\nTwo.RadialGradient.focal
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe x and y value for where the focal point of the radial gradient is.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.RadialGradient.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| gradient | The reference [Two.RadialGradient](/docs/effects/radial-gradient/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.RadialGradient](/docs/effects/radial-gradient/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.RadialGradient.clone
\n\n\n\n\n\n\n__Returns__: Two.RadialGradient\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.RadialGradient](/docs/effects/radial-gradient/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n"
},
{
"path": "wiki/docs/effects/sprite/README.md",
"content": "---\ntitle: Two.Sprite\npageClass: docs\nlang: en-US\n---\n\n# Two.Sprite\n\n\nTwo.RadialGradient.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Rectangle](/docs/shapes/rectangle/)\n\n
\n\n\nA convenient package to display still or animated images through a tiled image source. For more information on the principals of animated imagery through tiling see [Texture Atlas](https://en.wikipedia.org/wiki/Texture_atlas) on Wikipedia.\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Sprite.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Sprite](/docs/effects/sprite/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Sprite.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Sprite\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Sprite](/docs/effects/sprite/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Sprite](/docs/effects/sprite/) from an object notation of a [Two.Sprite](/docs/effects/sprite/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## texture\n\n
\n\n\n\nTwo.Sprite.texture
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe texture to be used as bitmap data to display image in the scene.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## columns\n\n
\n\n\n\nTwo.Sprite.columns
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe number of columns to split the texture into. Defaults to `1`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## rows\n\n
\n\n\n\nTwo.Sprite.rows
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe number of rows to split the texture into. Defaults to `1`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## frameRate\n\n
\n\n\n\nTwo.Sprite.frameRate
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe number of frames to animate against per second. Defaults to `0` for non-animated sprites.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## index\n\n
\n\n\n\nTwo.Sprite.index
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe index of the current tile of the sprite to display. Defaults to `0`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Sprite.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| sprite | The reference [Two.Sprite](/docs/effects/sprite/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Sprite](/docs/effects/sprite/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## play\n\n
\n\n\n\nTwo.Sprite.play
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| firstFrame | The index of the frame to start the animation with. |\n| lastFrame | The index of the frame to end the animation with. Defaults to the last item in the [Two.Sprite.textures](/docs/effects/sprite/#textures). |\n| onLastFrame | Optional callback function to be triggered after playing the last frame. This fires multiple times when the sprite is looped. |\n
\n\n\n\n\n\n\nInitiate animation playback of a [Two.Sprite](/docs/effects/sprite/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## pause\n\n
\n\n\n\nTwo.Sprite.pause
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHalt animation playback of a [Two.Sprite](/docs/effects/sprite/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## stop\n\n
\n\n\n\nTwo.Sprite.stop
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nHalt animation playback of a [Two.Sprite](/docs/effects/sprite/) and set the current frame back to the first frame.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Sprite.clone
\n\n\n\n\n\n\n__Returns__: Two.Sprite\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Sprite](/docs/effects/sprite/) with the same properties of the current sprite.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.Sprite.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## dispose\n\n
\n\n\n"
},
{
"path": "wiki/docs/effects/stop/README.md",
"content": "---\ntitle: Two.Stop\npageClass: docs\nlang: en-US\n---\n\n# Two.Stop\n\n\nTwo.Sprite.dispose
\n\n\n\n\n\n\n__Returns__: Two.Sprite\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRelease the sprite's renderer resources and detach all events.\nThis method stops any running animation, clears animation callbacks, disposes\nthe texture (calling dispose() for thorough cleanup), and inherits comprehensive\ncleanup from the Rectangle/Path hierarchy while preserving the renderer type\nfor potential re-attachment.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Element](/docs/element/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Index\n\n
\n\n\n\nTwo.Stop.Index
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe current index being referenced for calculating a stop's default offset value.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Stop.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Stop](/docs/effects/stop/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Stop.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Stop\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Stop](/docs/effects/stop/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Stop](/docs/effects/stop/) from an object notation of a [Two.Stop](/docs/effects/stop/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## offset\n\n
\n\n\n\nTwo.Stop.offset
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe offset percentage of the stop represented as a zero-to-one value.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## opacity\n\n
\n\n\n\nTwo.Stop.opacity
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe alpha percentage of the stop represented as a zero-to-one value.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## color\n\n
\n\n\n\nTwo.Stop.color
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe color of the stop.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Stop.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| stop | The reference [Two.Stop](/docs/effects/stop/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Stop](/docs/effects/stop/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Stop.clone
\n\n\n\n\n\n\n__Returns__: Two.Stop\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent gradient to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Stop](/docs/effects/stop/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n"
},
{
"path": "wiki/docs/effects/texture/README.md",
"content": "---\ntitle: Two.Texture\npageClass: docs\nlang: en-US\n---\n\n# Two.Texture\n\n\nTwo.Stop.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Element](/docs/element/)\n\n
\n\n\nFundamental to work with bitmap data, a.k.a. pregenerated imagery, in Two.js. Supported formats include jpg, png, gif, and tiff. See [Two.Texture.RegularExpressions](/docs/effects/texture/#regularexpressions) for a full list of supported formats.\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Texture.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Texture](/docs/effects/texture/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Texture.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Texture\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Texture](/docs/effects/texture/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Texture](/docs/effects/texture/) from an object notation of a [Two.Texture](/docs/effects/texture/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## RegularExpressions\n\n
\n\n\n\nTwo.Texture.RegularExpressions
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA map of compatible DOM Elements categorized by media format.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## ImageRegistry\n\n
\n\n\n\nTwo.Texture.ImageRegistry
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA canonical listing of image data used in a single session of Two.js.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## getAbsoluteURL\n\n
\n\n\n\nTwo.Texture.getAbsoluteURL
\n\n\n\n\n\n\n__Returns__: String\n\n\n- The serialized absolute path.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSerializes a URL as an absolute path for canonical attribution in [Two.Texture.ImageRegistry](/docs/effects/texture/#imageregistry).\n\n\n
\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| path | |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## loadHeadlessBuffer\n\n
\n\n\n\nTwo.Texture.loadHeadlessBuffer
\n\n\n\n\n\n\n\n\n\n\n\n\n\nLoads an image as a buffer in headless environments.\n\n\n
\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| texture | The [Two.Texture](/docs/effects/texture/) to be loaded. |\n| onLoad | The callback function to be triggered once the image is loaded. |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n::: tip nota-bene\n- This function uses node's `fs.readFileSync` to spoof the `![]()
` loading process in the browser.\n:::\n\n\n
\n\n\n\n\n## getTag\n\n
\n\n\n\nTwo.Texture.getTag
\n\n\n\n\n\n\n__Returns__: String\n\n\n- Returns the tag name of an image, video, or canvas node.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nRetrieves the tag name of an image, video, or canvas node.\n\n\n
\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| image | The image to infer the tag name from. |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## getImage\n\n
\n\n\n\nTwo.Texture.getImage
\n\n\n\n\n\n\n__Returns__: HTMLImageElement\n\n\n- Returns either a cached version of the image or a new one that is registered in [Two.Texture.ImageRegistry](/docs/effects/texture/#imageregistry).\n\n\n
\n\n\n\n\n\n\n\n\n\n\nConvenience function to set [Two.Texture.image](/docs/effects/texture/#image) properties with canonical versions set in [Two.Texture.ImageRegistry](/docs/effects/texture/#imageregistry).\n\n\n
\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| src | The URL path of the image. |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Register\n\n
\n\n\n\nTwo.Texture.Register
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nA collection of functions to register different types of textures. Used internally by a [Two.Texture](/docs/effects/texture/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## load\n\n
\n\n\n\nTwo.Texture.load
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| texture | The texture to load. |\n| callback | The function to be called once the texture is loaded. |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## FlagOffset\n\n
\n\n\n\nTwo.Texture.FlagOffset
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCached method to let renderers know `offset` has been updated on a [Two.Texture](/docs/effects/texture/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## FlagScale\n\n
\n\n\n\nTwo.Texture.FlagScale
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCached method to let renderers know `scale` has been updated on a [Two.Texture](/docs/effects/texture/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## loaded\n\n
\n\n\n\nTwo.Texture.loaded
\n\n\n\n\n\n\n\n\n\n\n\n\n\nShorthand value to determine if image has been loaded into the texture.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## repeat\n\n
\n\n\n\nTwo.Texture.repeat
\n\n\n\n\n\n\n\n\n\n\n\n\n\nCSS style declaration to tile [Two.Path](/docs/path/). Valid values include: `'no-repeat'`, `'repeat'`, `'repeat-x'`, `'repeat-y'`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [https://www.w3.org/TR/2dcontext/#dom-context-2d-createpattern](https://www.w3.org/TR/2dcontext/#dom-context-2d-createpattern)\n\n
\n\n\n\n\n\n\n\n\n\n\n## offset\n\n
\n\n\n\nTwo.Texture.offset
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA two-component vector describing any pixel offset of the texture when applied to a [Two.Path](/docs/path/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## src\n\n
\n\n\n\nTwo.Texture.src
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe URL path to the image data.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## image\n\n
\n\n\n\nTwo.Texture.image
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe corresponding DOM Element of the texture. Can be a `![]()
`, ``, or `` element. See [Two.Texture.RegularExpressions](/docs/effects/texture/#regularexpressions) for a full list of supported elements.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Texture.clone
\n\n\n\n\n\n\n__Returns__: Two.Texture\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCreate a new instance of [Two.Texture](/docs/effects/texture/) with the same properties of the current texture.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Texture.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| texture | The reference [Two.Texture](/docs/effects/texture/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Texture](/docs/effects/texture/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.Texture.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the texture.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## dispose\n\n
\n\n\n"
},
{
"path": "wiki/docs/element/README.md",
"content": "---\ntitle: Two.Element\npageClass: docs\nlang: en-US\n---\n\n# Two.Element\n\n\nTwo.Texture.dispose
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nDetach instance from renderer including any `
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Events](/docs/events/)\n\n
\n\n\nThe foundational object for the Two.js scenegraph.\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Element.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Element\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Element](/docs/element/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Element](/docs/element/) from an object notation of a [Two.Element](/docs/element/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## renderer\n\n
\n\n\n\nTwo.Element.renderer
\n\n\n\n\n\n\n\n\n\n\n\n\n\nObject access to store relevant renderer specific variables. Warning: manipulating this object can create unintended consequences.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## id\n\n
\n\n\n\nTwo.Element.id
\n\n\n\n\n\n\n\n\n\n\n\n\n\nSession specific unique identifier.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## className\n\n
\n\n\n\nTwo.Element.className
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA class to be applied to the element to be compatible with CSS styling.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## classList\n\n
\n\n\n\nTwo.Element.classList
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\nA list of class strings stored if imported / interpreted from an SVG element.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## flagReset\n\n
\n\n\n\nTwo.Element.flagReset
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCalled internally by Two.js's renderer to reset all flags. Ensures that only properties that change are updated before being sent to the renderer.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## dispose\n\n
\n\n\n"
},
{
"path": "wiki/docs/events/README.md",
"content": "---\ntitle: Two.Events\npageClass: docs\nlang: en-US\n---\n\n# Two.Events\n\n\n\nObject inherited by many Two.js objects in order to facilitate custom events.\n\n\n\n\n\nTwo.Element.dispose
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRelease the element's renderer object and detach any events.\nThis cleans up renderer-specific resources and unbinds all event listeners.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## Types\n\n
\n\n\n\nTwo.Events.Types
\n\n\n\n\n\n\n\n\n\n\n\n\n\nObject of different types of Two.js specific events.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## addEventListener\n\n
\n\n\n\nTwo.Events.addEventListener
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| name | The name of the event to bind a function to. |\n| handler | The function to be invoked when the event is dispatched. |\n
\n\n\n\n\n\n\nCall to add a listener to a specific event name.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## on\n\n
\n\n\n\nTwo.Events.on
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlias for [Two.Events.addEventListener](/docs/events/#addeventlistener).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## bind\n\n
\n\n\n\nTwo.Events.bind
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlias for [Two.Events.addEventListener](/docs/events/#addeventlistener).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## removeEventListener\n\n
\n\n\n\nTwo.Events.removeEventListener
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| name | The name of the event intended to be removed. |\n| handler | The handler intended to be removed. |\n
\n\n\n\n\n\n\nCall to remove listeners from a specific event. If only `name` is passed then all the handlers attached to that `name` will be removed. If no arguments are passed then all handlers for every event on the obejct are removed.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## off\n\n
\n\n\n\nTwo.Events.off
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlias for [Two.Events.removeEventListener](/docs/events/#removeeventlistener).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## unbind\n\n
\n\n\n\nTwo.Events.unbind
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlias for [Two.Events.removeEventListener](/docs/events/#removeeventlistener).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## dispatchEvent\n\n
\n\n\n"
},
{
"path": "wiki/docs/extras/arc/README.md",
"content": "---\ntitle: Two.Arc\npageClass: docs\nlang: en-US\n---\n\n# Two.Arc\n\n\nTwo.Events.dispatchEvent
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| name | The name of the event to dispatch. |\n| args | Anything can be passed after the name and those will be passed on to handlers attached to the event in the order they are passed. |\n
\n\n\n\n\n\n\nCall to trigger a custom event. Any additional arguments passed after the name will be passed along to the attached handlers.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Path](/docs/path/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Arc.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Arc](/docs/extras/arc/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## width\n\n
\n\n\n\nTwo.Arc.width
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe horizontal size of the arc.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## height\n\n
\n\n\n\nTwo.Arc.height
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe vertical size of the arc.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## startAngle\n\n
\n\n\n\nTwo.ArcSegment.startAngle
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe angle of one side for the arc segment.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## endAngle\n\n
\n\n\n\nTwo.ArcSegment.endAngle
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe angle of the other side for the arc segment.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n"
},
{
"path": "wiki/docs/extras/zui/README.md",
"content": "---\ntitle: Two.ZUI\npageClass: docs\nlang: en-US\n---\n\n# Two.ZUI\n\n\n\n[Two.ZUI](/docs/two/#zui) is an extra class to turn your Two.js scene into a Google Maps or Adobe Illustrator style interface. See [https://codepen.io/jonobr1/pen/PobMKwb](https://codepen.io/jonobr1/pen/PobMKwb) for example usage.\n\n\n\n\n\nTwo.Arc.clone
\n\n\n\n\n\n\n__Returns__: Two.ArcSegment\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.ArcSegment](/docs/shapes/arc-segment/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## addLimits\n\n
\n\n\n\nTwo.ZUI.addLimits
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| min | The minimum scale the ZUI can zoom out to. |\n| max | The maximum scale the ZUI can zoom in to. |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## clientToSurface\n\n
\n\n\n\nTwo.ZUI.clientToSurface
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n__Returns__: Object\n\n\n- An object with x, y, and z components\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| a | |\n
\n\n\n\n\n\n\nConvert 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.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## clientToSurface\n\n
\n\n\n\nTwo.ZUI.clientToSurface
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n__Returns__: Object\n\n\n- An object with x, y, and z components\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| a | The x component of position to be transformed. |\n| b | The y component of position to be transformed. |\n| c | The optional z component of position to be transformed. |\n
\n\n\n\n\n\n\nConvert 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.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## surfaceToClient\n\n
\n\n\n\nTwo.ZUI.surfaceToClient
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n__Returns__: Object\n\n\n- An object with x, y, and z components\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| a | |\n
\n\n\n\n\n\n\nConvert an x, y coordinate in projected space to the user’s space. Optionally pass a z property on the object to apply depth.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## surfaceToClient\n\n
\n\n\n\nTwo.ZUI.surfaceToClient
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n__Returns__: Object\n\n\n- An object with x, y, and z components\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| a | The x component of position to be transformed. |\n| b | The y component of position to be transformed. |\n| c | The optional z component of position to be transformed. |\n
\n\n\n\n\n\n\nConvert an x, y coordinate in projected space to the user’s space. Optionally pass a z property on the object to apply depth.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## zoomBy\n\n
\n\n\n\nTwo.ZUI.zoomBy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| byF | The factor to scale by. |\n| clientX | The x position of the user's input. |\n| clientY | The y position of the user's input. |\n
\n\n\n\n\n\n\nA function to zoom by an incremental amount and a position. Typically used for pinch-and-zoom or mousewheel effects.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## zoomSet\n\n
\n\n\n\nTwo.ZUI.zoomSet
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| zoom | The level of the zoom. |\n| clientX | The x position of the user's input. |\n| clientY | The y position of the user's input. |\n
\n\n\n\n\n\n\nA function to set the zoom amount and the origin position. This is used internally by {@Two.ZUI#zoomBy}.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## translateSurface\n\n
\n\n\n\nTwo.ZUI.translateSurface
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | The x amount to pan. |\n| y | The y amount to pan. |\n
\n\n\n\n\n\n\nSet the position of the ZUI by an incremental translation amount.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## reset\n\n
\n\n\n"
},
{
"path": "wiki/docs/group/README.md",
"content": "---\ntitle: Two.Group\npageClass: docs\nlang: en-US\n---\n\n# Two.Group\n\n\nTwo.ZUI.reset
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReset the zoom and scale factors to their original instantiated state.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Shape](/docs/shape/)\n\n
\n\n\nThis is the primary class for grouping objects that are then drawn in Two.js. In Illustrator this is a group, in After Effects it would be a Null Object. Whichever the case, the `Two.Group` contains a transformation matrix and commands to style its children, but it by itself doesn't render to the screen.\n\n\n\n\n\n\n\n## InsertChildren\n\n
\n\n\n\nTwo.Group.InsertChildren
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| children | The objects to be inserted. |\n
\n\n\n\n\n\n\nCached method to let renderers know children have been added to a [Two.Group](/docs/group/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## RemoveChildren\n\n
\n\n\n\nTwo.Group.RemoveChildren
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| children | The objects to be removed. |\n
\n\n\n\n\n\n\nCached method to let renderers know children have been removed from a [Two.Group](/docs/group/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## OrderChildren\n\n
\n\n\n\nTwo.Group.OrderChildren
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCached method to let renderers know order has been updated on a [Two.Group](/docs/group/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Group.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Group](/docs/group/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fill\n\n
\n\n\n\nTwo.Group.fill
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe value of what all child shapes should be filled in with.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [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`.\n\n
\n\n\n\n\n\n\n\n\n\n\n## stroke\n\n
\n\n\n\nTwo.Group.stroke
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe value of what all child shapes should be outlined in with.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [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`.\n\n
\n\n\n\n\n\n\n\n\n\n\n## linewidth\n\n
\n\n\n\nTwo.Group.linewidth
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe thickness in pixels of the stroke for all child shapes.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## opacity\n\n
\n\n\n\nTwo.Group.opacity
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe opaqueness of all child shapes.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## visible\n\n
\n\n\n\nTwo.Group.visible
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDisplay the path or not.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## cap\n\n
\n\n\n\nTwo.Group.cap
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty](https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty)\n\n
\n\n\n\n\n\n\n\n\n\n\n## join\n\n
\n\n\n\nTwo.Group.join
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty](https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty)\n\n
\n\n\n\n\n\n\n\n\n\n\n## miter\n\n
\n\n\n\nTwo.Group.miter
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty](https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty)\n\n
\n\n\n\n\n\n\n\n\n\n\n## closed\n\n
\n\n\n\nTwo.Group.closed
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDetermines whether a final line is drawn between the final point in the `vertices` array and the first point of all child shapes.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## curved\n\n
\n\n\n\nTwo.Group.curved
\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen the child's path is `automatic = true` this boolean determines whether the lines between the points are curved or not.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## automatic\n\n
\n\n\n\nTwo.Group.automatic
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDetermines whether or not Two.js should calculate curves, lines, and commands automatically for you or to let the developer manipulate them for themselves.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## beginning\n\n
\n\n\n\nTwo.Group.beginning
\n\n\n\n\n\n\n\n\n\n\n\n\n\nNumber between zero and one to state the beginning of where the path is rendered.\n\n\n
\n\n\n\n\n\n\n\n\n[Two.Group.beginning](/docs/group/#beginning) is a percentage value that represents at what percentage into all child shapes should the renderer start drawing.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## ending\n\n
\n\n\n\nTwo.Group.ending
\n\n\n\n\n\n\n\n\n\n\n\n\n\nNumber between zero and one to state the ending of where the path is rendered.\n\n\n
\n\n\n\n\n\n\n\n\n[Two.Group.ending](/docs/group/#ending) is a percentage value that represents at what percentage into all child shapes should the renderer start drawing.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## length\n\n
\n\n\n\nTwo.Group.length
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe sum of distances between all child lengths.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## mask\n\n
\n\n\n\nTwo.Group.mask
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe Two.js object to clip from a group's rendering.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## additions\n\n
\n\n\n\nTwo.Group.additions
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\nAn automatically updated list of children that need to be appended to the renderer's scenegraph.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## subtractions\n\n
\n\n\n\nTwo.Group.subtractions
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\nAn automatically updated list of children that need to be removed from the renderer's scenegraph.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## children\n\n
\n\n\n\nTwo.Group.children
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\nA list of all the children in the scenegraph.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Group.copy
\n\n\n\n\n\n\n__Returns__: Two.Group\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| group | The reference [Two.Group](/docs/group/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Group](/docs/group/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Group.clone
\n\n\n\n\n\n\n__Returns__: Two.Group\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Group](/docs/group/) with the same properties of the current group.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.Group.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the group.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## dispose\n\n
\n\n\n\nTwo.Group.dispose
\n\n\n\n\n\n\n__Returns__: Two.Group\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRelease the group's renderer resources and detach all events.\nThis method recursively disposes all child objects, unbinds the children\ncollection events, and preserves the renderer type for potential re-attachment\nto a new renderer.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## getShapesAtPoint\n\n
\n\n\n\nTwo.Group.getShapesAtPoint
\n\n\n\n\n\n\n__Returns__: Array.\\\n\n\nOrdered list of intersecting shapes, front to back.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | X coordinate in world space. |\n| y | Y coordinate in world space. |\n| options | Hit test configuration. |\n| options.visibleOnly | Limit results to visible shapes. |\n| options.includeGroups | Include groups in the hit results. |\n| options.mode | Whether to return all intersecting shapes or only the top-most. |\n| options.deepest | Alias for `mode: 'deepest'`. |\n| options.precision | Segmentation precision for curved geometry. |\n| options.tolerance | Pixel tolerance applied to hit testing. |\n| options.fill | Override fill testing behaviour. |\n| options.stroke | Override stroke testing behaviour. |\n| options.filter | Predicate to filter shapes from the result set. |\n
\n\n\n\n\n\n\nTraverse the group hierarchy and return shapes that contain the specified point.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## corner\n\n
\n\n\n\nTwo.Group.corner
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nOrient the children of the group to the upper left-hand corner of that group.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## center\n\n
\n\n\n\nTwo.Group.center
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nOrient the children of the group to the center of that group.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## getById\n\n
\n\n\n\nTwo.Group.getById
\n\n\n\n\n\n\n__Returns__: Two.Shape\n\n\n- Or `null` if nothing is found.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRecursively search for id. Returns the first element found.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## getByClassName\n\n
\n\n\n\nTwo.Group.getByClassName
\n\n\n\n\n\n\n__Returns__: Array.\\\n\n\n- Or empty array if nothing is found.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRecursively search for classes. Returns an array of matching elements.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## getByType\n\n
\n\n\n\nTwo.Group.getByType
\n\n\n\n\n\n\n__Returns__: Array.\\\n\n\n- Empty array if nothing is found.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRecursively search for children of a specific type, e.g. [Two.Path](/docs/path/). Pass a reference to this type as the param. Returns an array of matching elements.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## add\n\n
\n\n\n\nTwo.Group.add
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| objects | An array of objects to be added. Can also be supplied as individual arguments. |\n
\n\n\n\n\n\n\nAdd objects to the group.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## remove\n\n
\n\n\n\nTwo.Group.remove
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| objects | An array of objects to be removed. Can be also removed as individual arguments. If no arguments are passed, then it removes itself from its parent. |\n
\n\n\n\n\n\n\nRemove objects from the group.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## getBoundingClientRect\n\n
\n\n\n\nTwo.Group.getBoundingClientRect
\n\n\n\n\n\n\n__Returns__: Object\n\n\n- Returns object with top, left, right, bottom, width, height attributes.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| shallow | Describes whether to calculate off local matrix or world matrix. |\n
\n\n\n\n\n\n\nReturn an object with top, left, right, bottom, width, and height parameters of the group.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## noFill\n\n
\n\n\n\nTwo.Group.noFill
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nApply `noFill` method to all child shapes.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## noStroke\n\n
\n\n\n\nTwo.Group.noStroke
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nApply `noStroke` method to all child shapes.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## subdivide\n\n
\n\n\n\nTwo.Group.subdivide
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nApply `subdivide` method to all child shapes.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## strokeAttenuation\n\n
\n\n\n"
},
{
"path": "wiki/docs/matrix/README.md",
"content": "---\ntitle: Two.Matrix\npageClass: docs\nlang: en-US\n---\n\n# Two.Matrix\n\n\n\nA class to store 3 x 3 transformation matrix information. In addition to storing data `Two.Matrix` has suped up methods for commonplace mathematical operations.\n\n\n\n\n\nTwo.Group.strokeAttenuation
\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen set to `true`, stroke width scales with transformations (default behavior). When `false`, stroke width remains constant in screen space for all child shapes.\n\n\n
\n\n\n\n\n\n\n\n\nWhen `strokeAttenuation` is `false`, this property is applied to all child shapes, making their stroke widths automatically adjust to compensate for the group's world transform scale, maintaining constant visual thickness regardless of zoom level. When `true` (default), stroke widths scale normally with transformations.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## Identity\n\n
\n\n\n\nTwo.Matrix.Identity
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA stored reference to the default value of a 3 x 3 matrix.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Multiply\n\n
\n\n\n\nTwo.Matrix.Multiply
\n\n\n\n\n\n\n__Returns__: Array.\\\n\n\n- If an optional `C` matrix isn't passed then a new one is created and returned.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| A | The first [Two.Matrix](/docs/matrix/) to multiply |\n| B | The second [Two.Matrix](/docs/matrix/) to multiply |\n| C | An optional [Two.Matrix](/docs/matrix/) to apply the result to |\n
\n\n\n\n\n\n\nMultiply two matrices together and return the result.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Matrix.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Matrix\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | The object notation of a Two.Matrix to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Matrix](/docs/matrix/) from an object notation of a [Two.Matrix](/docs/matrix/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## elements\n\n
\n\n\n\nTwo.Matrix.elements
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe underlying data stored as an array.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## manual\n\n
\n\n\n\nTwo.Matrix.manual
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDetermines whether Two.js automatically calculates the values for the matrix or if the developer intends to manage the matrix.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## set\n\n
\n\n\n\nTwo.Matrix.set
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| a | The value for element at the first column and first row |\n| b | The value for element at the second column and first row |\n| c | The value for element at the third column and first row |\n| d | The value for element at the first column and second row |\n| e | The value for element at the second column and second row |\n| f | The value for element at the third column and second row |\n| g | The value for element at the first column and third row |\n| h | The value for element at the second column and third row |\n| i | The value for element at the third column and third row |\n
\n\n\n\n\n\n\nSet an array of values onto the matrix. Order described in [Two.Matrix](/docs/matrix/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## set\n\n
\n\n\n\nTwo.Matrix.set
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| a | The array of elements to apply |\n
\n\n\n\n\n\n\nSet an array of values onto the matrix. Order described in [Two.Matrix](/docs/matrix/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Matrix.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| m | The matrix to copy |\n
\n\n\n\n\n\n\nCopy the matrix of one to the current instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## identity\n\n
\n\n\n\nTwo.Matrix.identity
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nTurn matrix to the identity, like resetting.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## multiply\n\n
\n\n\n\nTwo.Matrix.multiply
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| s | The scalar to be multiplied. |\n
\n\n\n\n\n\n\nMultiply all components of the matrix against a single scalar value.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## multiply\n\n
\n\n\n\nTwo.Matrix.multiply
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | The `x` component to be multiplied. |\n| y | The `y` component to be multiplied. |\n| z | The `z` component to be multiplied. |\n
\n\n\n\n\n\n\nMultiply all components of a matrix against a 3 component vector.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## multiply\n\n
\n\n\n\nTwo.Matrix.multiply
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| a | The value at the first column and first row of the matrix to be multiplied. |\n| b | The value at the second column and first row of the matrix to be multiplied. |\n| c | The value at the third column and first row of the matrix to be multiplied. |\n| d | The value at the first column and second row of the matrix to be multiplied. |\n| e | The value at the second column and second row of the matrix to be multiplied. |\n| f | The value at the third column and second row of the matrix to be multiplied. |\n| g | The value at the first column and third row of the matrix to be multiplied. |\n| h | The value at the second column and third row of the matrix to be multiplied. |\n| i | The value at the third column and third row of the matrix to be multiplied. |\n
\n\n\n\n\n\n\nMultiply all components of a matrix against another matrix.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## inverse\n\n
\n\n\n\nTwo.Matrix.inverse
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| output | The optional matrix to apply the inversion to. |\n
\n\n\n\n\n\n\nReturn an inverted version of the matrix. If no optional one is passed a new matrix is created and returned.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## scale\n\n
\n\n\n\nTwo.Matrix.scale
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| s | The one dimensional scale to apply to the matrix. |\n
\n\n\n\n\n\n\nUniformly scale the transformation matrix.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## scale\n\n
\n\n\n\nTwo.Matrix.scale
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| sx | The horizontal scale factor. |\n| sy | The vertical scale factor |\n
\n\n\n\n\n\n\nScale the transformation matrix in two dimensions.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## rotate\n\n
\n\n\n\nTwo.Matrix.rotate
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| n | The amount to rotate in Number. |\n
\n\n\n\n\n\n\nRotate the matrix.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## translate\n\n
\n\n\n\nTwo.Matrix.translate
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | The horizontal translation value to apply |\n| y | The vertical translation value to apply |\n
\n\n\n\n\n\n\nTranslate the matrix to specific `x` / `y` values.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## skewX\n\n
\n\n\n\nTwo.Matrix.skewX
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| n | The amount to skew |\n
\n\n\n\n\n\n\nSkew the matrix by an angle in the x axis direction.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## skewY\n\n
\n\n\n\nTwo.Matrix.skewY
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| n | The amount to skew |\n
\n\n\n\n\n\n\nSkew the matrix by an angle in the y axis direction.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toString\n\n
\n\n\n\nTwo.Matrix.toString
\n\n\n\n\n\n\n__Returns__: String\n\n\n- The transformation matrix as a 6 component string separated by spaces.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| fullMatrix | Return the full 9 elements of the matrix or just 6 for 2D transformations. |\n
\n\n\n\n\n\n\nCreate a transform string. Used for the Two.js rendering APIs.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toTransformArray\n\n
\n\n\n\nTwo.Matrix.toTransformArray
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| fullMatrix | Return the full 9 elements of the matrix or just 6 in the format for 2D transformations. |\n| output | An array empty or otherwise to apply the values to. |\n
\n\n\n\n\n\n\nCreate a transform array. Used for the Two.js rendering APIs.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toArray\n\n
\n\n\n\nTwo.Matrix.toArray
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| fullMatrix | Return the full 9 elements of the matrix or just 6 for 2D transformations. |\n| output | An array empty or otherwise to apply the values to. |\n
\n\n\n\n\n\n\nCreate a transform array. Used for the Two.js rendering APIs.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.Matrix.toObject
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCreate a JSON compatible object that represents information of the matrix.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n"
},
{
"path": "wiki/docs/path/README.md",
"content": "---\ntitle: Two.Path\npageClass: docs\nlang: en-US\n---\n\n# Two.Path\n\n\nTwo.Matrix.clone
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nClone the current matrix.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Shape](/docs/shape/)\n\n
\n\n\nThis is the primary primitive class for creating all drawable shapes in Two.js. Unless specified methods return their instance of `Two.Path` for the purpose of chaining.\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Path.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Path](/docs/path/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Path.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Path\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Path](/docs/path/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Path](/docs/path/) from an object notation of a [Two.Path](/docs/path/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## closed\n\n
\n\n\n\nTwo.Path.closed
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDetermines whether a final line is drawn between the final point in the `vertices` array and the first point.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## curved\n\n
\n\n\n\nTwo.Path.curved
\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen the path is `automatic = true` this boolean determines whether the lines between the points are curved or not.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## beginning\n\n
\n\n\n\nTwo.Path.beginning
\n\n\n\n\n\n\n\n\n\n\n\n\n\nNumber between zero and one to state the beginning of where the path is rendered.\n\n\n
\n\n\n\n\n\n\n\n\n[Two.Path.beginning](/docs/path/#beginning) is a percentage value that represents at what percentage into the path should the renderer start drawing.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## ending\n\n
\n\n\n\nTwo.Path.ending
\n\n\n\n\n\n\n\n\n\n\n\n\n\nNumber between zero and one to state the ending of where the path is rendered.\n\n\n
\n\n\n\n\n\n\n\n\n[Two.Path.ending](/docs/path/#ending) is a percentage value that represents at what percentage into the path should the renderer start drawing.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fill\n\n
\n\n\n\nTwo.Path.fill
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe value of what the path should be filled in with.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [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`.\n\n
\n\n\n\n\n\n\n\n\n\n\n## stroke\n\n
\n\n\n\nTwo.Path.stroke
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe value of what the path should be outlined in with.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [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`.\n\n
\n\n\n\n\n\n\n\n\n\n\n## linewidth\n\n
\n\n\n\nTwo.Path.linewidth
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe thickness in pixels of the stroke.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## opacity\n\n
\n\n\n\nTwo.Path.opacity
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe opaqueness of the path.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## className\n\n
\n\n\n\nTwo.Path.className
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA class to be applied to the element to be compatible with CSS styling.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## visible\n\n
\n\n\n\nTwo.Path.visible
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDisplay the path or not.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## cap\n\n
\n\n\n\nTwo.Path.cap
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty](https://www.w3.org/TR/SVG11/painting.html#StrokeLinecapProperty)\n\n
\n\n\n\n\n\n\n\n\n\n\n## join\n\n
\n\n\n\nTwo.Path.join
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty](https://www.w3.org/TR/SVG11/painting.html#StrokeLinejoinProperty)\n\n
\n\n\n\n\n\n\n\n\n\n\n## miter\n\n
\n\n\n\nTwo.Path.miter
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty](https://www.w3.org/TR/SVG11/painting.html#StrokeMiterlimitProperty)\n\n
\n\n\n\n\n\n\n\n\n\n\n## vertices\n\n
\n\n\n\nTwo.Path.vertices
\n\n\n\n\n\n\n\n\n\n\n\n\n\nAn ordered list of anchor points for rendering the path.\n\n\n
\n\n\n\n\n\n\n\n\nA list of [Two.Anchor](/docs/anchor/) objects that consist of what form the path takes.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## automatic\n\n
\n\n\n\nTwo.Path.automatic
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDetermines whether or not Two.js should calculate curves, lines, and commands automatically for you or to let the developer manipulate them for themselves.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## dashes\n\n
\n\n\n\nTwo.Path.dashes
\n\n\n\n\n\n\n\n\n\n\n\n\n\nArray of numbers. Odd indices represent dash length. Even indices represent dash space.\n\n\n
\n\n\n\n\n\n\n\n\nA list of numbers that represent the repeated dash length and dash space applied to the stroke of the text.\n\n
\n\n\n\n\n\nSee: [https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) for more information on the SVG stroke-dasharray attribute.\n\n
\n\n\n\n\n\n\n\n\n\n\n## dashes.offset\n\n
\n\n\n\nTwo.Path.dashes.offset
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA number in pixels to offset [Two.Path.dashes](/docs/path/#dashes) display.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Path.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| path | The reference [Two.Path](/docs/path/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Path](/docs/path/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Path.clone
\n\n\n\n\n\n\n__Returns__: Two.Path\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Path](/docs/path/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.Path.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## dispose\n\n
\n\n\n\nTwo.Path.dispose
\n\n\n\n\n\n\n__Returns__: Two.Path\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRelease the path's renderer resources and detach all events.\nThis method cleans up vertices collection events, individual vertex events,\ncontrol point events, and disposes fill/stroke effects (calling dispose()\non Gradients and Textures for thorough cleanup) while preserving the\nrenderer type for potential re-attachment to a new renderer.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## noFill\n\n
\n\n\n\nTwo.Path.noFill
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nShort hand method to set fill to `none`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## noStroke\n\n
\n\n\n\nTwo.Path.noStroke
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nShort hand method to set stroke to `none`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## corner\n\n
\n\n\n\nTwo.Path.corner
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nOrient the vertices of the shape to the upper left-hand corner of the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## center\n\n
\n\n\n\nTwo.Path.center
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nOrient the vertices of the shape to the center of the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## getBoundingClientRect\n\n
\n\n\n\nTwo.Path.getBoundingClientRect
\n\n\n\n\n\n\n__Returns__: Object\n\n\n- Returns object with top, left, right, bottom, width, height attributes.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| shallow | Describes whether to calculate off local matrix or world matrix. |\n
\n\n\n\n\n\n\nReturn an object with top, left, right, bottom, width, and height parameters of the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## contains\n\n
\n\n\n\nTwo.Path.contains
\n\n\n\n\n\n\n__Returns__: Boolean\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | x coordinate to hit test against |\n| y | y coordinate to hit test against |\n| options | Optional options object |\n| options.ignoreVisibility | If `true`, hit test against `path.visible = false` shapes |\n| options.tolerance | Padding to hit test against in pixels |\n
\n\n\n\n\n\n\nCheck to see if coordinates are within a [Two.Path](/docs/path/)'s bounding rectangle\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## getPointAt\n\n
\n\n\n\nTwo.Path.getPointAt
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| t | Percentage value describing where on the [Two.Path](/docs/path/) to estimate and assign coordinate values. |\n| obj | Object to apply calculated x, y to. If none available returns new `Object`. |\n
\n\n\n\n\n\n\nGiven a float `t` from 0 to 1, return a point or assign a passed `obj`'s coordinates to that percentage on this [Two.Path](/docs/path/)'s curve.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## plot\n\n
\n\n\n\nTwo.Path.plot
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nBased on closed / curved and sorting of vertices plot where all points should be and where the respective handles should be too.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## smooth\n\n
\n\n\n\nTwo.Path.smooth
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| options | Configuration for smoothing. |\n| options.type | Type of smoothing algorithm. |\n| options.from | Index of vertices to start smoothing |\n| options.to | Index of vertices to terminate smoothing |\n
\n\n\n\n\n\n\nAdjust vertex handles to generate smooth curves without toggling `automatic`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## subdivide\n\n
\n\n\n\nTwo.Path.subdivide
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| limit | How many times to recurse subdivisions. |\n
\n\n\n\n\n\n\nInsert a [Two.Anchor](/docs/anchor/) at the midpoint between every item in [Two.Path.vertices](/docs/path/#vertices).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## length\n\n
\n\n\n\nTwo.Path.length
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe sum of distances between all [Two.Path.vertices](/docs/path/#vertices).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## mask\n\n
\n\n\n\nTwo.Path.mask
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe shape whose alpha property becomes a clipping area for the path.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## clip\n\n
\n\n\n\nTwo.Path.clip
\n\n\n\n\n\n\n\n\n\n\n\n\n\nTells Two.js renderer if this object represents a mask for another object (or not).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## strokeAttenuation\n\n
\n\n\n"
},
{
"path": "wiki/docs/registry/README.md",
"content": "---\ntitle: Two.Registry\npageClass: docs\nlang: en-US\n---\n\n# Two.Registry\n\n\n\nAn arbitrary class to manage a directory of things. Mainly used for keeping tabs of textures in Two.js.\n\n\n\n\n\nTwo.Path.strokeAttenuation
\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen set to `true`, stroke width scales with transformations (default behavior). When `false`, stroke width remains constant in screen space.\n\n\n
\n\n\n\n\n\n\n\n\nWhen `strokeAttenuation` is `false`, the stroke width is automatically adjusted to compensate for the object's world transform scale, maintaining constant visual thickness regardless of zoom level. When `true` (default), stroke width scales normally with transformations.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## add\n\n
\n\n\n\nTwo.Registry.add
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| id | A unique identifier. |\n| obj | Any type of variable to be registered to the directory. |\n
\n\n\n\n\n\n\nAdds any value to the directory. Assigned by the `id`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## remove\n\n
\n\n\n\nTwo.Registry.remove
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| id | A unique identifier. |\n
\n\n\n\n\n\n\nRemove any value from the directory by its `id`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## get\n\n
\n\n\n\nTwo.Registry.get
\n\n\n\n\n\n\n__Returns__: Object\n\n\nThe associated value. If unavailable then `undefined` is returned.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| id | A unique identifier. |\n
\n\n\n\n\n\n\nGet a registered value by its `id`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## contains\n\n
\n\n\n"
},
{
"path": "wiki/docs/renderers/canvas/README.md",
"content": "---\ntitle: Two.CanvasRenderer\npageClass: docs\nlang: en-US\n---\n\n# Two.CanvasRenderer\n\n\nTwo.Registry.contains
\n\n\n\n\n\n\n__Returns__: Boolean\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| id | A unique identifier. |\n
\n\n\n\n\n\n\nConvenience method to see if a value is registered to an `id` already.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Events](/docs/events/)\n\n
\n\n\nThis class is used by [Two]() when constructing with `type` of `Two.Types.canvas`. It takes Two.js' scenegraph and renders it to a ``.\n\n\n\n\n\n\n\n## Utils\n\n
\n\n\n\nTwo.CanvasRenderer.Utils
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA massive object filled with utility functions and properties to render Two.js objects to a ``.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## domElement\n\n
\n\n\n\nTwo.CanvasRenderer.domElement
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe `` associated with the Two.js scene.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## ctx\n\n
\n\n\n\nTwo.CanvasRenderer.ctx
\n\n\n\n\n\n\n\n\n\n\n\n\n\nAssociated two dimensional context to render on the ``.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## overdraw\n\n
\n\n\n\nTwo.CanvasRenderer.overdraw
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDetermines whether the canvas clears the background each draw call.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## scene\n\n
\n\n\n\nTwo.CanvasRenderer.scene
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe root group of the scenegraph.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## setSize\n\n
\n\n\n\nTwo.CanvasRenderer.setSize
\n\n\n\n\n\n\n\n\n\n\n__Triggers__:\n\n+ `event:resize`\n\n
\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| width | The new width of the renderer. |\n| height | The new height of the renderer. |\n| ratio | The new pixel ratio (pixel density) of the renderer. Defaults to calculate the pixel density of the user's screen. |\n
\n\n\n\n\n\n\nChange the size of the renderer.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## render\n\n
\n\n\n"
},
{
"path": "wiki/docs/renderers/svg/README.md",
"content": "---\ntitle: Two.SVGRenderer\npageClass: docs\nlang: en-US\n---\n\n# Two.SVGRenderer\n\n\nTwo.CanvasRenderer.render
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRender the current scene to the ``.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Events](/docs/events/)\n\n
\n\n\nThis class is used by [Two]() when constructing with `type` of `Two.Types.svg` (the default type). It takes Two.js' scenegraph and renders it to a ``.\n\n\n\n\n\n\n\n## Utils\n\n
\n\n\n\nTwo.SVGRenderer.Utils
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA massive object filled with utility functions and properties to render Two.js objects to a ``.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## domElement\n\n
\n\n\n\nTwo.SVGRenderer.domElement
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe `` associated with the Two.js scene.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## scene\n\n
\n\n\n\nTwo.SVGRenderer.scene
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe root group of the scenegraph.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## defs\n\n
\n\n\n\nTwo.SVGRenderer.defs
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe `
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## setSize\n\n
\n\n\n\nTwo.SVGRenderer.setSize
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| width | The new width of the renderer. |\n| height | The new height of the renderer. |\n
\n\n\n\n\n\n\nChange the size of the renderer.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## render\n\n
\n\n\n"
},
{
"path": "wiki/docs/renderers/webgl/README.md",
"content": "---\ntitle: Two.WebGLRenderer\npageClass: docs\nlang: en-US\n---\n\n# Two.WebGLRenderer\n\n\nTwo.SVGRenderer.render
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRender the current scene to the ``.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Events](/docs/events/)\n\n
\n\n\nThis class is used by [Two]() when constructing with `type` of `Two.Types.webgl`. It takes Two.js' scenegraph and renders it to a `` through the WebGL api.\n\n\n\n\n\n\n\n## \n\n
\n\n\n\n// * @type {(gl: any, programs: any) => any}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| gl | |\n| programs | |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Utils\n\n
\n\n\n\nTwo.WebGLRenderer.Utils
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA massive object filled with utility functions and properties to render Two.js objects to a `` through the WebGL API.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## domElement\n\n
\n\n\n\nTwo.WebGLRenderer.domElement
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe `` associated with the Two.js scene.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## scene\n\n
\n\n\n\nTwo.WebGLRenderer.scene
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe root group of the scenegraph.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## overdraw\n\n
\n\n\n\nTwo.WebGLRenderer.overdraw
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDetermines whether the canvas clears the background each draw call.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## ctx\n\n
\n\n\n\nTwo.WebGLRenderer.ctx
\n\n\n\n\n\n\n\n\n\n\n\n\n\nAssociated two dimensional context to render on the ``.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## programs\n\n
\n\n\n\nTwo.WebGLRenderer.programs
\n\n\n\n\n\n\n\n\n\n\n\n\n\nAssociated WebGL programs to render all elements from the scenegraph.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## setSize\n\n
\n\n\n\nTwo.WebGLRenderer.setSize
\n\n\n\n\n\n\n\n\n\n\n__Triggers__:\n\n+ `event:resize`\n\n
\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| width | The new width of the renderer. |\n| height | The new height of the renderer. |\n| ratio | The new pixel ratio (pixel density) of the renderer. Defaults to calculate the pixel density of the user's screen. |\n
\n\n\n\n\n\n\nChange the size of the renderer.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## render\n\n
\n\n\n"
},
{
"path": "wiki/docs/shape/README.md",
"content": "---\ntitle: Two.Shape\npageClass: docs\nlang: en-US\n---\n\n# Two.Shape\n\n\nTwo.WebGLRenderer.render
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRender the current scene to the ``.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Element](/docs/element/)\n\n
\n\n\nThe foundational transformation object for the Two.js scenegraph.\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Shape.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Shape\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Shape](/docs/shape/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Shape](/docs/shape/) from an object notation of a [Two.Shape](/docs/shape/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## renderer\n\n
\n\n\n\nTwo.Shape.renderer
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\nObject access to store relevant renderer specific variables. Warning: manipulating this object can create unintended consequences.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## matrix\n\n
\n\n\n\nTwo.Shape.matrix
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\nThe transformation matrix of the shape.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## worldMatrix\n\n
\n\n\n\nTwo.Shape.worldMatrix
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n\n\n\n\n\n\n\nThe transformation matrix of the shape in the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## position\n\n
\n\n\n\nTwo.Shape.position
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe x and y value for where the shape is placed relative to its parent.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## rotation\n\n
\n\n\n\nTwo.Shape.rotation
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe value in Number for how much the shape is rotated relative to its parent.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## scale\n\n
\n\n\n\nTwo.Shape.scale
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe value for how much the shape is scaled relative to its parent.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## skewX\n\n
\n\n\n\nTwo.Shape.skewX
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe value in Number for how much the shape is skewed relative to its parent.\n\n\n
\n\n\n\n\n\n\n\n\nSkew the shape by an angle in the x axis direction.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## skewY\n\n
\n\n\n\nTwo.Shape.skewY
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe value in Number for how much the shape is skewed relative to its parent.\n\n\n
\n\n\n\n\n\n\n\n\nSkew the shape by an angle in the y axis direction.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## translation\n\n
\n\n\n\nTwo.Shape.translation
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlias for [Two.Shape.position](/docs/shape/#position).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## addTo\n\n
\n\n\n\nTwo.Shape.addTo
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| group | The parent the shape adds itself to. |\n
\n\n\n\n\n\n\nConvenience method to add itself to the scenegraph.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## remove\n\n
\n\n\n\nTwo.Shape.remove
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRemove self from the scene / parent.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## contains\n\n
\n\n\n\nTwo.Shape.contains
\n\n\n\n\n\n\n__Returns__: Boolean\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | x coordinate to hit test against |\n| y | y coordinate to hit test against |\n| options | Optional options object |\n| options.ignoreVisibility | If `true`, hit test against `shape.visible = false` shapes |\n| options.tolerance | Padding to hit test against in pixels |\n
\n\n\n\n\n\n\nCheck to see if coordinates are within a [Two.Shape](/docs/shape/)'s bounding rectangle\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Shape.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| shape | |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Shape](/docs/shape/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Shape.clone
\n\n\n\n\n\n\n__Returns__: Two.Shape\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | Optional argument to automatically add the shape to a scenegraph. |\n
\n\n\n\n\n\n\nCreate a new [Two.Shape](/docs/shape/) with the same values as the current shape.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.Shape.toObject
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCreate a JSON compatible object that represents information of the shape.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## dispose\n\n
\n\n\n"
},
{
"path": "wiki/docs/shapes/arc-segment/README.md",
"content": "---\ntitle: Two.ArcSegment\npageClass: docs\nlang: en-US\n---\n\n# Two.ArcSegment\n\n\nTwo.Shape.dispose
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRelease the shape's bound objects by unbinding relevant events.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Path](/docs/path/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.ArcSegment.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.ArcSegment](/docs/shapes/arc-segment/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.ArcSegment.fromObject
\n\n\n\n\n\n\n__Returns__: Two.ArcSegment\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.ArcSegment](/docs/shapes/arc-segment/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.ArcSegment](/docs/shapes/arc-segment/) from an object notation of a [Two.ArcSegment](/docs/shapes/arc-segment/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## innerRadius\n\n
\n\n\n\nTwo.ArcSegment.innerRadius
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe size of the inner radius of the arc segment.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## outerRadius\n\n
\n\n\n\nTwo.ArcSegment.outerRadius
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe size of the outer radius of the arc segment.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## startAngle\n\n
\n\n\n\nTwo.ArcSegment.startAngle
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe angle of one side for the arc segment.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## endAngle\n\n
\n\n\n\nTwo.ArcSegment.endAngle
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe angle of the other side for the arc segment.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.ArcSegment.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| arcSegment | The reference [Two.ArcSegment](/docs/shapes/arc-segment/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.ArcSegment](/docs/shapes/arc-segment/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.ArcSegment.clone
\n\n\n\n\n\n\n__Returns__: Two.ArcSegment\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.ArcSegment](/docs/shapes/arc-segment/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n"
},
{
"path": "wiki/docs/shapes/circle/README.md",
"content": "---\ntitle: Two.Circle\npageClass: docs\nlang: en-US\n---\n\n# Two.Circle\n\n\nTwo.ArcSegment.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Path](/docs/path/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Circle.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Circle](/docs/shapes/circle/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Circle.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Circle\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Circle](/docs/shapes/circle/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Circle](/docs/shapes/circle/) from an object notation of a [Two.Circle](/docs/shapes/circle/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## radius\n\n
\n\n\n\nTwo.Circle.radius
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe size of the radius of the circle.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Circle.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| circle | The reference [Two.Circle](/docs/shapes/circle/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Circle](/docs/shapes/circle/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Circle.clone
\n\n\n\n\n\n\n__Returns__: Two.Circle\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Circle](/docs/shapes/circle/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n"
},
{
"path": "wiki/docs/shapes/ellipse/README.md",
"content": "---\ntitle: Two.Ellipse\npageClass: docs\nlang: en-US\n---\n\n# Two.Ellipse\n\n\nTwo.Circle.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Path](/docs/path/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Ellipse.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Ellipse](/docs/shapes/ellipse/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Ellipse.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Ellipse\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Ellipse](/docs/shapes/ellipse/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Ellipse](/docs/shapes/ellipse/) from an object notation of a [Two.Ellipse](/docs/shapes/ellipse/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## width\n\n
\n\n\n\nTwo.Ellipse.width
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe width of the ellipse.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## height\n\n
\n\n\n\nTwo.Ellipse.height
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe height of the ellipse.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Ellipse.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| ellipse | The reference [Two.Ellipse](/docs/shapes/ellipse/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Ellipse](/docs/shapes/ellipse/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Ellipse.clone
\n\n\n\n\n\n\n__Returns__: Two.Ellipse\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Ellipse](/docs/shapes/ellipse/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n"
},
{
"path": "wiki/docs/shapes/line/README.md",
"content": "---\ntitle: Two.Line\npageClass: docs\nlang: en-US\n---\n\n# Two.Line\n\n\nTwo.Ellipse.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Path](/docs/path/)\n\n
\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Shape](/docs/shape/)\n\n
\n\n\nThis is a primary primitive class for quickly and easily drawing points in Two.js. Unless specified methods return their instance of `Two.Points` for the purpose of chaining.\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Points.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Points](/docs/shapes/points/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Points.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Points\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Points](/docs/shapes/points/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Points](/docs/shapes/points/) from an object notation of a [Two.Points](/docs/shapes/points/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## size\n\n
\n\n\n\nTwo.Points.size
\n\n\n\n\n\n\n\n\n\n\n\n\n\nNumber describing the diameter each point should have\n\n\n
\n\n\n\n\n\n\n\n\nSet the size of each point in the collection of [Two.Points](/docs/shapes/points/)\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## sizeAttenuation\n\n
\n\n\n\nTwo.Points.sizeAttenuation
\n\n\n\n\n\n\n\n\n\n\n\n\n\nBoolean dictating whether Two.js should scale the size of the points based on its matrix hierarchy.\n\n\n
\n\n\n\n\n\n\n\n\nSet to `true` if you'd like the size of the points to be relative to the scale of its parents; `false` to disregard. Default is `false`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## beginning\n\n
\n\n\n\nTwo.Points.beginning
\n\n\n\n\n\n\n\n\n\n\n\n\n\nNumber between zero and one to state the beginning of where the path is rendered.\n\n\n
\n\n\n\n\n\n\n\n\n[Two.Points.beginning](/docs/shapes/points/#beginning) is a percentage value that represents at what percentage into the path should the renderer start drawing.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## ending\n\n
\n\n\n\nTwo.Points.ending
\n\n\n\n\n\n\n\n\n\n\n\n\n\nNumber between zero and one to state the ending of where the path is rendered.\n\n\n
\n\n\n\n\n\n\n\n\n[Two.Points.ending](/docs/shapes/points/#ending) is a percentage value that represents at what percentage into the path should the renderer start drawing.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## fill\n\n
\n\n\n\nTwo.Points.fill
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe value of what the path should be filled in with.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [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`.\n\n
\n\n\n\n\n\n\n\n\n\n\n## stroke\n\n
\n\n\n\nTwo.Points.stroke
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe value of what the path should be outlined in with.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [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`.\n\n
\n\n\n\n\n\n\n\n\n\n\n## linewidth\n\n
\n\n\n\nTwo.Points.linewidth
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe thickness in pixels of the stroke.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## opacity\n\n
\n\n\n\nTwo.Points.opacity
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe opaqueness of the path.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## className\n\n
\n\n\n\nTwo.Points.className
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA class to be applied to the element to be compatible with CSS styling.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## visible\n\n
\n\n\n\nTwo.Points.visible
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDisplay the points or not.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## vertices\n\n
\n\n\n\nTwo.Points.vertices
\n\n\n\n\n\n\n\n\n\n\n\n\n\nAn ordered list of vector points for rendering points.\n\n\n
\n\n\n\n\n\n\n\n\nA list of [Two.Vector](/docs/vector/) objects that consist of which coordinates to draw points at.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## dashes\n\n
\n\n\n\nTwo.Points.dashes
\n\n\n\n\n\n\n\n\n\n\n\n\n\nArray of numbers. Odd indices represent dash length. Even indices represent dash space.\n\n\n
\n\n\n\n\n\n\n\n\nA list of numbers that represent the repeated dash length and dash space applied to the stroke of the text.\n\n
\n\n\n\n\n\nSee: [https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) for more information on the SVG stroke-dasharray attribute.\n\n
\n\n\n\n\n\n\n\n\n\n\n## dashes.offset\n\n
\n\n\n\nTwo.Points.dashes.offset
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA number in pixels to offset [Two.Points.dashes](/docs/shapes/points/#dashes) display.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Points.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| points | The reference [Two.Points](/docs/shapes/points/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Points](/docs/shapes/points/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Points.clone
\n\n\n\n\n\n\n__Returns__: Two.Points\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Points](/docs/shapes/points/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.Points.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the points object.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## dispose\n\n
\n\n\n\nTwo.Points.dispose
\n\n\n\n\n\n\n__Returns__: Two.Points\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRelease the points' renderer resources and detach all events.\nThis method cleans up vertices collection events, individual vertex events,\nand disposes fill/stroke effects (calling dispose() on Gradients and\nTextures for thorough cleanup) while preserving the renderer type for\npotential re-attachment to a new renderer.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## noFill\n\n
\n\n\n\nTwo.Points.noFill
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nShort hand method to set fill to `none`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## noStroke\n\n
\n\n\n\nTwo.Points.noStroke
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nShort hand method to set stroke to `none`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## corner\n\n
\n\n\n\nTwo.Points.corner
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nOrient the vertices of the shape to the upper left-hand corner of the points object.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## center\n\n
\n\n\n\nTwo.Points.center
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nOrient the vertices of the shape to the center of the points object.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## getBoundingClientRect\n\n
\n\n\n\nTwo.Points.getBoundingClientRect
\n\n\n\n\n\n\n__Returns__: Object\n\n\n- Returns object with top, left, right, bottom, width, height attributes.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| shallow | Describes whether to calculate off local matrix or world matrix. |\n
\n\n\n\n\n\n\nReturn an object with top, left, right, bottom, width, and height parameters of the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## subdivide\n\n
\n\n\n\nTwo.Points.subdivide
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| limit | How many times to recurse subdivisions. |\n
\n\n\n\n\n\n\nInsert a [Two.Vector](/docs/vector/) at the midpoint between every item in [Two.Points.vertices](/docs/shapes/points/#vertices).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## length\n\n
\n\n\n\nTwo.Points.length
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe sum of distances between all [Two.Points.vertices](/docs/shapes/points/#vertices).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## strokeAttenuation\n\n
\n\n\n"
},
{
"path": "wiki/docs/shapes/polygon/README.md",
"content": "---\ntitle: Two.Polygon\npageClass: docs\nlang: en-US\n---\n\n# Two.Polygon\n\n\nTwo.Points.strokeAttenuation
\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen set to `true`, stroke width scales with transformations (default behavior). When `false`, stroke width remains constant in screen space.\n\n\n
\n\n\n\n\n\n\n\n\nWhen `strokeAttenuation` is `false`, the stroke width is automatically adjusted to compensate for the object's world transform scale, maintaining constant visual thickness regardless of zoom level. When `true` (default), stroke width scales normally with transformations.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Path](/docs/path/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Polygon.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Polygon](/docs/shapes/polygon/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Polygon.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Polygon\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Polygon](/docs/shapes/polygon/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Polygon](/docs/shapes/polygon/) from an object notation of a [Two.Polygon](/docs/shapes/polygon/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## radius\n\n
\n\n\n\nTwo.Polygon.radius
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe radius value of the polygon.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## width\n\n
\n\n\n\nTwo.Polygon.width
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe size of the width of the polygon.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## height\n\n
\n\n\n\nTwo.Polygon.height
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe size of the height of the polygon.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## sides\n\n
\n\n\n\nTwo.Polygon.sides
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe amount of sides the polyogn has.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Polygon.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| polygon | The reference [Two.Polygon](/docs/shapes/polygon/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Polygon](/docs/shapes/polygon/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Polygon.clone
\n\n\n\n\n\n\n__Returns__: Two.Polygon\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Polygon](/docs/shapes/polygon/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n"
},
{
"path": "wiki/docs/shapes/rectangle/README.md",
"content": "---\ntitle: Two.Rectangle\npageClass: docs\nlang: en-US\n---\n\n# Two.Rectangle\n\n\nTwo.Polygon.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Path](/docs/path/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Rectangle.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Rectangle](/docs/shapes/rectangle/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Rectangle.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Rectangle\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Rectangle](/docs/shapes/rectangle/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Rectangle](/docs/shapes/rectangle/) from an object notation of a [Two.Rectangle](/docs/shapes/rectangle/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## width\n\n
\n\n\n\nTwo.Rectangle.width
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe size of the width of the rectangle.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## height\n\n
\n\n\n\nTwo.Rectangle.height
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe size of the height of the rectangle.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## origin\n\n
\n\n\n\nTwo.Rectangle.origin
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA two-component vector describing the origin offset to draw the rectangle. Default is `0, 0`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Rectangle.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| rectangle | The reference [Two.Rectangle](/docs/shapes/rectangle/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Rectangle](/docs/shapes/rectangle/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Rectangle.clone
\n\n\n\n\n\n\n__Returns__: Two.Rectangle\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Rectangle](/docs/shapes/rectangle/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n"
},
{
"path": "wiki/docs/shapes/rounded-rectangle/README.md",
"content": "---\ntitle: Two.RoundedRectangle\npageClass: docs\nlang: en-US\n---\n\n# Two.RoundedRectangle\n\n\nTwo.Rectangle.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Path](/docs/path/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.RoundedRectangle.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.RoundedRectangle.fromObject
\n\n\n\n\n\n\n__Returns__: Two.RoundedRectangle\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/) from an object notation of a [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## width\n\n
\n\n\n\nTwo.RoundedRectangle.width
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe width of the rounded rectangle.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## height\n\n
\n\n\n\nTwo.RoundedRectangle.height
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe height of the rounded rectangle.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## radius\n\n
\n\n\n\nTwo.RoundedRectangle.radius
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe size of the radius of the rounded rectangle.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.RoundedRectangle.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| roundedRectangle | The reference [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.RoundedRectangle.clone
\n\n\n\n\n\n\n__Returns__: Two.RoundedRectangle\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.RoundedRectangle](/docs/shapes/rounded-rectangle/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n"
},
{
"path": "wiki/docs/shapes/star/README.md",
"content": "---\ntitle: Two.Star\npageClass: docs\nlang: en-US\n---\n\n# Two.Star\n\n\nTwo.RoundedRectangle.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Path](/docs/path/)\n\n
\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Star.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Star](/docs/shapes/star/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Star.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Star\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Star](/docs/shapes/star/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Star](/docs/shapes/star/) from an object notation of a [Two.Star](/docs/shapes/star/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## innerRadius\n\n
\n\n\n\nTwo.Star.innerRadius
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe size of the inner radius of the star.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## outerRadius\n\n
\n\n\n\nTwo.Star.outerRadius
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe size of the outer radius of the star.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## sides\n\n
\n\n\n\nTwo.Star.sides
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe amount of sides the star has.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Star.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| star | The reference [Two.Star](/docs/shapes/star/) |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Star](/docs/shapes/star/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Star.clone
\n\n\n\n\n\n\n__Returns__: Two.Star\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Star](/docs/shapes/star/) with the same properties of the current path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n"
},
{
"path": "wiki/docs/text/README.md",
"content": "---\ntitle: Two.Text\npageClass: docs\nlang: en-US\n---\n\n# Two.Text\n\n\nTwo.Star.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the path.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Shape](/docs/shape/)\n\n
\n\n\nThis is a primitive class for creating drawable text that can be added to the scenegraph.\n\n\n\n\n\n\n\n## Ratio\n\n
\n\n\n\nTwo.Text.Ratio
\n\n\n\n\n\n\n\n\n\n\n\n\n\nApproximate aspect ratio of a typeface's character width to height.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Properties\n\n
\n\n\n\nTwo.Text.Properties
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA list of properties that are on every [Two.Text](/docs/text/).\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Measure\n\n
\n\n\n\nTwo.Measure
\n\n\n\n\n\n\n__Returns__: Object\n\n\n- The width and height of the [Two.Text](/docs/text/) instance.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| text | The instance of [Two.Text](/docs/text/) to measure. |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fromObject\n\n
\n\n\n\nTwo.Text.fromObject
\n\n\n\n\n\n\n__Returns__: Two.Text\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object notation of a [Two.Text](/docs/text/) to create a new instance |\n
\n\n\n\n\n\n\nCreate a new [Two.Text](/docs/text/) from an object notation of a [Two.Text](/docs/text/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## value\n\n
\n\n\n\nTwo.Text.value
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe characters to be rendered to the the screen. Referred to in the documentation sometimes as the `message`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## family\n\n
\n\n\n\nTwo.Text.family
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe font family Two.js should attempt to register for rendering. The default value is `'sans-serif'`. Comma separated font names can be supplied as a \"stack\", similar to the CSS implementation of `font-family`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## size\n\n
\n\n\n\nTwo.Text.size
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe font size in Two.js point space. Defaults to `13`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## leading\n\n
\n\n\n\nTwo.Text.leading
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe height between lines measured from base to base in Two.js point space. Defaults to `17`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## alignment\n\n
\n\n\n\nTwo.Text.alignment
\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlignment of text in relation to [Two.Text.translation](/docs/text/#translation)'s coordinates. Possible values include `'left'`, `'center'`, `'right'`. Defaults to `'center'`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## baseline\n\n
\n\n\n\nTwo.Text.baseline
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe vertical aligment of the text in relation to [Two.Text.translation](/docs/text/#translation)'s coordinates. Possible values include `'top'`, `'middle'`, `'bottom'`, and `'baseline'`. Defaults to `'baseline'`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## style\n\n
\n\n\n\nTwo.Text.style
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe font's style. Possible values include '`normal`', `'italic'`. Defaults to `'normal'`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## weight\n\n
\n\n\n\nTwo.Text.weight
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA number at intervals of 100 to describe the font's weight. This compatibility varies with the typeface's variant weights. Larger values are bolder. Smaller values are thinner. Defaults to `'500'`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## decoration\n\n
\n\n\n\nTwo.Text.decoration
\n\n\n\n\n\n\n\n\n\n\n\n\n\nString to delineate whether text should be decorated with for instance an `'underline'`. Defaults to `'none'`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## direction\n\n
\n\n\n\nTwo.Text.direction
\n\n\n\n\n\n\n\n\n\n\n\n\n\nString to determine what direction the text should run. Possibly values are `'ltr'` for left-to-right and `'rtl'` for right-to-left. Defaults to `'ltr'`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fill\n\n
\n\n\n\nTwo.Text.fill
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe value of what the text object should be filled in with.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [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`.\n\n
\n\n\n\n\n\n\n\n\n\n\n## stroke\n\n
\n\n\n\nTwo.Text.stroke
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe value of what the text object should be filled in with.\n\n\n
\n\n\n\n\n\n\n\n\n\n\nSee: [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`.\n\n
\n\n\n\n\n\n\n\n\n\n\n## linewidth\n\n
\n\n\n\nTwo.Text.linewidth
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe thickness in pixels of the stroke.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## opacity\n\n
\n\n\n\nTwo.Text.opacity
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe opaqueness of the text object.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## visible\n\n
\n\n\n\nTwo.Text.visible
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDisplay the text object or not.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## mask\n\n
\n\n\n\nTwo.Text.mask
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe shape whose alpha property becomes a clipping area for the text.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## clip\n\n
\n\n\n\nTwo.Text.clip
\n\n\n\n\n\n\n\n\n\n\n\n\n\nObject to define clipping area.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## dashes\n\n
\n\n\n\nTwo.Text.dashes
\n\n\n\n\n\n\n\n\n\n\n\n\n\nArray of numbers. Odd indices represent dash length. Even indices represent dash space.\n\n\n
\n\n\n\n\n\n\n\n\nA list of numbers that represent the repeated dash length and dash space applied to the stroke of the text.\n\n
\n\n\n\n\n\nSee: [https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray) for more information on the SVG stroke-dasharray attribute.\n\n
\n\n\n\n\n\n\n\n\n\n\n## dashes.offset\n\n
\n\n\n\nTwo.Text.dashes.offset
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA number in pixels to offset [Two.Text.dashes](/docs/text/#dashes) display.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Text.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| text | |\n
\n\n\n\n\n\n\nCopy the properties of one [Two.Text](/docs/text/) onto another.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Text.clone
\n\n\n\n\n\n\n__Returns__: Two.Text\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| parent | The parent group or scene to add the clone to. |\n
\n\n\n\n\n\n\nCreate a new instance of [Two.Text](/docs/text/) with the same properties of the current text object.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.Text.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the text object.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## dispose\n\n
\n\n\n\nTwo.Text.dispose
\n\n\n\n\n\n\n__Returns__: Two.Text\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRelease the text's renderer resources and detach all events.\nThis method disposes fill and stroke effects (calling dispose() on\nGradients and Textures for thorough cleanup) while preserving the\nrenderer type for potential re-attachment to a new renderer.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## noFill\n\n
\n\n\n\nTwo.Text.noFill
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nShort hand method to set fill to `none`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## noStroke\n\n
\n\n\n\nTwo.Text.noStroke
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nShort hand method to set stroke to `none`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## getBoundingClientRect\n\n
\n\n\n\nTwo.Text.getBoundingClientRect
\n\n\n\n\n\n\n__Returns__: Object\n\n\n- Returns object with top, left, right, bottom, width, height attributes.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| shallow | Describes whether to calculate off local matrix or world matrix. |\n
\n\n\n\n\n\n\nReturn an object with top, left, right, bottom, width, and height parameters of the text object.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## strokeAttenuation\n\n
\n\n\n"
},
{
"path": "wiki/docs/two/README.md",
"content": "---\ntitle: Two\npageClass: docs\nlang: en-US\n---\n\n# Two\n\n\nTwo.Text.strokeAttenuation
\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen set to `true`, stroke width scales with transformations (default behavior). When `false`, stroke width remains constant in screen space.\n\n\n
\n\n\n\n\n\n\n\n\nWhen `strokeAttenuation` is `false`, the stroke width is automatically adjusted to compensate for the object's world transform scale, maintaining constant visual thickness regardless of zoom level. When `true` (default), stroke width scales normally with transformations.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Events](/docs/events/)\n\n
\n\n\nThe 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.\n\n\n\n\n\n\n\n## Types\n\n
\n\n\n\nTwo.Types
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe different rendering types available in the library.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Version\n\n
\n\n\n\nTwo.Version
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe current working version of the library, `v0.8.23`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## PublishDate\n\n
\n\n\n\nTwo.PublishDate
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe automatically generated publish date in the build process to verify version release candidates.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Identifier\n\n
\n\n\n\nTwo.Identifier
\n\n\n\n\n\n\n\n\n\n\n\n\n\nString prefix for all Two.js object's ids. This trickles down to SVG ids.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Resolution\n\n
\n\n\n\nTwo.Resolution
\n\n\n\n\n\n\n\n\n\n\n\n\n\nDefault amount of vertices to be used for interpreting Arcs and ArcSegments.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## AutoCalculateImportedMatrices\n\n
\n\n\n\nTwo.AutoCalculateImportedMatrices
\n\n\n\n\n\n\n\n\n\n\n\n\n\nWhen importing SVGs through the [Two.interpret](/docs/two/#interpret) and [Two.load](/docs/two/#load), this boolean determines whether Two.js infers and then overrides the exact transformation matrix of the reference SVG.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Instances\n\n
\n\n\n\nTwo.Instances
\n\n\n\n\n\n\n\n\n\n\n\n\n\nRegistered list of all Two.js instances in the current session.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## uniqueId\n\n
\n\n\n\nTwo.uniqueId
\n\n\n\n\n\n\n__Returns__: Number\n\n\nEver increasing Number.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSimple method to access an incrementing value. Used for `id` allocation on all Two.js objects.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## Commands\n\n
\n\n\n\nTwo.Commands
\n\n\n\n\n\n\n\n\n\n\n\n\n\nMap of possible path commands. Taken from the SVG specification. Commands include: `move`, `line`, `curve`, `arc`, and `close`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Utils\n\n
\n\n\n\nTwo.Utils
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA massive object filled with utility functions and properties.\n\n\n\n__Two.Utils.read__: A collection of SVG parsing functions indexed by element name.\n\n\n\n__Two.Utils.read.path__: Parse SVG path element or `d` attribute string.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## type\n\n
\n\n\n\nTwo.type
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA string representing which type of renderer the instance has instantiated.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## renderer\n\n
\n\n\n\nTwo.renderer
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe instantiated rendering class for the instance. For a list of possible rendering types check out Two.Types.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## scene\n\n
\n\n\n\nTwo.scene
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe base level [Two.Group](/docs/group/) which houses all objects for the instance. Because it is a [Two.Group](/docs/group/) transformations can be applied to it that will affect all objects in the instance. This is handy as a makeshift inverted camera.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## width\n\n
\n\n\n\nTwo.width
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe width of the instance's dom element.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## height\n\n
\n\n\n\nTwo.height
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe height of the instance's dom element.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## frameCount\n\n
\n\n\n\nTwo.frameCount
\n\n\n\n\n\n\n\n\n\n\n\n\n\nAn integer representing how many frames have elapsed.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## timeDelta\n\n
\n\n\n\nTwo.timeDelta
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA number representing how much time has elapsed since the last frame in milliseconds.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## playing\n\n
\n\n\n\nTwo.playing
\n\n\n\n\n\n\n\n\n\n\n\n\n\nA boolean representing whether or not the instance is being updated through the automatic `requestAnimationFrame`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## fit\n\n
\n\n\n\nTwo.fit
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nIf `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.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## appendTo\n\n
\n\n\n\nTwo.appendTo
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| elem | The DOM element to append the Two.js stage to. |\n
\n\n\n\n\n\n\nShorthand method to append your instance of Two.js to the `document`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## play\n\n
\n\n\n\nTwo.play
\n\n\n\n\n\n\n\n\n\n\n__Triggers__:\n\n+ `event:play`\n\n
\n\n\n\n\n\n\n\n\n\n\nCall to start an internal animation loop.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## pause\n\n
\n\n\n\nTwo.pause
\n\n\n\n\n\n\n\n\n\n\n__Triggers__:\n\n+ `event:pause`\n\n
\n\n\n\n\n\n\n\n\n\n\nCall to stop the internal animation loop for a specific instance of Two.js.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## release\n\n
\n\n\n\nTwo.release
\n\n\n\n\n\n\n__Returns__: Two.Element\n\n\nThe object passed for event deallocation.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| obj | Object to release from event listening. If none provided then the root [Two.Group](/docs/group/) will be used. |\n
\n\n\n\n\n\n\nRelease a [Two.Element](/docs/element/)’s events from memory and recurse through its children, effects, and/or vertices.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## getShapesAtPoint\n\n
\n\n\n\nTwo.getShapesAtPoint
\n\n\n\n\n\n\n__Returns__: Array.\\\n\n\nOrdered list of shapes under the specified point, front to back.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | X coordinate in world space. |\n| y | Y coordinate in world space. |\n| options | Hit test configuration. |\n| options.visibleOnly | Limit results to visible shapes. |\n| options.includeGroups | Include groups in the hit results. |\n| options.mode | Whether to return all intersecting shapes or only the top-most. |\n| options.deepest | Alias for `mode: 'deepest'`. |\n| options.precision | Segmentation precision for curved geometry. |\n| options.tolerance | Pixel tolerance applied to hit testing. |\n| options.fill | Override fill testing behaviour. |\n| options.stroke | Override stroke testing behaviour. |\n| options.filter | Predicate to filter shapes from the result set. |\n
\n\n\n\n\n\n\nReturns shapes underneath the provided coordinates. Coordinates are expected in world space (matching the renderer output).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## update\n\n
\n\n\n\nTwo.update
\n\n\n\n\n\n\n\n\n\n\n__Triggers__:\n\n+ `event:update`\n\n
\n\n\n\n\n\n\n\n\n\n\nUpdate positions and calculations in one pass before rendering. Then render to the canvas.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## render\n\n
\n\n\n\nTwo.render
\n\n\n\n\n\n\n\n\n\n\n__Triggers__:\n\n+ `event:render`\n\n
\n\n\n\n\n\n\n\n\n\n\nRender all drawable and visible objects of the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## add\n\n
\n\n\n\nTwo.add
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| objects | An array of Two.js objects. Alternatively can add objects as individual arguments. |\n
\n\n\n\n\n\n\nA shorthand method to add specific Two.js objects to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## remove\n\n
\n\n\n\nTwo.remove
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| objects | An array of Two.js objects. |\n
\n\n\n\n\n\n\nA shorthand method to remove specific Two.js objects from the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clear\n\n
\n\n\n\nTwo.clear
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nRemoves 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.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeLine\n\n
\n\n\n\nTwo.makeLine
\n\n\n\n\n\n\n__Returns__: Two.Line\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x1 | |\n| y1 | |\n| x2 | |\n| y2 | |\n
\n\n\n\n\n\n\nCreates a Two.js line and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeArrow\n\n
\n\n\n\nTwo.makeArrow
\n\n\n\n\n\n\n__Returns__: Two.Path\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x1 | |\n| y1 | |\n| x2 | |\n| y2 | |\n
\n\n\n\n\n\n\nCreates a Two.js arrow and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeRectangle\n\n
\n\n\n\nTwo.makeRectangle
\n\n\n\n\n\n\n__Returns__: Two.Rectangle\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | |\n| y | |\n| width | |\n| height | |\n
\n\n\n\n\n\n\nCreates a Two.js rectangle and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeRoundedRectangle\n\n
\n\n\n\nTwo.makeRoundedRectangle
\n\n\n\n\n\n\n__Returns__: Two.RoundedRectangle\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | |\n| y | |\n| width | |\n| height | |\n| sides | |\n
\n\n\n\n\n\n\nCreates a Two.js rounded rectangle and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeCircle\n\n
\n\n\n\nTwo.makeCircle
\n\n\n\n\n\n\n__Returns__: Two.Circle\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | |\n| y | |\n| radius | |\n| resolution | |\n
\n\n\n\n\n\n\nCreates a Two.js circle and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeEllipse\n\n
\n\n\n\nTwo.makeEllipse
\n\n\n\n\n\n\n__Returns__: Two.Ellipse\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | |\n| y | |\n| rx | |\n| ry | |\n| resolution | |\n
\n\n\n\n\n\n\nCreates a Two.js ellipse and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeStar\n\n
\n\n\n\nTwo.makeStar
\n\n\n\n\n\n\n__Returns__: Two.Star\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | |\n| y | |\n| outerRadius | |\n| innerRadius | |\n| sides | |\n
\n\n\n\n\n\n\nCreates a Two.js star and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeCurve\n\n
\n\n\n\nTwo.makeCurve
\n\n\n\n\n\n\n__Returns__: Two.Path\n\n\n- Where `path.curved` is set to `true`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| points | An array of [Two.Anchor](/docs/anchor/) points. |\n| | Alternatively you can pass alternating `x` / `y` coordinate values as individual arguments. These will be combined into [Two.Anchor](/docs/anchor/)s for use in the path. |\n
\n\n\n\n\n\n\nCreates a Two.js path that is curved and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## makePolygon\n\n
\n\n\n\nTwo.makePolygon
\n\n\n\n\n\n\n__Returns__: Two.Polygon\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | |\n| y | |\n| radius | |\n| sides | |\n
\n\n\n\n\n\n\nCreates a Two.js polygon and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeArcSegment\n\n
\n\n\n\nTwo.makeArcSegment
\n\n\n\n\n\n\n__Returns__: Two.ArcSegment\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | |\n| y | |\n| innerRadius | |\n| outerRadius | |\n| startAngle | |\n| endAngle | |\n| resolution | The number of vertices that should comprise the arc segment. |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## makePoints\n\n
\n\n\n\nTwo.makePoints
\n\n\n\n\n\n\n__Returns__: Two.Points\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| points | An array of [Two.Vector](/docs/vector/) points |\n| | Alternatively you can pass alternating `x` / `y` coordinate values as individual agrguments. These will be combined into [Two.Vector](/docs/vector/)s for use in the points object. |\n
\n\n\n\n\n\n\nCreates a Two.js points object and adds it to the current scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makePath\n\n
\n\n\n\nTwo.makePath
\n\n\n\n\n\n\n__Returns__: Two.Path\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| points | An array of [Two.Anchor](/docs/anchor/) points |\n| | Alternatively you can pass alternating `x` / `y` coordinate values as individual arguments. These will be combined into [Two.Anchor](/docs/anchor/)s for use in the path. |\n
\n\n\n\n\n\n\nCreates a Two.js path and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## makeText\n\n
\n\n\n\nTwo.makeText
\n\n\n\n\n\n\n__Returns__: Two.Text\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| message | |\n| x | |\n| y | |\n| styles | An object to describe any of the [Two.Text.Properties](/docs/text/#properties) including `fill`, `stroke`, `linewidth`, `family`, `alignment`, `leading`, `opacity`, etc.. |\n
\n\n\n\n\n\n\nCreates a Two.js text object and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeLinearGradient\n\n
\n\n\n\nTwo.makeLinearGradient
\n\n\n\n\n\n\n__Returns__: Two.LinearGradient\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x1 | |\n| y1 | |\n| x2 | |\n| y2 | |\n| 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. |\n
\n\n\n\n\n\n\nCreates 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.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeRadialGradient\n\n
\n\n\n\nTwo.makeRadialGradient
\n\n\n\n\n\n\n__Returns__: Two.RadialGradient\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x1 | |\n| y1 | |\n| radius | |\n| 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. |\n
\n\n\n\n\n\n\nCreates 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.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeSprite\n\n
\n\n\n\nTwo.makeSprite
\n\n\n\n\n\n\n__Returns__: Two.Sprite\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| src | The URL path to an image or an already created [Two.Texture](/docs/effects/texture/). |\n| x | |\n| y | |\n| columns | |\n| rows | |\n| frameRate | |\n| autostart | |\n
\n\n\n\n\n\n\nCreates a Two.js sprite object and adds it to the scene. Sprites can be used for still images as well as animations.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeImage\n\n
\n\n\n\nTwo.makeImage
\n\n\n\n\n\n\n__Returns__: Two.Image\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| src | The URL path to an image or an already created [Two.Texture](/docs/effects/texture/). |\n| x | |\n| y | |\n| width | |\n| height | |\n| mode | |\n
\n\n\n\n\n\n\nCreates a Two.js image object and adds it to the scene. Images are scaled to fit the provided width and height.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeImageSequence\n\n
\n\n\n\nTwo.makeImageSequence
\n\n\n\n\n\n\n__Returns__: Two.ImageSequence\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| src | An array of paths or of [Two.Textures](/docs/effects/texture/). |\n| x | |\n| y | |\n| frameRate | |\n| autostart | |\n
\n\n\n\n\n\n\nCreates a Two.js image sequence object and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeTexture\n\n
\n\n\n\nTwo.makeTexture
\n\n\n\n\n\n\n__Returns__: Two.Texture\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| src | The URL path to an image or a DOM image-like element. |\n| callback | Function to be invoked when the image is loaded. |\n
\n\n\n\n\n\n\nCreates a Two.js texture object.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## makeGroup\n\n
\n\n\n\nTwo.makeGroup
\n\n\n\n\n\n\n__Returns__: Two.Group\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| objects | Two.js objects to be added to the group in the form of an array or as individual arguments. |\n
\n\n\n\n\n\n\nCreates a Two.js group object and adds it to the scene.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## interpret\n\n
\n\n\n\nTwo.interpret
\n\n\n\n\n\n\n__Returns__: Two.Group\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| svg | The SVG node to be parsed. |\n| shallow | Don't create a top-most group but append all content directly. |\n| add | – Automatically add the reconstructed SVG node to scene. |\n
\n\n\n\n\n\n\nInterpret 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.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## load\n\n
\n\n\n"
},
{
"path": "wiki/docs/vector/README.md",
"content": "---\ntitle: Two.Vector\npageClass: docs\nlang: en-US\n---\n\n# Two.Vector\n\n\nTwo.load
\n\n\n\n\n\n\n__Returns__: Two.Group\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| pathOrSVGContent | The URL path of an SVG file or an SVG document as text. |\n| callback | Function to call once loading has completed. |\n
\n\n\n\n\n\n\nLoad an SVG file or SVG text and interpret it into Two.js legible objects.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\nExtends: [Two.Events](/docs/events/)\n\n
\n\n\nA class to store `x` / `y` component vector data. In addition to storing data `Two.Vector` has suped up methods for commonplace mathematical operations.\n\n\n\n\n\n\n\n## zero\n\n
\n\n\n\nTwo.Vector.zero
\n\n\n\n\n\n\n\n\n\n\n\n\n\nHandy reference to a vector with component values 0, 0 at all times.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## left\n\n
\n\n\n\nTwo.Vector.left
\n\n\n\n\n\n\n\n\n\n\n\n\n\nHandy reference to a vector with component values -1, 0 at all times.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## right\n\n
\n\n\n\nTwo.Vector.right
\n\n\n\n\n\n\n\n\n\n\n\n\n\nHandy reference to a vector with component values 1, 0 at all times.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## up\n\n
\n\n\n\nTwo.Vector.up
\n\n\n\n\n\n\n\n\n\n\n\n\n\nHandy reference to a vector with component values 0, -1 at all times.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## down\n\n
\n\n\n\nTwo.Vector.down
\n\n\n\n\n\n\n\n\n\n\n\n\n\nHandy reference to a vector with component values 0, 1 at all times.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## add\n\n
\n\n\n\nTwo.Vector.add
\n\n\n\n\n\n\n__Returns__: Two.Vector\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v1 | First [Two.Vector](/docs/vector/) |\n| v2 | Second [Two.Vector](/docs/vector/) |\n
\n\n\n\n\n\n\nAdd two vectors together.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## sub\n\n
\n\n\n\nTwo.Vector.sub
\n\n\n\n\n\n\n__Returns__: Two.Vector\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v1 | First [Two.Vector](/docs/vector/) |\n| v2 | Second [Two.Vector](/docs/vector/) |\n
\n\n\n\n\n\n\nSubtract two vectors: `v2` from `v1`.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## subtract\n\n
\n\n\n\nTwo.Vector.subtract
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlias for [Two.Vector.sub](/docs/vector/#sub).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## ratioBetween\n\n
\n\n\n\nTwo.Vector.ratioBetween
\n\n\n\n\n\n\n__Returns__: Number\n\n\nThe ratio betwen two points `v1` and `v2`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v1 | First [Two.Vector](/docs/vector/) |\n| v2 | Second [Two.Vector](/docs/vector/) |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## angleBetween\n\n
\n\n\n\nTwo.Vector.angleBetween
\n\n\n\n\n\n\n__Returns__: Number\n\n\nThe angle between points `v1` and `v2`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v1 | First [Two.Vector](/docs/vector/) |\n| v2 | Second [Two.Vector](/docs/vector/) |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## distanceBetween\n\n
\n\n\n\nTwo.Vector.distanceBetween
\n\n\n\n\n\n\n__Returns__: Number\n\n\nThe distance between points `v1` and `v2`. Distance is always positive.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v1 | First [Two.Vector](/docs/vector/) |\n| v2 | Second [Two.Vector](/docs/vector/) |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## distanceBetweenSquared\n\n
\n\n\n\nTwo.Vector.distanceBetweenSquared
\n\n\n\n\n\n\n__Returns__: Number\n\n\nThe squared distance between points `v1` and `v2`.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v1 | First [Two.Vector](/docs/vector/) |\n| v2 | Second [Two.Vector](/docs/vector/) |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## x\n\n
\n\n\n\nTwo.Vector.x
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe horizontal x-component of the vector.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## y\n\n
\n\n\n\nTwo.Vector.y
\n\n\n\n\n\n\n\n\n\n\n\n\n\nThe vertical y-component of the vector.\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## set\n\n
\n\n\n\nTwo.Vector.set
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | Value of `x` component |\n| y | Value of `y` component |\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## copy\n\n
\n\n\n\nTwo.Vector.copy
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v | The [Two.Vector](/docs/vector/) to copy |\n
\n\n\n\n\n\n\nCopy the `x` / `y` components of another object [Two.Vector](/docs/vector/).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clear\n\n
\n\n\n\nTwo.Vector.clear
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSet the `x` / `y` component values of the vector to zero.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## clone\n\n
\n\n\n\nTwo.Vector.clone
\n\n\n\n\n\n\n__Returns__: Two.Vector\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCreate a new vector and copy the existing values onto the newly created instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## add\n\n
\n\n\n\nTwo.Vector.add
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v | The [Two.Vector](/docs/vector/) to add |\n
\n\n\n\n\n\n\nAdd an object with `x` / `y` component values to the instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## add\n\n
\n\n\n\nTwo.Vector.add
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| n | Number to add |\n
\n\n\n\n\n\n\nAdd the **same** number to both `x` / `y` component values of the instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## add\n\n
\n\n\n\nTwo.Vector.add
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | Number to add to `x` component |\n| y | Number to add to `y` component |\n
\n\n\n\n\n\n\nAdd `x` / `y` values to their respective component value on the instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## addSelf\n\n
\n\n\n\nTwo.Vector.addSelf
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlias for [Two.Vector.add](/docs/vector/#add).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## sub\n\n
\n\n\n\nTwo.Vector.sub
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v | The amount as a [Two.Vector](/docs/vector/) to subtract |\n
\n\n\n\n\n\n\nSubtract an object with `x` / `y` component values to the instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## sub\n\n
\n\n\n\nTwo.Vector.sub
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| n | Number to subtract |\n
\n\n\n\n\n\n\nSubtract the **same** number to both `x` / `y` component values of the instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## sub\n\n
\n\n\n\nTwo.Vector.sub
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | Number to subtract from `x` component |\n| y | Number to subtract from `y` component |\n
\n\n\n\n\n\n\nSubtract `x` / `y` values to their respective component value on the instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## subtract\n\n
\n\n\n\nTwo.Vector.subtract
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlias for [Two.Vector.sub](/docs/vector/#sub).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## subSelf\n\n
\n\n\n\nTwo.Vector.subSelf
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlias for [Two.Vector.sub](/docs/vector/#sub).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## subtractSelf\n\n
\n\n\n\nTwo.Vector.subtractSelf
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlias for [Two.Vector.sub](/docs/vector/#sub).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## multiply\n\n
\n\n\n\nTwo.Vector.multiply
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v | The [Two.Vector](/docs/vector/) to multiply |\n
\n\n\n\n\n\n\nMultiply an object with `x` / `y` component values to the instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## multiply\n\n
\n\n\n\nTwo.Vector.multiply
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| n | The number to multiply |\n
\n\n\n\n\n\n\nMultiply the **same** number to both x / y component values of the instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## multiply\n\n
\n\n\n\nTwo.Vector.multiply
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | The number to multiply to `x` component |\n| y | The number to multiply to `y` component |\n
\n\n\n\n\n\n\nMultiply `x` / `y` values to their respective component value on the instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## multiplySelf\n\n
\n\n\n\nTwo.Vector.multiplySelf
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlias for [Two.Vector.multiply](/docs/vector/#multiply).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## multiplyScalar\n\n
\n\n\n\nTwo.Vector.multiplyScalar
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| s | The scalar to multiply by. |\n
\n\n\n\n\n\n\nMulitiply the vector by a single number. Shorthand to call [Two.Vector.multiply](/docs/vector/#multiply) directly.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## divide\n\n
\n\n\n\nTwo.Vector.divide
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v | The [Two.Vector](/docs/vector/) to divide |\n
\n\n\n\n\n\n\nDivide an object with `x` / `y` component values to the instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## divide\n\n
\n\n\n\nTwo.Vector.divide
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| n | The number to divide |\n
\n\n\n\n\n\n\nDivide the **same** number to both x / y component values of the instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## divide\n\n
\n\n\n\nTwo.Vector.divide
\n\n\n\n\n_Overloaded_\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| x | The number to divide on the `x` component |\n| y | The number to divide on the `y` component |\n
\n\n\n\n\n\n\nDivide `x` / `y` values to their respective component value on the instance.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## divideSelf\n\n
\n\n\n\nTwo.Vector.divideSelf
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nAlias for [Two.Vector.divide](/docs/vector/#divide).\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## divideScalar\n\n
\n\n\n\nTwo.Vector.divideScalar
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| s | The scalar to divide by. |\n
\n\n\n\n\n\n\nDivide the vector by a single number. Shorthand to call [Two.Vector.divide](/docs/vector/#divide) directly.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## negate\n\n
\n\n\n\nTwo.Vector.negate
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nInvert each component's sign value.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## dot\n\n
\n\n\n\nTwo.Vector.dot
\n\n\n\n\n\n\n__Returns__: Number\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nGet the [dot product](https://en.wikipedia.org/wiki/Dot_product) of the vector.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## length\n\n
\n\n\n\nTwo.Vector.length
\n\n\n\n\n\n\n__Returns__: Number\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nGet the length of a vector.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## lengthSquared\n\n
\n\n\n\nTwo.Vector.lengthSquared
\n\n\n\n\n\n\n__Returns__: Number\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nGet the length of the vector to the power of two. Widely used as less expensive than [Two.Vector.length](/docs/vector/#length) because it isn't square-rooting any numbers.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## normalize\n\n
\n\n\n\nTwo.Vector.normalize
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nNormalize the vector from negative one to one.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## distanceTo\n\n
\n\n\n\nTwo.Vector.distanceTo
\n\n\n\n\n\n\n__Returns__: Number\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nGet the distance between two vectors.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## distanceToSquared\n\n
\n\n\n\nTwo.Vector.distanceToSquared
\n\n\n\n\n\n\n__Returns__: Number\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nGet the distance between two vectors to the power of two. Widely used as less expensive than [Two.Vector.distanceTo](/docs/vector/#distanceto) because it isn't square-rooting any numbers.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## setLength\n\n
\n\n\n\nTwo.Vector.setLength
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| l | length to set vector to. |\n
\n\n\n\n\n\n\nSet the length of a vector.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## equals\n\n
\n\n\n\nTwo.Vector.equals
\n\n\n\n\n\n\n__Returns__: Boolean\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v | The vector to compare against. |\n| eps | An options epsilon for precision. |\n
\n\n\n\n\n\n\nQualify if one vector roughly equal another. With a margin of error defined by epsilon.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## lerp\n\n
\n\n\n\nTwo.Vector.lerp
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| v | The destination vector to step towards. |\n| t | The zero to one value of how close the current vector gets to the destination vector. |\n
\n\n\n\n\n\n\nLinear interpolate one vector to another by an amount `t` defined as a zero to one number.\n\n
\n\n\n\n\n\nSee: [Matt DesLauriers](https://twitter.com/mattdesl/status/1031305279227478016) has a good thread about this.\n\n
\n\n\n\n\n\n\n\n\n\n\n## isZero\n\n
\n\n\n\nTwo.Vector.isZero
\n\n\n\n\n\n\n__Returns__: Boolean\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| eps | Optional precision amount to check against. |\n
\n\n\n\n\n\n\nCheck to see if vector is roughly zero, based on the `epsilon` precision value.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toString\n\n
\n\n\n\nTwo.Vector.toString
\n\n\n\n\n\n\n__Returns__: String\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a comma-separated string of x, y value. Great for storing in a database.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## toObject\n\n
\n\n\n\nTwo.Vector.toObject
\n\n\n\n\n\n\n__Returns__: Object\n\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nReturn a JSON compatible plain object that represents the vector.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n## rotate\n\n
\n\n\n"
},
{
"path": "wiki/donate/README.md",
"content": "Two.Vector.rotate
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| Argument | Description |\n| ---- | ----------- |\n| radians | The amount to rotate the vector by in radians. |\n
\n\n\n\n\n\n\nRotate a vector.\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n---\n\n### Community Examples\n\n\n\n
\n\n\n\n\n#### Even More References\n\nThere are many more examples that exist out on the internet. Some starting points are:\n\n- [Two.js Collection on Codepen](https://codepen.io/collection/DRdLJk)\n- [A Beginner's Guide to Drawing 2D Graphics With Two.js](https://code.tutsplus.com/tutorials/a-beginners-guide-to-drawing-2d-graphics-using-twojs--cms-31681)\n- [Drawing and Animating with Two.js and Illustrator](https://modernweb.com/drawing-and-animating-with-two-js-and-illustrator/)\n- [Two.js tutor as a ChatGPT bot](https://chatgpt.com/g/g-hkcTX8uPm-two-js-tutor)\n" }, { "path": "wiki/incident-response-plan/README.md", "content": "---\npageClass: fine-print\ntitle: Two.js Incident Response Plan\nlang: en-US\n---\n\n# Incident Response Plan\n\n### Principles:\n\n- **Transparency:** All incidents and fixes are documented here for the community.\n- **Stewardship:** Take responsibility for protecting users and the project.\n- **Protection:** Act to minimize harm and provide guidance.\n\n# How Two.js Handles Incidents\n\n### 1. Detection & Triage\n\n- We monitor security reports sent via [security](/security) outreach, GitHub advisories, issues, and npm notifications.\n- If we spot a bug or report that looks like a security risk, we treat it as an incident.\n\n### 2. Assessment\n- Check the severity:\n - **Critical:** npm package or repo compromised, malicious code, supply chain attack.\n - **High:** Vulnerabilities that allow code execution, XSS, or leak secrets.\n - **Medium:** Denial of service, memory leaks, or integrity issues.\n - **Low:** Docs defacement, minor regressions.\n\n### 3. Response\n- Acknowledge the report (privately if sensitive, publicly if not).\n- For critical/high issues:\n - Rotate any exposed secrets/tokens.\n - Patch the bug or vulnerability.\n - Deprecate or yank affected npm versions if needed.\n - Rebuild and redeploy docs/site from a clean commit.\n- For medium/low issues:\n - Patch and document the fix.\n\n### 4. Communication\n- Update this wiki page with a summary of the incident and the fix.\n- For major issues, we post a GitHub Release note and a pinned Issue.\n- Provide upgrade or mitigation steps for users.\n\n### 5. Recovery & Hardening\n- After fixing, review what happened and update this process if needed.\n- Add tests or automation to prevent similar issues.\n- Rotate credentials and check repo/npm security settings.\n\n
\n\n---\n\n# Recent Incidents & Fixes\n\n
\n\n- None at this time\n\n
\n\n---\n\n**If you spot a security issue, please report it via [security](/security) outreach. We’ll respond as quickly as possible.**\n" }, { "path": "wiki/privacy/README.md", "content": "# Privacy Policy\n\n- Library: Two.js library code does not collect or send user data.\n- Website: This docs site uses Google Analytics (GA4).\n- Fonts: Third party fonts are provided by Adobe through Typekit\n- Data Collected (website): Page views, browser/device info, approximate location; no user accounts.\n\n- Retention: Analytics event data retained for up to 14 months.\n- Data Processors: Google (Analytics). Standard Contractual Clauses apply; see Google’s DPA.\n- Your Rights: Access, deletion, portability (where applicable). To exercise rights, contact [inquiries+two.js@jono.fyi](mailto:inquiries+two.js@jono.fyi).\n- Contact: [inquiries+two.js@jono.fyi](inquiries+two.js@jono.fyi)" }, { "path": "wiki/security/README.md", "content": "---\npageClass: fine-print\ntitle: Two.js Security Policy\nlang: en-US\n---\n\n# Notes on Safety\n\nWhen using Two.js or any other client-side rendering library we recommend considering:\n\n- Handle untrusted SVGs carefully: Do not load or interpret SVGs from untrusted users without sanitizing. Malicious SVGs can embed external references and scripts. Use an SVG sanitizer and set appropriate `Content-Security-Policy`.\n- Images and external assets: Prefer same-origin or vetted hosts. Disable `allow-scripts` in any embedders/iframes and avoid inline event handlers.\n- CSP recommended defaults: Consider a CSP that restricts scripts to self and trusted CDNs, disallows inline/eval, and sets `object-src 'none'`.\n\n::: tip Note\nThe Two.js library does not collect user data. If you embed Two.js in a site that handles user content, apply your own input validation, rate limiting, and abuse reporting workflow.\n:::\n\n# Security Policy\n\nIf you have discovered a security vulnerability in this project, please report it\nprivately. **Do not disclose it as a public issue.** This gives us time to work with you to fix the issue before public exposure, reducing the chance that the exploit will be used before a patch is released.\n\n**You may submit the report in the following ways:**\n\n- Github users can privately report security advisories directly [here](https://github.com/jonobr1/two.js/security/advisories/new)\n\n- Send an email to [inquiries+two.js@jono.fyi](mailto:inquiries+two.js@jono.fyi).\n\n**Please provide the following information in your report:**\n\n- The type of issue (e.g., buffer overflow, SQL injection, or cross-site scripting)\n- Full paths of source file(s) related to the manifestation of the issue\n- The location of the affected source code (tag/branch/commit or direct URL)\n- Any special configuration required to reproduce the issue\n- Step-by-step instructions to reproduce the issue\n- Proof-of-concept or exploit code (if possible)\n- Impact of the issue, including how an attacker might exploit the issue\n\nThis project is maintained by volunteers on a reasonable-effort basis. As such, we ask that you give us 90 days to work on a fix before public exposure.\n\n
\n\n---\n\n
\n\n_Two.js conforms to this [Incident Response Plan](https://two.js.org/incident-response-plan) in moments of security risks._" } ]