Controlling fps with requestAnimationFrame

Question

It seems like requestAnimationFrame is the de facto way to animate things now  It worked pretty well for me for the most part  but right now I m trying to do some canvas animations and I was wondering  Is there any way to make sure it runs at a certain fps  I understand that the purpose of rAF is for consistently smooth animations  and I might run the risk of making my animation choppy  but right now it seems to run at drastically different speeds pretty arbitrarily  and I m wondering if there s a way to combat that somehow   I d use setInterval but I want the optimizations that rAF offers  especially automatically stopping when the tab is in focus    In case someone wants to look at my code  it s pretty much   animateFlash  function         ctx fg clearRect 0 0 canvasWidth canvasHeight       ctx fg fillStyle    rgba 177 39 116 1        ctx fg strokeStyle    none       ctx fg beginPath        for var i in nodes            nodes i  drawFlash              ctx fg fill        ctx fg closePath        var instance   this      var rafID   requestAnimationFrame function            instance animateFlash                var unfinishedNodes   nodes filter function elem           return elem timer  lt  timerMax               if unfinishedNodes length     0            console log  done            cancelAnimationFrame rafID           instance animate              Where Node drawFlash   is just some code that determines radius based off a counter variable and then draws a circle

User · Answer

Update 2016 6  The problem throttling the frame rate is that the screen has a constant update rate  typically 60 FPS   If we want 24 FPS we will never get the true 24 fps on the screen  we can time it as such but not show it as the monitor can only show synced frames at 15 fps  30 fps or 60 fps  some monitors also 120 fps    However  for timing purposes we can calculate and update when possible   You can build all the logic for controlling the frame-rate by encapsulating calculations and callbacks into an object   function FpsCtrl fps  callback         var delay   1000   fps                                   calc  time per frame         time   null                                          start time         frame   -1                                           frame count         tref                                                 rAF time reference      function loop timestamp            if  time     null  time   timestamp                  init start time         var seg   Math floor  timestamp - time    delay      calc frame no          if  seg  gt  frame                                      moved to next frame              frame   seg                                      update             callback                                         callback function                 time  timestamp                  frame  frame                                  tref   requestAnimationFrame loop            Then add some controller and configuration code      play status this isPlaying   false      set frame-rate this frameRate   function newfps        if   arguments length  return fps      fps   newfps      delay   1000   fps      frame   -1      time   null         enable starting pausing of the object this start   function         if   this isPlaying            this isPlaying   true          tref   requestAnimationFrame loop             this pause   function         if  this isPlaying            cancelAnimationFrame tref           this isPlaying   false          time   null          frame   -1             Usage  It becomes very simple - now  all that we have to do is to create an instance by setting callback function and desired frame rate just like this   var fc   new FpsCtrl 24  function e            render each frame here         Then start  which could be the default behavior if desired    fc start      That s it  all the logic is handled internally   Demo   x000D   x000D  var ctx   c getContext  2d    pTime   0  mTime   0  x   0  x000D  ctx font    20px sans-serif   x000D   x000D     update canvas with some information and animation x000D  var fps   new FpsCtrl 12  function e    x000D   ctx clearRect 0  0  c width  c height   x000D   ctx fillText  FPS      fps frameRate      x000D                     Frame      e frame    x000D                     Time       e time - pTime  toFixed 1   4  30   x000D   pTime   e time  x000D   var x    pTime - mTime    0 1  x000D   if  x  gt  c width  mTime   pTime  x000D   ctx fillRect x  50  10  10  x000D     x000D   x000D     start the loop x000D  fps start    x000D   x000D     UI x000D  bState onclick   function     x000D   fps isPlaying   fps pause     fps start    x000D     x000D   x000D  sFPS onchange   function     x000D   fps frameRate  this value  x000D     x000D   x000D  function FpsCtrl fps  callback    x000D   x000D   var delay   1000   fps  x000D    time   null  x000D    frame   -1  x000D    tref  x000D   x000D   function loop timestamp    x000D    if  time     null  time   timestamp  x000D    var seg   Math floor  timestamp - time    delay   x000D    if  seg  gt  frame    x000D     frame   seg  x000D     callback   x000D      time  timestamp  x000D      frame  frame x000D        x000D      x000D    tref   requestAnimationFrame loop  x000D     x000D   x000D   this isPlaying   false  x000D    x000D   this frameRate   function newfps    x000D    if   arguments length  return fps  x000D    fps   newfps  x000D    delay   1000   fps  x000D    frame   -1  x000D    time   null  x000D      x000D    x000D   this start   function     x000D    if   this isPlaying    x000D     this isPlaying   true  x000D     tref   requestAnimationFrame loop   x000D      x000D      x000D    x000D   this pause   function     x000D    if  this isPlaying    x000D     cancelAnimationFrame tref   x000D     this isPlaying   false  x000D     time   null  x000D     frame   -1  x000D      x000D      x000D    x000D  body  font 16px sans-serif  x000D   lt label gt Framerate   lt select id sFPS gt  x000D    lt option gt 12 lt  option gt  x000D    lt option gt 15 lt  option gt  x000D    lt option gt 24 lt  option gt  x000D    lt option gt 25 lt  option gt  x000D    lt option gt 29 97 lt  option gt  x000D    lt option gt 30 lt  option gt  x000D    lt option gt 60 lt  option gt  x000D   lt  select gt  lt  label gt  lt br gt  x000D   lt canvas id c height 60 gt  lt  canvas gt  lt br gt  x000D   lt button id bState gt Start Stop lt  button gt  x000D   x000D   x000D    Old answer  The main purpose of requestAnimationFrame is to sync updates to the monitor s refresh rate  This will require you to animate at the FPS of the monitor or a factor of it  ie  60  30  15 FPS for a typical refresh rate   60 Hz    If you want a more arbitrary FPS then there is no point using rAF as the frame rate will never match the monitor s update frequency anyways  just a frame here and there  which simply cannot give you a smooth animation  as with all frame re-timings  and you can might as well use setTimeout or setInterval instead   This is also a well known problem in the professional video industry when you want to playback a video at a different FPS then the device showing it refresh at  Many techniques has been used such as frame blending and complex re-timing re-building intermediate frames based on motion vectors  but with canvas these techniques are not available and the result will always be jerky video   var FPS   24        silver screen  var isPlaying   true   function loop         if  isPlaying  setTimeout loop  1000   FPS            code for frame here     The reason why we place setTimeout first  and why some place rAF first when a poly-fill is used  is that this will be more accurate as the setTimeout will queue an event immediately when the loop starts so that no matter how much time the remaining code will use  provided it doesn t exceed the timeout interval  the next call will be at the interval it represents  for pure rAF this is not essential as rAF will try to jump onto the next frame in any case    Also worth to note that placing it first will also risk calls stacking up as with setInterval  setInterval may be slightly more accurate for this use   And you can use setInterval instead outside the loop to do the same   var FPS   29 97        NTSC var rememberMe   setInterval loop  1000   FPS    function loop              code for frame here     And to stop the loop   clearInterval rememberMe     In order to reduce frame rate when the tab gets blurred you can add a factor like this   var isFocus   1  var FPS   25   function loop         setTimeout loop  1000    isFocus   FPS        note the change here          code for frame here    window onblur   function         isFocus   0 5      reduce FPS to half       window onfocus   function         isFocus   1      full FPS     This way you can reduce the FPS to 1 4 etc

