
Two.js - bikeshack
https://jonobr1.github.io/two.js/
======
Argentum01
Played around with this awhile back and I really like it. Great for quick art
projects and the like:
[http://westleyargentum.github.io/monsters/](http://westleyargentum.github.io/monsters/)

~~~
jonobr1
Awesome monsters!

~~~
Argentum01
Thanks :)

------
rjusher
What I am struggling with, is the use case of a library like this.

Is this oriented towards gaming or substitude something like d3.js or is it
has a simplier api, for the developer than other libraries. Or is it a library
to showcase the cool stuff that can be done with new technologies.

I think the main difference and the selling point is that it is "renderer
agnostic" but I don't understand the benefits of that.

~~~
SomeCallMeTim
Renderer-agnostic is nice, actually, when you need to support lots of
different browsers.

Some mobile browsers can't do WebGL as fast as they do Canvas, for instance.
Other browsers will have a huge speed advantage with WebGL.

I'm not sure if any are faster with SVG, or the relative performance between
SVG and canvas. But being able to do some test renders quickly in all three
modes should allow you to select the fastest for a particular browser.

Game developers are better off with a game-oriented library, IMO. Even if you
used something like Two.JS to do your rendering, there are a lot of things
still useful in a game library to justify using it -- and most games will need
more than geometric figures.

~~~
zmmmmm
I love SVG support because it means you can render something in vector art in
the browser which is also downloadable as a file by the user. Drawing stuff in
the browser which is then stuck there is cute but lacks an important layer of
interoperability with the rest of the computing ecosystem. So here we appear
to get the best of all worlds: render to whatever is fastest in the browser
but get automatic "export as SVG" for free.

~~~
hansolo669
You can save out a <canvas> to png quite easily: canvas.toDataURL();

~~~
zmmmmm
Oh, yes, but it's not a vector format, which means you can't make high quality
vector drawings that the user can export with it.

------
tlrobinson
Interestingly WebGL is way slower than SVG and Canvas in this case (Chrome,
rMBP): [https://jonobr1.github.io/two.js/examples/particle-
sandbox.h...](https://jonobr1.github.io/two.js/examples/particle-
sandbox.html?type=webgl&shapes=triangle,square,circle,pentagon,star&operations=translation,rotation,scale&count=200)

~~~
jonobr1
Yes! This is because when a shape is first created the WebGL Renderer draws
the shape as a texture in Canvas2d and then uploads that texture to GL. The
operations "Vertices" and "Scale" force each shape to be redrawn so there are
_a lot_ of textures being uploaded and deleted every frame this scenario. If
you keep things to translation / rotation you can make the WebGL renderer push
wayyyy more shapes than the other 2 renderers.

I'm currently developing a way to "cache" textures that don't change much so
if you had a Two.Group that doesn't change much you can turn that into 1
texture. This will greatly increase performance as well. Thanks for checking
it out!

#themoreyouknow

~~~
zlnimda
Why don't you draw directly your vertices in gl instead of create a tex ? And
you could use optimisation of culling to be faster. (drawing object : front to
back)

~~~
jonobr1
Because the eng team that implements WebGL on Chrome recommended this way. I
have an implementation as you're describing as the first tag of Two.js. It
actually was a 2D drawing API for Three.js initially..!

------
victorhooi
Basic question - but when would you use this over d3.js?

------
dexwiz
I notice that this can render ThreeJS objects. Any reason to construct and
object with ThreeJS and render it with Two?

~~~
jonobr1
No no, you can create shapes and render / extrude them in Three.js. The puzzle
piece in this example is a 2D path made in Two.js and then extruded in
Three.js: [https://jonobr1.github.io/two.js/examples/three-
extrusion.ht...](https://jonobr1.github.io/two.js/examples/three-
extrusion.html)

------
smrtinsert
I don't see anyway of working with textures at this point, am I wrong? Part of
what I find interesting of working with Paper.js is the ability to render to a
texture, and keep piling on stuff if necessary. I haven't tried the
performance that would bring, but from what I understand it could be great.

~~~
jonobr1
Textures are in the works... Wanted to focus on drawing vector stuff first. As
you noted there are many libraries that handle textures really well!

