8 ms·

Two.js

488 points by jgv 13y ago

kevincennis 13y ago
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 13y ago
  The decision for Backbone events vs other events is based on this performance review: http://jsperf.com/events-vs-events2/25 http://jsperf.com/events-vs-events2/25
  - vec 13y ago
    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 https://github.com/Wolfy87/EventEmitter [2] https://github.com/hij1nx/EventEmitter2 https://github.com/hij1nx/EventEmitter2
    - jonobr1 13y ago
      I was not aware of these other event systems in JavaScript. Thanks for pointing these out!
      - imjared 13y ago
        Just to add to the list: https://github.com/necolas/emitter.js https://github.com/necolas/emitter.js :)
        ajacksified 13y ago
        Or http://github.com/ajacksified/Mediator.js http://github.com/ajacksified/Mediator.js :D
        ianstormtaylor 13y ago
        or https://github.com/component/emitter https://github.com/component/emitter if you wanted to get real modular and release the library as smaller Components.
      - bfm 13y ago
        You also have Backbone events extracted from Backbone on https://github.com/bermi/eventify https://github.com/bermi/eventify
niggler 13y ago
How does this compare to raphael (http://raphaeljs.com/ http://raphaeljs.com/) ?
- jonobr1 13y ago
  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.
  - AdamTReineke 13y ago
    Raphael is SVG or VML (for IE <9)
    - jonobr1 13y ago
      Thanks for the clarification!
  - tregoning 13y ago
    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)
  - micheljansen 13y ago
    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 13y ago
      >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 13y ago
dutchbrit 13y ago
This is very cool - thumbs up for the simplicity, implementation wise! Will give this a spin.
nthitz 13y ago
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 13y ago
  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://soundcloud.com/skrillex/skrillex-the-reason&comments=true http://jonobr1.github.io/Neuronal-Synchrony/?url=https://sou... It may take awhile to load...
- tolmark12 13y ago
  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/ http://www.goodboydigital.com/pixijs/bunnymark/
jlturner 13y ago
Lib looks awesome Jono! The animated strokes example is fresh :)
surrealize 13y ago
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 13y ago
  I find this to be a very relevant article on render times between various contexts: http://smus.com/canvas-vs-svg-performance/ 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 13y ago
    Have you considered adding VML support, the way that Raphael has, for IE 6 through 8 support?
metabrew 13y ago
Also worth a look: https://github.com/GoodBoyDigital/pixi.js https://github.com/GoodBoyDigital/pixi.js 2D renderer with canvas and webgl backends
- nacs 13y ago
  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!
monkey_slap 13y ago
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 13y ago
  duly noted, thanks!
locofacetwice 13y ago
So this is like those annoying 90s website-banners look nowadays. I just imagine how future people will look at things like this and cringe.
Kristories 13y ago
Credit: http://threejs.org http://threejs.org
- jonobr1 13y ago
  yup ^^
michaelmartin 13y ago
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.
dweinus 13y ago
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 13y ago
  What OS are you running on?
Zolomon 13y ago
This looks awesome for game development and creative coding!
- jonobr1 13y ago
  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 13y ago
    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 13y ago
      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 13y ago
        Looks wonderful, great job!
kgosser 13y ago
Was forcast.io's animations an inspiration for this? Very impressed. Great job!
- jonobr1 13y ago
  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/ http://prologue.com/ This background is much of the motivation for the library.
  - kgosser 13y ago
    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 13y ago
      I totally agree, I hope developers and designers start making more animated logos in html5. The UI polish is really nice!
rhengles 13y ago
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.
brickcap 13y ago
looks great but how is it different from d3?
- ricardobeat 13y ago
  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.
smrtinsert 13y ago
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/ 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-events-tutorials-introduction-with-kineticjs/ http://www.html5canvastutorials.com/kineticjs/html5-canvas-e...
- de_dave 13y ago
  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!
muyyatin 13y ago
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/ http://phetsims.github.io/scenery/). I look forward to seeing what other performance optimizations I may be missing!
stevewilhelm 13y ago
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 13y ago
  This sounds similar: https://github.com/jonobr1/two.js/issues/4 https://github.com/jonobr1/two.js/issues/4