User · Answer

I always do it this very simple way without messing with timestamps   var fps  eachNthFrame  frameCount   fps   30     This variable specifies how many frames should be skipped    If it is 1 then no frames are skipped  If it is 2  one frame    is skipped so  eachSecondFrame  is renderd  eachNthFrame   Math round  1000   fps    16 66      This variable is the number of the current frame  It is set to eachNthFrame so that the    first frame will be renderd  frameCount   eachNthFrame   requestAnimationFrame frame      I think the rest is self-explanatory fucntion frame       if  frameCount    eachNthFrame        frameCount   0      animate          frameCount      requestAnimationFrame frame

User · Answer

var time   0  var time framerate   1000    in milliseconds  function animate timestamp      if timestamp  gt  time   time framerate        time   timestamp             your code        window requestAnimationFrame animate

User · Answer

For throttling FPS to any value  pls see jdmayfields answer  However  for a very quick and easy solution to halve your frame rate  you can simply do your computations only every 2nd frame by  requestAnimationFrame render   function render              computations       requestAnimationFrame skipFrame     function skipFrame     requestAnimationFrame render      Similarly you could always call render but use a variable to control whether you do computations this time or not  allowing you to also cut FPS to a third or fourth  in my case  for a schematic webgl-animation 20fps is still enough while considerably lowering computational load on the clients

User · Answer

