0

I have a web app that uses the canvas to animate a tree that is drawn onto the screen. It does so by doing several trig calculations in a row. When you click the "grow" button there is an animation of a tree growing that has the certain attributes that the user can change. You can see the application here http://pastehtml.com/view/c85mxfgcj.html.

The problem is, if you set the "age" (the number of iterations to go through) too high, the animation starts to lag due to the calculations that the computer has to do. I was wondering two things:

  1. Is there a way to pre-render the animation before it is shown to the user?
  2. Is there a way to make it so that if I have a tree that has already been rendered and I wanted to animate it moving around the screen I could do that without having to re-draw the tree every single frame?

Thanks.

William Oliver
  • 1,412
  • 4
  • 24
  • 35
  • Welcome to stackoverflow! Could you use an array of canvases? – starbeamrainbowlabs Aug 14 '12 at 16:20
  • Hi - I believe you'll find some useful suggestions here: [Does HTML5/Canvas Support Double Buffering?](http://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering) – paulsm4 Aug 14 '12 at 16:20
  • Would I have to make more than two canvases to hold every single frame? I would like every individual frame to be pre-loaded, if I only use two then thats essentially doing what the computer already does for you. It waits until the next frame is loaded and THEN shows the image, which seems to be what double buffering does. If I do have to create several canvases then that also creates a problem because I have no idea how many frames I will need when the client presses "grow" also, Ive heard that double buffering actually causes more of a performance overhead. – William Oliver Aug 14 '12 at 16:34

1 Answers1

1

1: you might want to look into var fragment = document.createDocumentFragment();
2: yes via css, is much faster!

I think this youtube video will be worth your while.

Good luck

UPDATE: 9 Jan 2013 Just stumbled over this.
In css3 there is a animation feature using steps.
Basically you create a sprite (in canvas) and then use css3 to animate the sprite using a background-property on a element. Pretty cool (and should use the optimized browser's own code to do this, thus not load the users cpu as much as with javascript/canvas).
It's still not creating a animated gif however (but I think even that should be possible, using a library, since gif and pnp are quite alike, and then feed that gif using the data:image/gif protocol), but the end result still looks the same in the (modern) browser.

HTML: <div class="hi"></div> or <img src="transparent.gif" class="hi">

CSS3:

.hi { width: 50px; height: 72px; background-image: url("http://files.simurai.com/misc/sprite.png");

-webkit-animation: play 1s steps(10) infinite;
   -moz-animation: play 1s steps(10) infinite;
    -ms-animation: play 1s steps(10) infinite;
     -o-animation: play 1s steps(10) infinite;
        animation: play 1s steps(10) infinite; }

@-webkit-keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

@-moz-keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

@-ms-keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

@-o-keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

@keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

Example jsfiddle.

GitaarLAB
  • 14,536
  • 11
  • 60
  • 80
  • That seems to be the answer I was looking for! That youtube video is really cool as well! Thanks! Would you mind giving me an example of how it could be used? – William Oliver Aug 14 '12 at 16:50
  • pieuw.. everyone is still discovering.. there are so many way's, but for moving objects I absolutely recommend css (also scaling and even rotating!!!). – GitaarLAB Aug 14 '12 at 16:56
  • you want gpu accellerated 3D transforms-- otherwise butt ass slow on mobile. – FlavorScape Oct 21 '12 at 01:36
  • @FlavorScape: Could you elaborate? Or provide a reference link? Thanks! – GitaarLAB Oct 21 '12 at 01:42