
Bonsai.js: A New Graphics and Animation Library - dhotson
http://bonsaijs.org/
======
nlh
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
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/>

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>

~~~
camus
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 )

------
duopixel
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
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
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"});
        })

------
huhtenberg
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
FF 16.0.2 here and the Pong example worked for me. I had the same behavior as
you for the music example though.

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

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

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

Pablo aims to be a thin layer over SVG, is inspired by the APIs for Raphael,
jQuery and Underscore, but is only 3KB.

------
danso
FWIW, works beautifully on the ipad

------
Torn
How does this compare to D3.js?

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

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

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

------
johntaiwan
Doesn't work on android phone

~~~
shuzchen
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
How is it better than Raphaël?

<http://raphaeljs.com/>

