6 ms·

Bonsai.js: A New Graphics and Animation Library

233 points by dhotson 14y ago

huhtenberg 14y ago
Got latest (production) FF here, and Music and Pong examples don't work. Music shows Play button, which I click, it turns into Pause and then nothing happens. Pong shows yellow/orange rectangle with what seems like a button, with its top edge striking through a (misplaced?) "Go" text. Nothing is clickable, left/right arrows have no effect. (edit) I see it needs FF18, which I gather is a dev release. Perhaps you want to add compatible browser detection code? And complain accordingly.
- AndrewHampton 14y ago
  FF 16.0.2 here and the Pong example worked for me. I had the same behavior as you for the music example though.
- missing_cipher 14y ago
  Same on Chrome 23.0.1271.52 beta-m, in fact the music example crashed the tab the first time. The Rainbow example doesn't animate either.
danso 14y ago
FWIW, works beautifully on the ipad
hayksaakian 14y ago
Works way better than I expected on chrome 18 on android (nexus 7) solid 16 fps on the blobs demo. I wonder if you could take advantage of hardware better.
dccoolgai 14y ago
At first blush, the "animate" api call seems to work a lot more inuitively than d3 or raphael...might have to give this one a look.
Torn 14y ago
How does this compare to D3.js?
- Xurinos 14y ago
  From someone who likes to look at these kinds of libraries... D3.js vs animation/graphics libraries: D3.js targets processes over arrays of data, perfect for designing views of data; these other libraries (like raphael.js, jquery.svg, etc) target transformations and tweening, perfect for objects in motion.
- duopixel 14y ago
  This compares better to Raphael. D3 is a library to present data visually, and Bonsai is a drawing library. You can draw with D3 and you can produce data visualizations with Bonsai, but they each shine in their own area. Creating a simple bar chart with Bonsai wouldn't be easy, the same thing goes for drawing a star in D3.
nlh 14y ago
I have what may be a silly (or just uninformed) question: This, d3, etc. all look extremely cool and like great ways to do procedural graphics creation / animation. Has there emerged yet a Flash Builder-like tool for Canvas-based web graphics yet? I feel like there's a fundamental limit to how widespread procedural graphics production will be since many designers/animators/game developers a just don't work that way -- they need visual tools. Or so I assume.
- jonknee 14y ago
  Adobe is moving somewhat that direction with an experimental product called Edge Animate (though oddly it does not use canvas): http://html.adobe.com/edge/animate/ http://html.adobe.com/edge/animate/ They also are working to allow you to export Flash to Canvas through what they call Flash Professional Toolkit for CreateJS. http://www.adobe.com/devnet/createjs.html http://www.adobe.com/devnet/createjs.html
  - camus 14y ago
    Animate doesnt work on older browsers and produce slow and dreadfull code. Animate is everything flash is hated for without the power of actionscript. CreateJs is a better solution, but you still need canvas ( you can still polyfill with flash canvas for older browsers )
- deleted 14y ago
  [deleted]
- jsvaughan 14y ago
  Not quite what you mean, but they do have a code visualiser: http://orbit.bonsaijs.org/ http://orbit.bonsaijs.org/
  - eric_bullington 14y ago
    He/she is wanting a GUI tool for creating HTML5/JavaScript graphics and animations. I think his best bet right now is following Adobe's efforts with Edge, as someone else mentioned.
