Ok, finally have something to show! But first, some eye candy… 500 transitionables at 60fps :>
You can try it out at
https://dl.dropboxusercontent.com/u/2790629/famin/demo1/index.html#500
Just change the #500 at the end to however many nodes you want and reload the page. I admit the 500 is only on my desktop without much else happening 
It looks a bit overwhelming at first but if you focus your attention on a single node, you can get a sense for transition smoothness.
The basic “user” code is as follows, as you can see, kinda famousy:
var randomPosition = function() {
return Vec3(
Math.random() * (width - 50),
Math.random() * (height - 50),
(Math.random() * 1000) - 500
);
};
var num = location.hash && location.hash.substr(1) || 100;
window.n = Array(num);
for (var i=0; i < num; i++) (function(i) {
var node = window.n[i] = new Node.instance();
node.addComponents(DOMElement, Position);
node.position.set(randomPosition());
node.size.setAbsolute(50,50,0);
node.dOMElement.setClassName('mary');
node.dOMElement.setProperty('background',
'hsla(' + (360/num*i) + ', 100%, 50%, 0.8)');
var toRandomPosition = function() {
node.position.set(
randomPosition(),
{ curve: 'inOutElastic', duration: 500 + Math.random() * 1500 },
toRandomPosition
);
};
window.setTimeout(toRandomPosition, Math.random() * 1000);
So what’s done so far:
- Good start for garbage collection, pooling, etc.
- Early node structure, draft components
- DOM Renderer (all via a message queue, but no workers yet)
- Famous’ Transitionable.js, not optimized yet!
Must stress that this is still very early code. From here I want to work a lot more on optimizations, fix some API stuff (implement a base Scene!), tests, etc. But it’s a decent start! I still wouldn’t really look at the source yet, there are some big improvements planned.
Commit used:
