Hi, I'm building a biosphere simulation with up to three hundred different creatures living animated in a HTML5 canvas element.
I've started from scratch and got a fast and smooth demo. It took 10 msec to calculate and < 10 msec to paint one frame (1.4GHZ) with ~150 creatures. So there was still room to stay above the 25 fps requirement. Later I realized the advantages of using a framework. So I chose Mootools to actually write readable JavaScript and reduce complexity. Since every creature is based on a class called Item with e.g. properties like x, y position and all different species (sharks, fish, plankton) extent creature there are three levels. Now I'm almost done and profiling looks bad. It takes up to 5 times more to calculate a frame. The program spends 15% of its time in wrap.wrapper.extend.$owner() according to Chrome's profiler. To me it looks like this function is called for every single function of every single animal. Which easily sums up to more than 1000 calls per frame and more than 30,000 calls per second. Don't know what happens when properties are read/written. Did I overshoot? Should I return to plain prototyping? Any tips are welcome, -- noiv The first demo [email protected]
