
Two.js - jgv
http://jonobr1.github.io/two.js
======
kevincennis
Was pretty confused at first about why this would have a Backbone dependency
until I looked through the source and saw they they're just pulling
Backbone.Events.

I think it says a lot about Backbone that people are doing things like that.
Modularity is nice.

Oh, and thumbs up for Two.js. Well done.

~~~
jonobr1
The decision for Backbone events vs other events is based on this performance
review: <http://jsperf.com/events-vs-events2/25>

~~~
vec
That's not a big surprise. jQuery's events use native browser events behind
the scenes. Which is nice for dom-oriented plugins; you get bubbling for free
and all the native event listeners just work. It's got a pretty fair amount of
overhead though. Backbone's events are just a pure JS event emitter
implementation.

I'm curious, though, why they added an external dependency instead of just
inlining a solution. There's a couple of good MIT licenced barebones
implementations[1][2] floating around, and it's pretty straightforward to
reimplement yourself in an hour or two if you prefer.

[1] <https://github.com/Wolfy87/EventEmitter> [2]
<https://github.com/hij1nx/EventEmitter2>

~~~
jonobr1
I was not aware of these other event systems in JavaScript. Thanks for
pointing these out!

~~~
imjared
Just to add to the list: <https://github.com/necolas/emitter.js>

:)

~~~
ajacksified
Or <http://github.com/ajacksified/Mediator.js> :D

~~~
ianstormtaylor
or <https://github.com/component/emitter> if you wanted to get real modular
and release the library as smaller Components.

------
michaelmartin
The script looks looks great, but mostly I just want to say it rocks to see a
library with this much work put into quality documentation already.

Gives me a heck of a lot more trust for the script and reason to try it out.

------
monkey_slap
This landing page and documentation is just beautiful. Simple hashtag nav,
soft colors, great header, and good examples. Only suggestion would be to have
a way to link to individual methods in the docs w/ hashes. I really commend
the effort here.

~~~
jonobr1
duly noted, thanks!

------
metabrew
Also worth a look: <https://github.com/GoodBoyDigital/pixi.js> 2D renderer
with canvas and webgl backends

~~~
nacs
I've been monitoring the development of pixi.js mostly because it uses WebGl
but automatically fails-over to canvas if Webgl support isn't available.

I was even contemplating using pixi for some experimental web-animation things
(non-game related) since I didn't find any other webgl-with-canvas failover
drawing APIs.

Good to see two.js filling this gap!

------
surrealize
I don't get it. Retained-mode vector graphics == SVG. Browsers with canvas or
webgl also have SVG. So what does this accomplish?

I don't mean to sound negative, I'm just not clear on the point.

~~~
jonobr1
I find this to be a very relevant article on render times between various
contexts: <http://smus.com/canvas-vs-svg-performance/>

Along these lines I've written projects in canvas only to realize later I
should've written in SVG. One of the aims of two.js is to afford a canonical
API for the developer. So the idea is that if you're rendering lots of
particles and not doing any manipulation to individual particles, canvas or
webgl will render faster than svg. Two.js aims to make it easier to test and
switch around between the contexts. However, I should caveat all of this with
two.js is _very_ nascent...

~~~
legutierr
Have you considered adding VML support, the way that Raphael has, for IE 6
through 8 support?

------
Kristories
Credit: <http://threejs.org>

~~~
jonobr1
yup ^^

------
niggler
How does this compare to raphael (<http://raphaeljs.com/>) ?

~~~
jonobr1
From my understanding Raphael is specific to the SVG context. Two.js is
renderer agnostic, you can choose whether it draws in SVG, canvas, or webgl.
This is one of many differences between the two.

~~~
micheljansen
On the contrary, Raphael is an abstraction on top of SVG and VML (Microsoft's
vector format). It's quite useful when you have to support IE.

~~~
coldtea
> _Raphael is an abstraction on top of SVG and VML_

Still specific to vector graphics rendering.

So not "on the contrary", but "to be exact".

~~~
swah
"Well, actually..."

------
smrtinsert
This is a tough space to be in these days, so many competing projects. That
said, I really wish I saw more projects using <http://kineticjs.com/>. (sorry
op). I just feel that kinetic is put together well and has an awesome tutorial
series at
[http://www.html5canvastutorials.com/kineticjs/html5-canvas-e...](http://www.html5canvastutorials.com/kineticjs/html5-canvas-
events-tutorials-introduction-with-kineticjs/)

~~~
de_dave
Unfortunately Kinetic is (and probably always will be) canvas-based, which is
already a limiting factor. Which is unfortunate as it's API is really rather
nice and I wish I could combine it with WebGL!

------
erbbysam
Kind of random, but this looks very similar to Ming (php plugin) which renders
flash in a very similar manner. I open-sourced a library for rendering
animations using it just a few days ago (although the project itself it 6
years old) - <https://github.com/erbbysam/ming-icanimate>

