Two.js.org Website Review

TWO.JS is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in aims to make the creation and animation of flat shapes easier and more concise. 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, translation, scale, etc. 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 This means developers and designers alike can create SVG elements in commercial applications like Adobe Illustrator In order to start any of these demos youll want to do*nload two.js and add it to your docu*ent. Once do*nloaded add this tag to the Before we get into all the fancy animating its 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. For a list of all properties and construction parameters check out the docu*entation. Adding shapes to groups makes managing multiple shapes easier and more sane. Groups provide an easy way to move your content through translation, 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 Groups styling operations trickle down and apply to each shape. All rendered objects in two.js are a child of a group. Every two instance has a property scene. This property is a root-level Two.Group and can act as a camera through the same transformations described above.