These are all good ideas in theory  until you go deep   The problem is you can t throttle an RAF without de-synchronizing it  defeating it s very purpose for existing   So you let it run at full-speed  and update your data in a separate loop  or even a separate thread   Yes  I said it   You can do multi-threaded JavaScript in the browser    There are two methods I know that work extremely well without jank  using far less juice and creating less heat   Accurate human-scale timing and machine efficiency are the net result     Apologies if this is a little wordy  but here goes       Method 1  Update data via setInterval  and graphics via RAF   Use a separate setInterval for updating translation and rotation values  physics  collisions  etc   Keep those values in an object for each animated element   Assign the transform string to a variable in the object each setInterval  frame    Keep these objects in an array   Set your interval to your desired fps in ms   ms  1000 fps    This keeps a steady clock that allows the same fps on any device  regardless of RAF speed   Do not assign the transforms to the elements here   In a requestAnimationFrame loop  iterate through your array with an old-school for loop-- do not use the newer forms here  they are slow   for var i 0  i lt sprite length-1  i      rafUpdate sprite i         In your rafUpdate function  get the transform string from your js object in the array  and its elements id   You should already have your  sprite  elements attached to a variable or easily accessible through other means so you don t lose time  get -ing them in the RAF   Keeping them in an object named after their html id s works pretty good   Set that part up before it even goes into your SI or RAF   Use the RAF to update your transforms only  use only 3D transforms  even for 2d   and set css  will-change  transform   on elements that will change   This keeps your transforms synced to the native refresh rate as much as possible  kicks in the GPU  and tells the browser where to concentrate most   So you should have something like this pseudocode        refs to elements to be transformed  kept in an array var element        mario  document getElementById  mario       luigi  document getElementById  luigi           etc     var sprite         read write this with SI   read-only from RAF    mario    id  mario      physics data  id  and updated transform string  from SI  here        luigi     id  luigi       same            and so forth      also kept in an array  for efficient iteration     update one sprite js object   data manipulation  CPU tasks for each sprite object    physics  collisions  and transform-string updates here     pass the object  by reference   var SIupdate   function object        get pos rot and update with movement   object pos x    object mov pos x      example  motion along x axis      and so on for y and z movement      and xyz rotational motion  scripted scaling etc       build transform string ie   object transform       translate3d         object pos x           object pos y           object pos z                  assign rotations  order depends on purpose and set-up       rotationZ   object rot z           rotationY   object rot y           rotationX   object rot x            scale3d       if desired           etc   include      var fps   30    desired controlled frame-rate      CPU TASKS - SI psuedo-frame data manipulation setInterval function         update each objects data   for var i 0  i lt sprite length-1  i      SIupdate sprite i         1000 fps       note ms   1000 fps      GPU TASKS - RAF callback  real frame graphics updates only var rAf   function         update each objects graphics   for var i 0  i lt sprite length-1  i      rAF update sprite i        window requestAnimationFrame rAF      loop       assign new transform to sprite s element  only if it s transform has changed  rAF update   function object          if object old transform     object transform       element object id  style transform   transform      object old transform   object transform          window requestAnimationFrame rAF      begin RAF   This keeps your updates to the data objects and transform strings synced to desired  frame  rate in the SI  and the actual transform assignments in the RAF synced to GPU refresh rate   So the actual graphics updates are only in the RAF  but the changes to the data  and building the transform string are in the SI  thus no jankies but  time  flows at desired frame-rate     Flow    setup js sprite objects and html element object references    setup RAF and SI single-object update functions    start SI at percieved ideal frame-rate     iterate through js objects  update data transform string for each     loop back to SI    start RAF loop     iterate through js objects  read object s transform string and assign it to it s html element     loop back to RAF      Method 2   Put the SI in a web-worker  This one is FAAAST and smooth   Same as method 1  but put the SI in web-worker   It ll run on a totally separate thread then  leaving the page to deal only with the RAF and UI   Pass the sprite array back and forth as a  transferable object    This is buko fast   It does not take time to clone or serialize  but it s not like passing by reference in that the reference from the other side is destroyed  so you will need to have both sides pass to the other side  and only update them when present  sort of like passing a note back and forth with your girlfriend in high-school   Only one can read and write at a time   This is fine so long as they check if it s not undefined to avoid an error   The RAF is FAST and will kick it back immediately  then go through a bunch of GPU frames just checking if it s been sent back yet   The SI in the web-worker will have the sprite array most of the time  and will update positional  movement and physics data  as well as creating the new transform string  then pass it back to the RAF in the page     This is the fastest way I know to animate elements via script   The two functions will be running as two separate programs  on two separate threads  taking advantage of multi-core CPU s in a way that a single js script does not   Multi-threaded javascript animation   And it will do so smoothly without jank  but at the actual specified frame-rate  with very little divergence     Result   Either of these two methods will ensure your script will run at the same speed on any PC  phone  tablet  etc  within the capabilities of the device and the browser  of course

User · Answer