seivan 14y ago
Wow the API reminds me of the Sparrow framework on OBJ-C. Perfect for games, does the performance allow for 2d games?
duopixel 14y ago
This is very cool. I've been wanting an alternative for Raphael in projects that don't require old IE support because of some compromises Raphael does in order to support VML. I am a bit worried that I can't find a way of changing multiple elements at once, in d3 for example I'd do... d3.selectAll("rect").attr("fill", "red"); In Raphael I'd do... var set = paper.set(//insert rects here); set.attr({"fill": "red}); But in Bonsai I'd do... var set = [//insert rects here]; set.forEach(function(el){ el.fill("red"); }) So it doesn't abstract the iteration for you.
- Skywing 14y ago
  Personally, I never did like things abstracting the iteration for me. In Javascript, I tend to favor explicit loops over huge chains of method calls, or visually confusing abstracting like the Raphael example. Just looking at that Raphael example, I'd have to actually think about the code to understand what it does right off the bat (shocker, I know, but I think you get my point). I actually think that the Bonsai example there is the most straight forward and flexible. Of course, this is all just opinion.
  - duopixel 14y ago
    When working with DOM elements (SVG elements are also part of the DOM) it get messy pretty quickly. Think of it as syntactic sugar, because you can always opt for using standard arrays instead of using Raphael sets... var rects = [//insert rects here] rects.forEach(function(rect){ rect.attr({fill: "red"}); })
    - deleted 14y ago
      [deleted]
johntaiwan 14y ago
Doesn't work on android phone
- shuzchen 14y ago
  You should be more specific about which phone (at least, which version of Android its running) as well as which browser you're using. Works fine in chrome with the two tablets I have about (galaxy tab 2 7" and the nexus 7)
rorrr 14y ago
How is it better than Raphaël? http://raphaeljs.com/ http://raphaeljs.com/
premasagar 14y ago
This is beautiful work. By way of comparison, I've recently created Pablo, a very lightweight and expressive JavaScript library for creating and manipulating SVG: http://pablojs.com http://pablojs.com Pablo aims to be a thin layer over SVG, is inspired by the APIs for Raphael, jQuery and Underscore, but is only 3KB.
tripzilch 14y ago
I really expected that the demos would properly work in the browsers that Bonsai is advertised to be compatible with. (I tried "Blob" and "Pong", both don't work in Opera 12.10) Of course I understand that a framework supporting certain browsers doesn't mean that any other program (demo) will work automatically, but for the purposes of demonstration, you probably should make sure that they do. After all, browser support is just as much a feature that should be demo-ed as pretty graphics are. (And I really don't understand, what is this thing people do in their JS code that Opera chokes on? I write JS code all the time and it generally works on Opera/Firefox/Chrome with no tweaks. The very rare inconsistency is usually when one browser is more lenient than the other wrt ECMAscript, so even when it "works in Firefox", it was code that could use cleaning)

233 points by dhotson 14y ago

Got latest (production) FF here, and Music and Pong examples don't work. Music shows Play button, which I click, it turns into Pause and then nothing happens. Pong shows yellow/orange rectangle with what seems like a button, with its top edge striking through a (misplaced?) "Go" text. Nothing is clickable, left/right arrows have no effect. (edit) I see it needs FF18, which I gather is a dev release. Perhaps you want to add compatible browser detection code? And complain accordingly.

AndrewHampton 14y ago
FF 16.0.2 here and the Pong example worked for me. I had the same behavior as you for the music example though.
missing_cipher 14y ago
Same on Chrome 23.0.1271.52 beta-m, in fact the music example crashed the tab the first time. The Rainbow example doesn't animate either.

danso 14y ago

FWIW, works beautifully on the ipad

hayksaakian 14y ago

Works way better than I expected on chrome 18 on android (nexus 7) solid 16 fps on the blobs demo. I wonder if you could take advantage of hardware better.

dccoolgai 14y ago

At first blush, the "animate" api call seems to work a lot more inuitively than d3 or raphael...might have to give this one a look.

Torn 14y ago

How does this compare to D3.js?

Xurinos 14y ago
From someone who likes to look at these kinds of libraries... D3.js vs animation/graphics libraries: D3.js targets processes over arrays of data, perfect for designing views of data; these other libraries (like raphael.js, jquery.svg, etc) target transformations and tweening, perfect for objects in motion.
duopixel 14y ago
This compares better to Raphael. D3 is a library to present data visually, and Bonsai is a drawing library. You can draw with D3 and you can produce data visualizations with Bonsai, but they each shine in their own area. Creating a simple bar chart with Bonsai wouldn't be easy, the same thing goes for drawing a star in D3.

nlh 14y ago

I have what may be a silly (or just uninformed) question: This, d3, etc. all look extremely cool and like great ways to do procedural graphics creation / animation. Has there emerged yet a Flash Builder-like tool for Canvas-based web graphics yet? I feel like there's a fundamental limit to how widespread procedural graphics production will be since many designers/animators/game developers a just don't work that way -- they need visual tools. Or so I assume.

jonknee 14y ago
Adobe is moving somewhat that direction with an experimental product called Edge Animate (though oddly it does not use canvas): http://html.adobe.com/edge/animate/ http://html.adobe.com/edge/animate/ They also are working to allow you to export Flash to Canvas through what they call Flash Professional Toolkit for CreateJS. http://www.adobe.com/devnet/createjs.html http://www.adobe.com/devnet/createjs.html
- camus 14y ago
  Animate doesnt work on older browsers and produce slow and dreadfull code. Animate is everything flash is hated for without the power of actionscript. CreateJs is a better solution, but you still need canvas ( you can still polyfill with flash canvas for older browsers )
deleted 14y ago
[deleted]
jsvaughan 14y ago
Not quite what you mean, but they do have a code visualiser: http://orbit.bonsaijs.org/ http://orbit.bonsaijs.org/
- eric_bullington 14y ago
  He/she is wanting a GUI tool for creating HTML5/JavaScript graphics and animations. I think his best bet right now is following Adobe's efforts with Edge, as someone else mentioned.

seivan 14y ago

Wow the API reminds me of the Sparrow framework on OBJ-C. Perfect for games, does the performance allow for 2d games?

duopixel 14y ago

This is very cool. I've been wanting an alternative for Raphael in projects that don't require old IE support because of some compromises Raphael does in order to support VML. I am a bit worried that I can't find a way of changing multiple elements at once, in d3 for example I'd do... d3.selectAll("rect").attr("fill", "red"); In Raphael I'd do... var set = paper.set(//insert rects here); set.attr({"fill": "red}); But in Bonsai I'd do... var set = [//insert rects here]; set.forEach(function(el){ el.fill("red"); }) So it doesn't abstract the iteration for you.

Skywing 14y ago
Personally, I never did like things abstracting the iteration for me. In Javascript, I tend to favor explicit loops over huge chains of method calls, or visually confusing abstracting like the Raphael example. Just looking at that Raphael example, I'd have to actually think about the code to understand what it does right off the bat (shocker, I know, but I think you get my point). I actually think that the Bonsai example there is the most straight forward and flexible. Of course, this is all just opinion.
- duopixel 14y ago
  When working with DOM elements (SVG elements are also part of the DOM) it get messy pretty quickly. Think of it as syntactic sugar, because you can always opt for using standard arrays instead of using Raphael sets... var rects = [//insert rects here] rects.forEach(function(rect){ rect.attr({fill: "red"}); })
  - deleted 14y ago
    [deleted]

johntaiwan 14y ago

Doesn't work on android phone

shuzchen 14y ago
You should be more specific about which phone (at least, which version of Android its running) as well as which browser you're using. Works fine in chrome with the two tablets I have about (galaxy tab 2 7" and the nexus 7)

rorrr 14y ago

How is it better than Raphaël? http://raphaeljs.com/ http://raphaeljs.com/

premasagar 14y ago

This is beautiful work. By way of comparison, I've recently created Pablo, a very lightweight and expressive JavaScript library for creating and manipulating SVG: http://pablojs.com http://pablojs.com Pablo aims to be a thin layer over SVG, is inspired by the APIs for Raphael, jQuery and Underscore, but is only 3KB.

tripzilch 14y ago

I really expected that the demos would properly work in the browsers that Bonsai is advertised to be compatible with. (I tried "Blob" and "Pong", both don't work in Opera 12.10) Of course I understand that a framework supporting certain browsers doesn't mean that any other program (demo) will work automatically, but for the purposes of demonstration, you probably should make sure that they do. After all, browser support is just as much a feature that should be demo-ed as pretty graphics are. (And I really don't understand, what is this thing people do in their JS code that Opera chokes on? I write JS code all the time and it generally works on Opera/Firefox/Chrome with no tweaks. The very rare inconsistency is usually when one browser is more lenient than the other wrt ECMAscript, so even when it "works in Firefox", it was code that could use cleaning)