5 Replies Latest reply on Jun 5, 2013 4:02 PM by ljmats

    Practical limit to number of objects?

    coyqueue

      Hello. I'm just coming up to speed with Edge Animate, coming from a reasonably proficient history with Flash/AS3.

       

      My starter project needs to display a large collection of objects. There could be up to 1000 small objects in existence (which could all be visible simultaneously, or not), in a 600x600 stage. Only 3-5 of these will actually be in motion at any given time, and the animations would be very simple, like fade- or fly-in/out. Hundreds of visible objects would respond to mouse events.

       

      Also, there are only about 20 unique symbols, and some of those could be (but don't have to be) static text instead of graphics.

       

      Target platform would be tablets and above, no smartphones. (And certainly on tablets, touch events would be simplified significantly due to the lack of fine control.)

       

      Performance does not have to be liquid smooth, as long as the app begins to respond immediately. Load time is not a large concern, within reason.

       

      Would this be asking too much of this technology? I know the browser has a great deal to do with the performance, as does the CPU, so I'm looking for more of a "should be OK in most environments" style of answer.

        • 1. Re: Practical limit to number of objects?
          Wigchert Level 1

          Adobe Edge doesn't work with canvas based animation which would be best for what you are trying to achieve. The canvas of HTML5 handles a large number of objects and animations better than the method Edge uses (Don't get me wrong, Edge is awesome for most other uses). The canvas requires more coding but my experience with it is really good.

           

          What the canvas does is draw actual pixels on the "stage". To animate the objects you would set an interval on a funtion that would redraw the objects each time on a new position. The downside is that once an object is drawn it becomes nothing more than just pixels and can't call that object again. To make it clickable for example you have to determine the click areas by the x and y position of the mouse.

           

          Edit: here is a link with a very interesting explanation about different animation methods, it also has some nice links to different tests. Note that this post and the other links are a bit older but for the idea it'll do.

          http://stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div

          • 2. Re: Practical limit to number of objects?
            roti62 Level 1

            My latest project is a quite complex weather app with about 800 symbols, images, and elements. It has a lot of implemented math logic too.

             

            Most (~90%) of them need to have interactive capabilities, either in terms of motion or in terms of user interaction.

             

            The performance is quite good so far, even on mobile devices. Bad performance is more a browser issue as you can expect since Netscape (in fact we are back in the 90's - thank you Apple). Keep in mind that Opera does respond badly to a complex Animate site.

             

            So test your project on a large number of devices (ask friends...) with different browsers. There is no way to skip testing, and I am uncomfortable with the canvas discussion (btw. it is wrong to say canvas animations are better: coding them is p.i.t.a. and animations are quite basic). Animate projects are not based on a runtime plugin like Flash that took care of cross-platform issues. It uses Javascript frameworks (e.g. jQuery) which are still under development. Additionally, JS implementations are quite different in browsers (The 'inventor' Apple does not support the HTML5 spec of the FileReader API in order to bring local images into a canvas to animate them...) 

             

            So do expect a lot, but not expect a cow delivering wool, eggs and milk at the same time. Keep your stuff simple and modular, and code your project careful by using best practice recommendations.

             

            And - keep testing, testing, testing... Good luck - but do it man...

            • 3. Re: Practical limit to number of objects?
              Wigchert Level 1

              I must say that I disagree with your view on the canvas. I have a strong AS3 background so coding the canvas feels natural opposed to the other methods. The animations are far from basic, they might need some more coding but anything is possible to make and with the Greensock plugin making any type of animation is made very easy. That is the power of canvas, freedom, you aren't limited by all kinds of frameworks. Of course so much coding from scratch isn't for everyone and might seem a big step and too much (hard) work but when done correctly it pays off. I have made several (dynamic) advertisement banners with canvas and tested them thoroughly on mobile devices and didn't run into any complications.

              Though, I must add that the method you choose more or less depends on what you are making (canvas is good for drawing, animating etc. but it doesn't have a (good) text input for example).

              • 4. Re: Practical limit to number of objects?
                JackPitsker

                My recent experiments with canvas on mobile devices seems to indicate that with small numbers of animated objects it does okay, but when the animation gets more crowded it starts to lag...badly. If he's working on a project with a possible 1000 objects, I don't think the mobile browsers are ready to display that with canvas quite yet. I think that's why Edge went with DIV animation, because it can maintain a smooth animation flow on mobile browsers, even with large numbers of animating objects. I agree with you about Edge's limitations, though, and the freedom of working with more pure code. I'm hoping that mobile browsers will eventually get to the point where they can handle the demands of canvas and SVG animations, but so far they seem to choke when you get to the larger numbers of animated objects.

                 

                For my experiments, I generated a cube made up of smaller colored cubes. Each smaller cube had six sides that fluctuated the alpha channel, and when you clicked a cube it popped out of the larger cube and fell offscreen (eventually removing the object when it got offscreen, freeing up the event listeners for that one object). iPhones, iPads, and Android phones differed slightly on how much of this they could handle, but even at a 2x2x2 cube (8 smaller cubes, 48 animating panels) there was some lag. Once you got to larger cube sizes such as 3x3x3 (27 small cubes, 162 panels) the slow-down got really noticeable, and when you popped off a few smaller cubes the animation sped up dramatically. And by a 5x5x5 cube (125 smaller cubes, 750 panels) it was so slow as to be unuseable. Just getting it to recognize a touch event took a massive effort and the pop-off animation took something like a minute.

                 

                I can't really duplicate this test with Edge since I can't figure out how to program this kind of dynamic object placement and animation in their interface just yet...not even sure if it is possible. But I do know that the various div-based animations I've seen produced by Edge and other frameworks (such as CAAT) have been able to animate large numbers of objects with no noticeable slowdown, even on older iPhones. I'm an AS3 programmer like Wigchert, and I'm a bit frustrated that Flash has been given the death-knell by Adobe before these other programs are really ready to fill the void. I don't think there is any "good" answer right now. Edge is kind of where Flash was back in the AS1 days when Director was put on the chopping block.

                 

                Again, this is all just my opinion formed during my search for the next best way to do what I've been doing for years in Flash (and before that, Director). Maybe I just haven't found what other people are using out there to accomplish real dynamically-generated, programming-intensive web animation. CAAT looks promising, and maybe Edge will get it together as well. Until then, I think it's just find something that works for your specific task.

                • 5. Re: Practical limit to number of objects?
                  ljmats Level 1

                  Coyqueue,

                   

                  How did your large project work out? I am also working with a very large Edge project involving about a thousand objects. Despite exceeding the minimum PC requirements, I am experiencing very long delays in Edge - it can take up to ten seconds to lock an object! I'd be curious to hear how your large project is going, and if you found any work arounds. Thanks.