Skipping requestAnimationFrame cause not smooth desired  animation at custom fps      x000D   x000D     Input output DOM elements x000D  var  results       results    x000D  var  fps       fps    x000D  var  period       period    x000D   x000D     Array of FPS samples for graphing x000D   x000D     Animation state parameters x000D  var fpsInterval  lastDrawTime  frameCount timed  frameCount  lastSampleTime   x000D    currentFps 0  currentFps timed 0  x000D  var intervalID  requestID  x000D   x000D     Setup canvas being animated x000D  var canvas   document getElementById  c    x000D  var canvas timed   document getElementById  c2    x000D  canvas timed width   canvas width   300  x000D  canvas timed height   canvas height   300  x000D  var ctx   canvas getContext  2d    x000D  var ctx2   canvas timed getContext  2d    x000D   x000D   x000D     Setup input event handlers x000D   x000D   fps on  click change keyup   function     x000D      if  this value  gt  0    x000D          fpsInterval   1000    this value  x000D        x000D      x000D   x000D   period on  click change keyup   function     x000D      if  this value  gt  0    x000D          if  intervalID    x000D              clearInterval intervalID   x000D            x000D          intervalID   setInterval sampleFps   this value   x000D        x000D      x000D   x000D   x000D  function startAnimating fps  sampleFreq    x000D   x000D      ctx fillStyle   ctx2 fillStyle     000   x000D      ctx fillRect 0  0  canvas width  canvas height   x000D      ctx2 fillRect 0  0  canvas width  canvas height   x000D      ctx2 font   ctx font    32px sans   x000D       x000D      fpsInterval   1000   fps  x000D      lastDrawTime   performance now    x000D      lastSampleTime   lastDrawTime  x000D      frameCount   0  x000D      frameCount timed   0  x000D      animate    x000D       x000D      intervalID   setInterval sampleFps  sampleFreq   x000D    animate timed   x000D    x000D   x000D  function sampleFps     x000D         sample FPS x000D      var now   performance now    x000D      if  frameCount  gt  0    x000D          currentFps   x000D               frameCount    now - lastSampleTime    1000  toFixed 2   x000D          currentFps timed   x000D               frameCount timed    now - lastSampleTime    1000  toFixed 2   x000D           results text currentFps           currentFps timed   x000D           x000D          frameCount   0  x000D          frameCount timed   0  x000D        x000D      lastSampleTime   now  x000D    x000D   x000D  function drawNextFrame now  canvas  ctx  fpsCount    x000D         Just draw an oscillating seconds-hand x000D       x000D      var length   Math min canvas width  canvas height    2 1  x000D      var step   15000  x000D      var theta    now   step    step   2   Math PI  x000D   x000D      var xCenter   canvas width   2  x000D      var yCenter   canvas height   2  x000D       x000D      var x   xCenter   length   Math cos theta   x000D      var y   yCenter   length   Math sin theta   x000D       x000D      ctx beginPath    x000D      ctx moveTo xCenter  yCenter   x000D      ctx lineTo x  y   x000D     ctx fillStyle   ctx strokeStyle    white   x000D      ctx stroke    x000D       x000D      var theta2   theta   3 14 6  x000D       x000D      ctx beginPath    x000D      ctx moveTo xCenter  yCenter   x000D      ctx lineTo x  y   x000D      ctx arc xCenter  yCenter  length 2  theta  theta2   x000D   x000D      ctx fillStyle    rgba 0 0 0  1   x000D      ctx fill    x000D       x000D      ctx fillStyle     000   x000D      ctx fillRect 0 0 100 30   x000D       x000D      ctx fillStyle     080   x000D      ctx fillText fpsCount 10 30   x000D    x000D   x000D     redraw second canvas each fpsInterval  1000 fps  x000D  function animate timed     x000D      frameCount timed    x000D      drawNextFrame  performance now    canvas timed  ctx2  currentFps timed   x000D       x000D      setTimeout animate timed  fpsInterval   x000D    x000D   x000D  function animate now    x000D         request another frame x000D      requestAnimationFrame animate   x000D       x000D         calc elapsed time since last loop x000D      var elapsed   now - lastDrawTime  x000D   x000D         if enough time has elapsed  draw the next frame x000D      if  elapsed  gt  fpsInterval    x000D             Get ready for next frame by setting lastDrawTime now  but    x000D             Also  adjust for fpsInterval not being multiple of 16 67 x000D          lastDrawTime   now -  elapsed   fpsInterval   x000D   x000D          frameCount    x000D        drawNextFrame now  canvas  ctx  currentFps   x000D        x000D    x000D  startAnimating   fps val      period val     x000D  input  x000D    width 100px  x000D    x000D   tvs  x000D    color red  x000D    padding 0px 25px  x000D    x000D  H3  x000D    font-weight 400  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt h3 gt requestAnimationFrame skipping  lt span id  tvs  gt vs  lt  span gt  setTimeout   redraw lt  h3 gt  x000D   lt div gt  x000D       lt input id  fps  type  number  value  33   gt  FPS  x000D       lt span id  results  gt  lt  span gt  x000D   lt  div gt  x000D   lt div gt  x000D       lt input id  period  type  number  value  1000   gt  Sample period  fps  ms  x000D   lt  div gt  x000D   lt canvas id  c  gt  lt  canvas gt  lt canvas id  c2  gt  lt  canvas gt  x000D   x000D   x000D    Original code by  tavnab