------
stared
As someone using D3.js a lot (even for a puzzle game) - what is the benefit of
using Two.js? Jumping between SVG and Canvas? (But then, is it worth the price
of reducing possibilities to circles and squares?)

~~~
jonobr1
You can do quite a bit with "circles and squares". Two.js focuses on Path
drawing and has robust SVG interpretation for complex vector shapes.

I've found the portability to be fantastic. For instance
[http://patatap.com](http://patatap.com) runs svg on iOS and canvas on
Android. Two.js makes it simple to run either on the fly.

------
mintwurm
Is that project still alive ? Last two commits are from march this year and
then there's nothing all the way back to july '14

~~~
edgarvaldes
Maybe the autor thinks it is complete.

EDIT: Oh wait, is the author in this thread? He can answer that.

~~~
jonobr1
It is! I work on the dev branch and other branches when I'm making new
changes. EDIT: I mostly _use_ the library though (I use it everyday) rather
than constantly develop new features.

~~~
mintwurm
Oh and the commit from last Wednesday was three lines long

~~~
ramblerman
please stop trolling. I know you think you're on to something but you're
really not.

~~~
mintwurm
How can someone who voices genuine concerns be a troll ? I was actually
interested in this framework. Right now I'm torn between pixi.js and easel.js
, this seemed like a viable alternative.

But before I start to invest time in a technology, I want to know if it's
still alive.

This project is definitely not finished (text rendering), far from polished
(slow webgl implementation, see this thread) and has not been improved in half
a year.

Take a look at this:
[https://github.com/jonobr1/two.js/graphs/contributors](https://github.com/jonobr1/two.js/graphs/contributors)

The whole thing was a one-man stunt and is obviously dead.

Oh, and saying "I work on the dev branch" when the dev branch is just as
abandoned as the rest of the code is a blatant lie.
[https://github.com/jonobr1/two.js/commits/dev](https://github.com/jonobr1/two.js/commits/dev)

Sorry, but stuff like this just makes me angry. The javascript world is full
of throwaway projects that die after a few months/years. At the same time
there are true gems with really elegant code. Easel, Pixi, SnapSvg, they are
amazing. Advertisement for a project like this is unfair and spreads
confusion.

If you need help, if you look for contributors, just say so. But don't pretend
that your code is alive when it's actually cold legacy code.

~~~
Gigablah
Self-entitled much? If the library doesn't suit your needs, just move on.
There's no need to throw a tantrum about how a framework isn't tailored to
your exact specifications, and how people aren't working hard enough so you
can "invest" your oh-so-precious time in their unpaid effort.

------
arocks
Is it possible to use this for creating videos with motion graphics? Even the
possibility of a frame by frame render would be awesome.

~~~
jonobr1
Yes, I often screen capture my work or use a Chrome Extension called Render
Target to save my frames out for static use. My dribble account is mostly
Two.js output:
[https://dribbble.com/shots/2058034-9-Squares-r6?list=users&o...](https://dribbble.com/shots/2058034-9-Squares-r6?list=users&offset=1?list=users)

The project Anitype dynamically creates and stores gifs of Two.js scenes:
[http://anitype.com/entries](http://anitype.com/entries)

------
kodablah
An alternative library that is Canvas only but works well with input is
ZRender[0]. Sadly the docs have not been translated to English (lingua franca
of open source libs or software in general?) and I think that affects
adoption.

0 - [https://ecomfe.github.io/zrender/](https://ecomfe.github.io/zrender/)

------
jarek-foksa
Why Vector.isZero() is checking whether a vector length is smaller than
0.0001? Why this arbitrary number and not e.g. 0.00000001?

~~~
matchu
Dunno about this case, but probably because floating point arithmetic is a
bitch. Try the following in Chrome's developer console:

    
    
        (0.3 - 0.1 - 0.1 - 0.1) === 0.0
        > false
        0.3 - 0.1 - 0.1 - 0.1
        > -2.7755575615628914e-17
    

In order to get helpful results, we're gonna have to pick _some_ semi-
arbitrary epsilon. Still, my problem domain might require a different epsilon
than they expect; even if they have a default, the API should allow me to
specify my own choice of epsilon.

They might also want to consider being more nuanced for the equals method than
just taking the difference and comparing to zero. See [http://floating-point-
gui.de/errors/comparison/](http://floating-point-gui.de/errors/comparison/)

~~~
jonobr1
You're not the only one! The dev Branch has this fixed so you can pass your
own epsilon.

~~~
matchu
Hooray! Thanks for pointing it out :)

------
amelius
I'm looking for a library that can create a calligraphic shape (path) from a
stroke path.

~~~
jacobolus
You can do this pretty easily with SVG, assuming your browser supports SVG,
and your “caligraphic stroke” means you want the envelope of an ellipse
translated along the path.

Or do you need the precise bezier-curves for the stroke outline? For that you
need to do some computation.

~~~
amelius
Yes, I want the second, because I want to use the outline in further
computations.

It would be interesting to know how to compute the calligraphic stroke outline
in terms of bezier curves from a given bezier curve.

~~~
bburky
I have this bookmarked for some reason, it may help:
[http://stackoverflow.com/questions/3205819/bezier-path-
widen...](http://stackoverflow.com/questions/3205819/bezier-path-
widening/3220819)

Half the links are dead now. This is the openjdk Stroker.java code:
[http://grepcode.com/file/repository.grepcode.com/java/root/j...](http://grepcode.com/file/repository.grepcode.com/java/root/jdk/openjdk/7-b147/sun/java2d/pisces/Stroker.java)

~~~
amelius
Thanks!

------
drumttocs8
How would this compare to Famo.us?

------
chejazi
Considering turning my text-logo into one of these!

------
humbleMouse
That's pretty sweet.

------
gondo
what is meant by "modern web browsers"?

~~~
m3Lith
I guess it would be something along the lines of this quote from
[http://farukat.es/journal/2011/02/528-modern-
browser](http://farukat.es/journal/2011/02/528-modern-browser): "A modern
browser is any browser that: successfully renders a site that you just built
using web standards, testing only in your browser of choice along the way,
with all the essentials functioning well; without you having written any
browser-specific hacks, forks or workarounds; and shows great performance as
you navigate it."

~~~
yellowapple
In other words, "modern browsers" might as well be mythical creatures :)

------
gprasanth
How this is different from fabricjs or snapsvg?

~~~
Fiahil
It seems to me, that people in the Javascript world, like to constantly create
new alternatives (or very similar) to existing frameworks or projects.

It's not 100% a bad thing though.

~~~
thebouv
Evolution. Competition. Definitely a good thing.

Though admittedly the pace at which this happens in the JS world can be
exhausting.

~~~
agumonkey
brownian.js

------
billkozby083
I'm testing something...thanks

------
vegabook
Awesome...but. No text? That suddenly wipes out my use case (data viz). I was
super encouraged reading this post, multiple renderers including canvas /
webgl (so I assume speed - unlike D3), smart, clean, indeed creative looking
logo/site...suggests the author has taste...but no text kills this for me. I
see no obvious use case for animated 2d that does not do textures (personally
happy to do without) but also does not do text.

~~~
jonobr1
Unfortunately, this is a library authored and maintain by one person, me. I'd
love to get to text at some point, but until then you'll have to stick with
DOM. Also, depending on your renderer you have full access to SVG, Canvas, and
WebGL so you can write text with those APIs...

Some projects that use _just_ animated 2D:

\+ [http://patatap.com/](http://patatap.com/) \+
[http://anitype.com/](http://anitype.com/) \+
[http://tether.plaid.co.uk/](http://tether.plaid.co.uk/) (broken, sorry!) \+
[http://vr.chromeexperiments.com](http://vr.chromeexperiments.com)

Interface stuff:

\+ [http://justareflektor.com/tech](http://justareflektor.com/tech) \+
[https://dl.dropboxusercontent.com/u/1595444/experiments/anim...](https://dl.dropboxusercontent.com/u/1595444/experiments/animography/moshun/index.html)

These projects have had multi-million uniques throughout their existence. 3
other large scale projects coming out later this year that use Two.js..! And
these are projects just made by me :P

------
dreamfactory2
what are the major differences between this and paper.js?

