Two.js | Hacker News Reader

Two.js

jonobr1.github.io

488 pointsjgv62 comments

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.

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

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

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

Just to add to the list: https://github.com/necolas/emitter.js

Or http://github.com/ajacksified/Mediator.js :D

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

You also have Backbone events extracted from Backbone on https://github.com/bermi/eventify

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.

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.

duly noted, thanks!

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

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!

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.

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...

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

Credit: http://threejs.org

yup ^^

How does this compare to raphael (http://raphaeljs.com/) ?

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.

Raphael is SVG or VML (for IE <9)

Thanks for the clarification!

Rapahel does SVG but most importantly it also renders VML when SVG is not supported by the browser, as a result it supports IE6+ unlike two. (don't get me wrong I still think two is great)

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.

>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".

"Well, actually..."

I did a whole diagram editor in Raphael. In the end we had the client installing ChromeFrame because there are still some different behaviors in IE.

Raphael has no support to work with groups of elements.

Raphael supports sets of elements:

http://raphaeljs.com/reference.html#Paper.set

Not the same - e.g. rotating a set of elements causes each individual element to rotate around their individual centers, rather than causing the group to rotate around a central pivot.

Pseudo-Grouping can be made in Raphael. However each elements gets transformed one by one. At 100+ elements, things get very laggy.

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...

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!

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

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!

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.

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

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...

It may take awhile to load...

I'd also be curious to see how it performs with mass amounts of sprites, something like pixi's bunny demo:

http://www.goodboydigital.com/pixijs/bunnymark/

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?

What OS are you running on?

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.

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.

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

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

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

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

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.

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

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

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

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

Very impressed. Great job!

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.

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.

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

This looks awesome for game development and creative coding!

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.

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.

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.

Looks wonderful, great job!

looks great but how is it different from d3?

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.

Reply on news.ycombinator.com