Thanks for this, I'm probably going to spend some time recreating that ming-
icanimate rendering system with two.js

------
muyyatin
Very nice! I'm also working on a similar scene graph (Canvas/SVG, WebGL soon),
which also has bounds, DAG-support, and implicitly inserts the needed layers
for performance (<http://phetsims.github.io/scenery/>).

I look forward to seeing what other performance optimizations I may be
missing!

------
rhengles
I started a project in SVG a few months ago, and searched for a library to
use. Dojo's GFX is a great library, with comprehensive support of the native
features (Text, etc).

That said, I'm planning on switching to good-old DOM, the performance of SVG
was underwhelming to me. Also, the lack of text-wrap.

------
nthitz
I'd be curious to see the performance differences between this drawing on 2d
canvas, webgl and similar code in plain JS. Mostly curious at that webgl
benchmark

~~~
jonobr1
I'd love to see some benchmarks if you make any.

From my gut, I'd say that the WebGL renderer is fast at rendering lots of
shapes with only translation / rotation transformations applied to them. SVG
is highly optimized on Webkit and handles shape morphing _really_ well and so
the SVG renderer handles that really well. Canvas sits somewhere in between
the two.

This is a test of a lot of shapes morphing. It visualizes SoundCloud songs:
[http://jonobr1.github.io/Neuronal-
Synchrony/?url=https://sou...](http://jonobr1.github.io/Neuronal-
Synchrony/?url=https://soundcloud.com/skrillex/skrillex-the-
reason&comments=true)

It may take awhile to load...

------
dweinus
I love the idea and it's a beautiful site...which quickly brings my browser
(chrome) to a grinding halt.

Hopefully I'm just an edge case while the project is young?

~~~
jonobr1
What OS are you running on?

------
joelhooks
This is rad. Thank you. It is being added to our home education curriculum. I
think the kids will get a lot out of it "turtle graphics" style.

~~~
jonobr1
I'd love to see how they use it! Please don't hesitate to share any findings
you have through github issues:
<https://github.com/jonobr1/two.js/issues?state=open>

It's the fastest way to notify me without giving out my email on this thread.

------
stevewilhelm
Does anyone else feel the animations are too fast and jagged?

Running in Chrome 26.0.1410.65 on a Macbook Pro running OS X 10.8.3

~~~
jonobr1
This sounds similar: <https://github.com/jonobr1/two.js/issues/4>

------
dutchbrit
This is very cool - thumbs up for the simplicity, implementation wise! Will
give this a spin.

------
jarmitage
Could someone with the knowledge explain significant differences between this
and Paper.js?

~~~
jonobr1
Taken from Paper.js' site: An open source vector graphics scripting framework
that runs on top of the HTML5 Canvas.

Taken from Two.js' site: Two.js is renderer agnostic enabling the same api to
draw in multiple contexts: svg, canvas, and webgl.

There are many differences in addition to this, but this starts to give you an
idea.

~~~
jarmitage
Thanks, looks like I'll be switching to Two.js then.

------
jlturner
Lib looks awesome Jono! The animated strokes example is fresh :)

------
skion
Awesome, I can see the reincarnation of animated banner ads...

------
kgosser
Was forcast.io's animations an inspiration for this?

Very impressed. Great job!

~~~
jonobr1
Not familiar with forcast.io — thanks for sharing! Before I got into web
development I worked at a company called Prologue doing motion graphics in
After Effects and Photoshop. Even if you've never heard of them, you've
probably seen their work: <http://prologue.com/>

This background is much of the motivation for the library.

~~~
kgosser
Ah cool. Yeah, I instantly thought of use cases like Forecast.io's weather
animations for your library. I think this is a _major_ trend about to explode,
and approaching it with a JS library instead of animated GIFs seems like it
has big potential.

Check out www.forecast.io to see the UI polish I'm talking about.

~~~
jonobr1
I totally agree, I hope developers and designers start making more animated
logos in html5. The UI polish is really nice!

------
Zolomon
This looks awesome for game development and creative coding!

~~~
jonobr1
Be careful — two.js is only for drawing things to the browser. It doesn't do
much else. There are many game libraries/fraemworks available, both 3d and 2d.

~~~
Zolomon
That doesn't make it any less useful at all? I am very fond of abstractions
and modularity. Two.js is a nice rendering component. You can easily add an
input component on beside of it if need be.

~~~
jonobr1
Indeed! I just wanted to be clear and not over promise anything. If you're
interested in make input components that talk with Two.js I recommend taking a
peak at /src/shape.js and /src/vector.js this is where the bindings are
created. I believe that this form of binding allows for a lot of creativity
when it comes to visualizing positions.

~~~
Zolomon
Looks wonderful, great job!

------
brickcap
looks great but how is it different from d3?

~~~
ricardobeat
d3 is tightly modeled after data visualization, is SVG-only (though you can do
your own drawing if you want to) and doesn't have a scene graph.

