Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@sky-foundry/two.js
Advanced tools
Readme
A two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, canvas2d, and svg.
Home • Examples • Documentation • Help
Download the latest minified library and include it in your html.
<script src="js/two.min.js"></script>
It can also be installed via npm, Node Package Manager:
npm install --save two.js
Alternatively see how to build the library yourself.
Here is boilerplate html in order to draw a spinning rectangle in two.js:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/two.min.js"></script>
</head>
<body>
<script>
var two = new Two({
fullscreen: true,
autostart: true
}).appendTo(document.body);
var rect = two.makeRectangle(two.width / 2, two.height / 2, 50 ,50);
two.bind('update', function() {
rect.rotation += 0.001;
});
</script>
</body>
</html>
Two.js uses nodejs in order to build source files. You'll first want to install that. Once installed open up a terminal and head to the repository folder:
cd ~/path-to-repo/two.js
npm install
This will give you a number of libraries that the development of Two.js relies on. If for instance you only use the SvgRenderer
then you can really cut down on the file size by excluding the other renderers. To do this, modify /utils/build.js
to only add the files you'd like. Then run:
node ./utils/build
And the resulting /build/two.js
and /build/two.min.js
will be updated to your specification.
As of version v0.7.x
Two.js can also run in a headless environment, namely running on the server with the help of a library called Node Canvas. We don't add Node Canvas to dependencies of Two.js because it's not necessary to run it in the browser. However, it has all the hooks setup to run in a cloud environment. To get started follow the installation instructions on Automattic's readme. After you've done that run:
npm install canvas
npm intsall two.js
Now in a JavaScript file setup your Two.js scenegraph and save out frames whenever you need to:
var { createCanvas, Image } = require('canvas');
var Two = require('two.js')
var fs = require('fs');
var path = require('path');
var width = 800;
var height = 600;
var canvas = createCanvas(width, height);
Two.Utils.shim(canvas, Image);
var time = Date.now();
var two = new Two({
width: width,
height: height,
domElement: canvas
});
var rect = two.makeRectangle(width / 2, height / 2, 50, 50);
rect.fill = 'rgb(255, 100, 100)';
rect.noStroke();
two.render();
var settings = { compressionLevel: 3, filters: canvas.PNG_FILTER_NONE };
fs.writeFileSync(path.resolve(__dirname, './images/rectangle.png'), canvas.toBuffer('image/png', settings));
console.log('Finished rendering. Time took: ', Date.now() - time);
process.exit();
Two.Rectangle
has four vertices
Two.Path.closed
on latest ending
calculationsTwo.Path.clone
and Two.Text.clone
to use references where possible and to _update()
on returnTwo.Commands.arc
for better arc rendering across all renderersTwo.Path
and Two.Text
now have dashes
property to define stroke dashing behavior @danvanordenTwo.Vector
arithmetic methods made more consistent — still need to improve performanceTwo.Path.vertices
will not clone vectors, improving developer clarityTwo.ImageSequence
, Two.Sprite
, and Two.Rectangle
have origin
properties for offset renderingTwo.Group.getBoundingClientRect
will pass-through on effects instead of breakTwo.interpret
apply SVG node style
attributes to paths. Inherits from groups viewBox
attribute against Two.js instanceTwo.interpret
improves multi-decimal formatted d
attributesTwo.ZUI
added through the new /extras
folderTwo.Text.getBoundingClientRect
now returns an estimated bounding box objectTwo.interpret
properly assigns back calculated Z
coordinatesTwo.load
now immediately returns a Two.Group
for use without callbacks if desiredTwo.Group.length
to return the calculated length of all child pathsTwo.Group.beginning
and Two.Group.ending
calculate based on child Two.Path
s for intuitive grouped animatingTwo.Utils.shim
to properly handle canvas
and image
element spoofing in headless environmentsTwo.Path.getBoundingClientRect
considers control points from bezier curvesTwo.Path.beginning
and Two.Path.ending
calculate based on distance increasing accuracy for animation, but also performance loadTwo.Path._vertices
underlying to list of rendered points to Two.Path._renderer.vertices
Two.Path.ending
and Two.Path.beginning
on open pathsclone
method to Two.ArcSegment
, Two.Circle
, Two.Ellipse
, Two.Polygon
, Two.Rectangle
, Two.RoundedRectangle
, and Two.Star
primitivesviewBox
property from root SVG node in Two.interpret
Two.interpret
rx
and ry
property reading on Two.Utils.read.rect
Two.Utils.read['rounded-rect']
to interpret Rounded RectanglesTwo.RoundedRectangle.radius
to be a Two.Vector
for x, y component styling./build/two.module.js
for importing libraryQ
SVG interpretationTwo.Texture
, Two.Sprite
, and Two.ImageSequence
implemented in WebGLRenderer
className
property to Two.Shape
s for easier CSS styling in SVGRenderer
@fr0Two.Events.resize
is now bound to a renderer's setSize
function giving a more generic solution to change scenegraph items based on dimensions changingTwo.Path.getPointAt
method to clamp properlyTwo.Texture.repeat
for describing pattern invocationsTwo.Texture
, Two.Sprite
, and Two.ImageSequence
Two.Shape
inheritance for Two.Gradient
sTwo.Vector.rotate
method @ferm10nrequestAnimationFrame
@ferm10nTwo.Utils.Events.listenTo
and Two.Utils.Events.stopListening
@ferm10nTwo.Utils.Events
added to Two.Path.prototype
for event inheritance @ferm10nTwo.Shape.scale
to allow both numbers and Two.Vector
as property valueTwo.interpret
use latest primitivesTwo.Circle
primitiveTwo.Shape.translation
is now a getter/setter and can be replaced'px'
stringsTwo.SineRing
— make Two.Star.curved = true
and it's the same effectTwo.ArcSegment
, Two.Ellipse
, Two.Polygon
, Two.Rectangle
, Two.RoundedRectangle
, Two.Star
Two.Anchor.relative
interpretation in svg
, canvas
, and webgl
renderersremove
method to Two.Text
Two.Group
Two.CanvasRenderer.ctx.imageSmoothingEnabled
to not use deprecated invocation, issue 178Two.Group.mask
in SVGRenderer
to append to DOM correctlyrequire
imports to be compatible with require.jsTwo.Text
for programmatically writing text in Two.jstwo.interpret
to import svg
's gradientsTwo.Utils.xhr
and two.load
methods to asynchronously load SVG filesTwo.Gradient
, Two.LinearGradient
, and Two.RadialGradient
webgl
textures on removal of Two.Path
two.interpret
to import svg
's Elliptical ArcsTwo.ArcSegment
and Two.SineRing
as new shapes invoked like Two.Path
@chrisdelbuckTwo.Line
, Two.Rectangle
, Two.RoundedRectangle
, Two.Ellipse
, Two.Polygon
, and Two.Star
as new shapes invoked like Two.Path
Two.Polygon
to Two.Path
webgl
renderercanvas
renderer Leo KoppelkammTwo.Group.children
based on previous augmentationTwo.Group.children
to inherit from Two.Collection
effectively making it an array instead of a map Leo Koppelkamm
Two.Group.children.ids
Two.interpret
to handle polybezier path dataTwo.Group.mask
and Two.Polygon.clip
in order to create clipping masksTwo.Group
has own opacity
property Leo KoppelkammTwo.noConflict
non-destructive command internally to the libraryTwo.interpret
decomposes transform
attribute of source tagTwo.interpret
handles item irregularities from InkscapeTwo.Identifier
to use underscores instead of hyphens for dot-notation access Leo KoppelkammTwo.Group.getById
and Two.Group.getByClassName
methods for convenient selection Leo KoppelkammclassList
to all Two.Shape
s Leo KoppelkammTwo.Polygon.getPointAt
method to get coordinates on a curve/lineTwo.Polygon.length
property and Two.Polygon._updateLength
method to calculate length of curve/lineTwo.Group.prototype
observable properties on Two.Polygon.Properties
to ensure each property is considered uniqueTwo.Polygon.vertices
first and last vertex create automated control points when Two.Polygon.curved = true
Two.Polygon.subdivide
method to accommodate Two.makeEllipse
id
to be properly interpreted from SVG elements @chrisdelbuckwebgl
renderer getBoundingClientRect
to accommodate relative
anchorsbeginning
and ending
to clamp to each otherTwo.Polygon._update
and Two.Polygon.plot
in order to handle beginning
and ending
propertiesTwo.getComputedMatrix
and Two.Polygon.getBoundingClientRect
to adhere to nested transformationsTwo.Anchor
to change control
points relatively by default through anchor.relative
propertyTwo.Polygon.subdivide
method to accommodate curved = false
circumstancessvg
, canvas
, and webgl
renderers to properly reflect holes in curved Two.Polygon
sTwo.Group
clone
methodtoObject
method to Two.Group
, Two.Polygon
, Two.Anchor
Two.Polygon
initializes polygon.cap = 'butt'
and polygon.join = 'miter'
based on Adobe Illustrator defaultsTwo.Polygon.subdivide
method now works with Two.Commands.move
for noncontiguous polygonsgetBoundingClientRect
in order to remove the need to defer or wait for internal variables to be up-to-dateObject.defineProperty
_update
and flagReset
methods to Two.Shape
, Two.Group
, and Two.Polygon
canvas
and webgl
renderers and are now independent_matrix.manual
to override the default behavior of a Two.Polygon
transformationdomElement
on construction of new instance of twooverdraw
boolean to webgl
renderer @arodicsubdivide
method for Two.Polygon
and Two.Group
manual
properly is set on construction of Two.Polygon
that it binds Two.Anchor.controls
change eventswebgl
renderertwo.interpret(svg)
to handle compound pathsTwo.Anchor
which represents all anchor points drawn in two.jswindow
for node useTwo.Utils.getReflection
method to properly get reflection's in svg interpretationTwo.Vector
inherently not broadcast events and now needs to be explicity bound to in order to broadcast events, which two.js does internally for youTwo.Utils.Collection
an observable array-like class that polygon.vertices
inherit @fchasenTwo.Events.insert
and Two.Events.remove
for use with Two.Utils.Collection
getBoundingClientRect
for both Two.Group
and Two.Polygon
Two.Version
to clarify forthcoming buildsgroup.children
in canvas
and webgl
renderersremove
method for Two.Group
and Two.Polygon
corner
method to Two.Group
and Two.Polygon
allowing anchoring along the upper lefthand corner of the formcenter
method of Two.Group
and Two.Polygon
to not affect the translation
property to stay inline with corner
method and any future orientation and anchoring logiccanvas
rendereroverdraw
boolean to canvas
renderertwo.update();
to account for canvas and webglremove
and clear
methods to two
instancewebgl
contextTwo.Shape
's for advanced transformationsinverse
method to Two.Matrix
timeDelta
property to every two
instancenpm
, and dependency free build (build/two.clean.js
) @irosnoStroke
and noFill
commandsFAQs
A renderer agnostic two-dimensional drawing api for the web.
The npm package @sky-foundry/two.js receives a total of 3 weekly downloads. As such, @sky-foundry/two.js popularity was classified as not popular.
We found that @sky-foundry/two.js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.