User · Answer

How to throttle requestAnimationFrame to a specific frame rate  Demo throttling at 5 FPS  http   jsfiddle net m1erickson CtsY3   This method works by testing the elapsed time since executing the last frame loop   Your drawing code executes only when your specified FPS interval has elapsed   The first part of the code sets some variables used to calculate elapsed time   var stop   false  var frameCount   0  var  results       results    var fps  fpsInterval  startTime  now  then  elapsed       initialize the timer variables and start the animation  function startAnimating fps        fpsInterval   1000   fps      then   Date now        startTime   then      animate        And this code is the actual requestAnimationFrame loop which draws at your specified FPS      the animation loop calculates time elapsed since the last loop    and only draws if your specified fps interval is achieved  function animate             request another frame      requestAnimationFrame animate           calc elapsed time since last loop      now   Date now        elapsed   now - then          if enough time has elapsed  draw the next frame      if  elapsed  gt  fpsInterval                Get ready for next frame by setting then now  but also adjust for your            specified fpsInterval not being a multiple of RAF s interval  16 7ms          then   now -  elapsed   fpsInterval               Put your drawing code here

User · Answer

The simplest way  const FPS   30  let lastTimestamp   0    function update timestamp      requestAnimationFrame update     if  timestamp - lastTimestamp  lt  1000   FPS  return               lt  lt  lt  PUT YOUR CODE HERE  gt  gt  gt           lastTimestamp   timestamp      update

User · Answer

I suggest wrapping your call to requestAnimationFrame in a setTimeout  const fps   25  function animate          perform some animation task here    setTimeout      gt        requestAnimationFrame animate        1000   fps     animate     You need to call requestAnimationFrame from within setTimeout  rather than the other way around  because requestAnimationFrame schedules your function to run right before the next repaint  and if you delay your update further using setTimeout you will have missed that time window  However  doing the reverse is sound  since you   re simply waiting a period of time before making the request

User · Answer

How to easily throttle to a specific FPS      timestamps are ms passed since document creation     lastTimestamp can be initialized to 0  if main loop is executed immediately var lastTimestamp   0      maxFPS   30      timestep   1000   maxFPS     ms for each frame  function main timestamp        window requestAnimationFrame main           skip if timestep ms hasn t passed since last frame     if  timestamp - lastTimestamp  lt  timestep  return       lastTimestamp   timestamp          draw frame here    window requestAnimationFrame main     Source  A Detailed Explanation of JavaScript Game Loops and Timing by Isaac Sukin

User · Answer

Here s a good explanation I found  CreativeJS com  to wrap a setTimeou  call inside the function passed to requestAnimationFrame   My concern with a  plain  requestionAnimationFrame would be   what if I only want it to animate three times a second    Even with requestAnimationFrame  as opposed to setTimeout  is that it still wastes  some  amount of  energy   meaning that the Browser code is doing something  and possibly slowing the system down  60 or 120 or however many times a second  as opposed to only two or three times a second  as you might want    Most of the time I run my browsers with JavaScript intentially off for just this reason   But  I m using Yosemite 10 10 3  and  I think there s some kind of timer problem with it - at least on my old system  relatively old - meaning 2011

User · Answer

A simple solution to this problem is to return from the render loop if the frame is not required to render  const FPS   60  let prevTick   0       function render          requestAnimationFrame render           clamp to fixed framerate     let now   Math round FPS   Date now     1000       if  now    prevTick  return      prevTick   now          otherwise  do your stuff        It s important to know that requestAnimationFrame depends on the users monitor refresh rate  vsync   So  relying on requestAnimationFrame for game speed for example will make it unplayable on 200Hz monitors if you re not using a separate timer mechanism in your simulation

[javascript] Controlling fps with requestAnimationFrame?

Usage

Demo

Examples related to javascript

Examples related to performance

Examples related to animation

Examples related to canvas

Examples related to requestanimationframe