Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #21177

Re: Make an anime that draws primes different from offsets number++ , it's a variant of ulam spiral

Show all headers | View raw

On 06.09.2013 03:12, jonas.thornvall@gmail.com wrote:
> function draw() {
>    clear();
>    anime(divisorGlobal,numberGlobal);
>    numberGlobal++;
> }

There are a lot of issues in the code but to target the essential -

To animate call like this:

   function draw() {

       clear();
       anime(divisorGlobal,numberGlobal);
       numberGlobal++;

       requestAnimationFrame(draw);
   }

requestAnimationFrame is a more low-level approach which works more 
efficiently and guarantees to synchronize to the monitors VBLANK 
(contrary to setInterval and setTimeout which can only approximate this 
as they only takes integer value (60 fps is about 16.7 ms per frame). 
This means smoother animations and less resources used.

Which of course implies that the setInterval call is removed and 
replaced with a call to:

    draw();

instead to start the loop.

requestAnimationFrame must be prefixed in some browsers (Firefox is 
about to release version without need for prefix) so you can use this 
shim by Paul Irish to get around that and to support older versions 
(http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/) 
(I corrected the name below):

   window.requestAnimationFrame = (function(){
     return  window.requestAnimationFrame       ||
             window.webkitRequestAnimationFrame ||
             window.mozRequestAnimationFrame    ||
             function( callback ){
               window.setTimeout(callback, 1000 / 60);
             };
   })();

You might want to implement a condition in your loop so you are able to 
stop it from running, something like this:

   var isPlaying = true,
       requestId;

   function loop() {
     // render here
     if (isPlaying === true)
       requestId = requestAnimationFrame(loop);
   }

   function stop() {
     isPlaying = false;
     cancelAnimationFrame(requestId);
   }

(see link above for shim for cancelAnimationFrame - it's strictly not 
necessary but it doesn't hurt to support it)

PS: 4000x4000 canvas is very huge... you /will/ run into performance 
problems especially since you clear the whole canvas for each frame 
(which will probably result in a lower framerate depending on computer).

When you are doing this:

   function anime() {

     divisor=10;
     number=1;
     divisor=divisorGlobal;
     ....

you are setting /properties/ on the *window* object. This is not 
advicable. You should declare all of your variables like this:

   function anime() {

     var divisor=10;
     var number=1;
     var divisor=divisorGlobal;
     ....

or simply (this helps minifiers):

     var divisor=10,
         number=1,
         divisor=divisorGlobal,
         ....

Local scoped variables are faster to look up for the parser than global 
object properties so you may (or may not) notice performance gain 
depending on various factors (browser implementation being one). And 
setting things on window can accidentely override stuff.

Also, in your anime function include this line at the beginning:

     ctx.beginPath();

Looking at it roughly it does not appear you are adding to path (can't 
remeber on the fly if fillText() do or not, but in any case, if you do 
these paths will accumulate and things will be slower and slower for 
each frame. beginPath() resets the path.

Hope this is of some help.

-- 
Ken Fyrstenberg
Abdias Software
http://abdiassoftware.com/
(remove usenet- from address)

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Make an anime that draws primes different from offsets number++ , it's a variant of ulam spiral jonas.thornvall@gmail.com - 2013-09-06 01:12 -0700
  Re: Make an anime that draws primes different from offsets number++ , it's a variant of ulam spiral Ken <usenet-so@abdiassoftware.com> - 2013-09-06 18:37 -0500
    Re: Make an anime that draws primes different from offsets number++ , it's a variant of ulam spiral jonas.thornvall@gmail.com - 2013-09-06 23:15 -0700
  Re: Make an anime that draws primes different from offsets number++ , it's a variant of ulam spiral Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-09-07 21:21 +0100
    Re: Make an anime that draws primes different from offsets number++ , it's a variant of ulam spiral Stefan Weiss <krewecherl@gmail.com> - 2013-09-08 02:04 +0200
      WAS: Make an anime that draws primes different from offsets number++ , it's a variant of ulam spiral Dr J R Stockton <reply1300@merlyn.demon.co.uk.invalid> - 2013-09-09 19:38 +0100

csiph-web