Server Side Implementation of requestAnimationFrame() in NodeJS

Question

I have some questions regarding the wildly used requestAnimationFrame() functions. Recently I came across some implementation in multiplayer games who used it on the client instead of the server side.

1. Is there any benefit in doing so?
2. Can you reference me to any "best practices" server side implementation in NodeJS?

Update

I got a bit confused between the animation and game loop - what I was looking for is an implementation in NodeJS => e.g setInterval.

Example - Client side implementation

(function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame =
            window[vendors[x] + 'CancelAnimationFrame'] ||
            window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function (callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function () {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function (id) {
            clearTimeout(id);
        };
}());

Besnard

What would an "animation frame" even mean in a server application? – Tallis

My mistake, what I meant was the game cycle and not per se the animation loop - I should have been clearer. What I was looking for is an implementation of a server side game loop in NodeJS. – Besnard

Answer 1

Is there any benefit in doing so?

In the client - there is. While setTimeout and its friends run in the timers queue - requestAnimationFrame is synced to a browser's rendering of the page (drawing it) so when you use it there is no jitter since you telling it what to draw and the browser drawing are in sync.

Typically games have two loops - the render loop (what to draw) and the game loop (logic of where things are). The first one is in a requestAnimationFrame and the other in a setTimeout - both must run very fast.

Here is a reference on requestAnimationFrame by Paul Irish.

Can you reference me to any "best practices" server side implementation in NodeJS?

Since the server does not render any image - there is no point in polyfilling requestAnimationFrame in the server. You'd use setImmediate in Node/io.js for what you'd use requestAnimationFrame for in the client.

Simply put - requestAnimationFrame was added to solve a problem (jitterless rendering of graphic data) that does not exist in servers.

Sweetheart

I do need to render something in NodeJS, for an IoT device. – Shanahan

@Shanahan you still wouldn't be rendering it in Node - you'd be rendering it with whatever binding the IoT device gives you for drawing things and that might provide a requestAnimationFrame. You're also stevemao so you'd know that which makes me wonder what point you were trying to make? That node doesn't run only on servers? – Sweetheart

I'm trying to animate my led lights with Arduino. github.com/stevemao/neoclock-js Looking at the source code of johnny-five, it looks like it's using setImmediate – Shanahan

> you'd be rendering it with whatever binding the IoT device gives you for drawing things and that might provide a requestAnimationFrame. What if nodejs is powering the device to render? Assume it doesn't really have a brain... – Shanahan

But the lights don't have a rendering clock which they use to (try to) re-render 60 times a second (like the browser - as you said they don't have a brain). The only point of requestAnimationFrame is to sync to that existing clock the browser has. Otherwise I'm not sure what good it would do. The project looks really cool by the way - IIRC the C version just blocks for periods of time. – Sweetheart

Thanks Benjamin, your explanation makes sense. Unfortunately it seems no library on npm that does color animation yet :( – Shanahan

Answer 2

function requestAnimationFrame(f){
  setImmediate(()=>f(Date.now()))
}

Browse

Hi! Please add some explanation as to how this solves OP's problem. It is generally discouraged on SO to post code only answers as they do not help OP or future visitors understand the answer. Thanks! --From Review. – Dekko

Answer 3

if(!window.requestAnimationFrame) 
    window.requestAnimationFrame = window.setImmediate

Historiated