Bonsai.js: A New Graphics and Animation Library
bonsaijs.org
bonsaijs.org
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.
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.
CreateJs is a better solution, but you still need canvas ( you can still polyfill with flash canvas for older browsers )
It's primarily focused on animation and video. Published animations use the Canvas tag instead of SVG. (I'm not a huge fan of SVG for this kind of rendering because it's such a sprawling committee-designed document format rather than a compact and expressive API.)
Radi is currently Mac-only. I had a Windows port underway at one point (to the point of actually getting the app running on Win7), but haven't had the time to work on it lately... Hopefully it'll be on Windows too one day.
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");
var set = paper.set(//insert rects here);
set.attr({"fill": "red});
var set = [//insert rects here];
set.forEach(function(el){
el.fill("red");
})
var rects = [//insert rects here]
rects.forEach(function(rect){
rect.attr({fill: "red"});
})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.
(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)
Pablo aims to be a thin layer over SVG, is inspired by the APIs for Raphael, jQuery and Underscore, but is only 3KB.
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.