erbbysam 13y ago
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 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
jarmitage 13y ago
Could someone with the knowledge explain significant differences between this and Paper.js?
- jonobr1 13y ago
  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 13y ago
    Thanks, looks like I'll be switching to Two.js then.
joelhooks 13y ago
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 13y ago
  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 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.
skion 13y ago
Awesome, I can see the reincarnation of animated banner ads...

488 points by jgv 13y ago

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 13y ago
The decision for Backbone events vs other events is based on this performance review: http://jsperf.com/events-vs-events2/25 http://jsperf.com/events-vs-events2/25
- vec 13y ago
  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 https://github.com/Wolfy87/EventEmitter [2] https://github.com/hij1nx/EventEmitter2 https://github.com/hij1nx/EventEmitter2
  - jonobr1 13y ago
    I was not aware of these other event systems in JavaScript. Thanks for pointing these out!
    - imjared 13y ago
      Just to add to the list: https://github.com/necolas/emitter.js https://github.com/necolas/emitter.js :)
      - ajacksified 13y ago
        Or http://github.com/ajacksified/Mediator.js http://github.com/ajacksified/Mediator.js :D
        ianstormtaylor 13y ago
        or https://github.com/component/emitter https://github.com/component/emitter if you wanted to get real modular and release the library as smaller Components.
    - bfm 13y ago
      You also have Backbone events extracted from Backbone on https://github.com/bermi/eventify https://github.com/bermi/eventify

niggler 13y ago

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

jonobr1 13y ago
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.
- AdamTReineke 13y ago
  Raphael is SVG or VML (for IE <9)
  - jonobr1 13y ago
    Thanks for the clarification!
- tregoning 13y ago
  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)
- micheljansen 13y ago
  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 13y ago
    >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 13y ago

dutchbrit 13y ago

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

nthitz 13y ago

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 13y ago
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://soundcloud.com/skrillex/skrillex-the-reason&comments=true http://jonobr1.github.io/Neuronal-Synchrony/?url=https://sou... It may take awhile to load...
tolmark12 13y ago
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/ http://www.goodboydigital.com/pixijs/bunnymark/

jlturner 13y ago

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

surrealize 13y ago

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 13y ago
I find this to be a very relevant article on render times between various contexts: http://smus.com/canvas-vs-svg-performance/ 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 13y ago
  Have you considered adding VML support, the way that Raphael has, for IE 6 through 8 support?

metabrew 13y ago

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

nacs 13y ago
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!

monkey_slap 13y ago

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 13y ago
duly noted, thanks!

locofacetwice 13y ago

So this is like those annoying 90s website-banners look nowadays. I just imagine how future people will look at things like this and cringe.

Kristories 13y ago

Credit: http://threejs.org http://threejs.org

jonobr1 13y ago
yup ^^

michaelmartin 13y ago

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.

dweinus 13y ago

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 13y ago
What OS are you running on?

Zolomon 13y ago

This looks awesome for game development and creative coding!

jonobr1 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      Looks wonderful, great job!

kgosser 13y ago

Was forcast.io's animations an inspiration for this? Very impressed. Great job!

jonobr1 13y ago
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/ http://prologue.com/ This background is much of the motivation for the library.
- kgosser 13y ago
  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 13y ago
    I totally agree, I hope developers and designers start making more animated logos in html5. The UI polish is really nice!

rhengles 13y ago

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.

brickcap 13y ago

looks great but how is it different from d3?

ricardobeat 13y ago
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.

smrtinsert 13y ago

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/ 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-events-tutorials-introduction-with-kineticjs/ http://www.html5canvastutorials.com/kineticjs/html5-canvas-e...

de_dave 13y ago
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!

muyyatin 13y ago

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/ http://phetsims.github.io/scenery/). I look forward to seeing what other performance optimizations I may be missing!

stevewilhelm 13y ago

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 13y ago
This sounds similar: https://github.com/jonobr1/two.js/issues/4 https://github.com/jonobr1/two.js/issues/4

erbbysam 13y ago

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

jarmitage 13y ago

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

jonobr1 13y ago
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 13y ago
  Thanks, looks like I'll be switching to Two.js then.

joelhooks 13y ago

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 13y ago
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 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.

skion 13y ago

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