bishopz / frame.js Goto Github PK

Frame.clearLibs = function(){
_libs = [];
};

to force a reload

http://creativejs.com/resources/requestanimationframe/

needs a true promise

In the event that a problem must be targeted by a specific user in the production environment. (vasan)

(this.exports || this || {})

should be...

https://github.com/OptimalBits/bull

Pause() & resume()
Progress()

See https://github.com/eriwen/javascript-stacktrace

there are a few missing semicolons
run it through eclipse before minifying

This should be enabled/disabled through a config option.

Something like

Frame.flutter = function( times, offset, [ease,] fn){

if(isNumber(offset)){

    $.for(times, function(i){

        setTimeout(fn, offset * i);

    });

} else if(isFunction(offset)){

    $.for(times, function(i){

        setTimeout(fn, offset(i) );

    });

} else if(optional(ease) === 'expo'){

    $.for(times, function(i){

        setTimeout(fn, expo(i, 0, offset, times) );

    });

}




};

so that they can be visualized

conserve global namespace

Frame(100);

would be the same as:

Frame(100, function(next){ next(); });

honestly, I though LAB supported this, but no.

https://github.com/m-gagne/limit.js

check the Backbone.js source for correct usage.

Frame.debug = 0; // silent
Frame.debug = 1; >> errors only
Frame.debug = 2; >> titles & errors
Frame.debug = 3; >> logs & errors
Frame.debug = 4; >> titles, logs & errors
Frame.debug = 5; >> titles, logs & errors, and start and stop messages

it's a better name

only happens if lib is requested multiple times before any copy is returned, might be able to avoid this scenario if a true promise architecture is used on top of LAB

https://github.com/WebReflection/yuno
https://github.com/WebReflection/yal.js

reply to https://twitter.com/#!/WebReflection

line 164 should be

} else if (typeof a === 'function') { a.apply(Frame, _makeArray(arguments).splice(1)); }

Frame() used for Frame-based animation creates a lot of Frame callbacks (upwards of 30 per second). Frame.debug=4 becomes very chatty. If during that animation a module is loaded, the debug statements pass by so quickly that they are easily missed and quickly fall past the browsers console.log length limit.

Something like jQuery's named queues should solve the issue nicely.

Sometimes long queues bog down in debug mode because the Frame.stack takes up memory.

http://dfellis.github.io/2012/11/25/queue-flow-advancements/

I hope this is the appropriate way to address a question. I searched for another contact method for you, but did not find one. So...

I have successfully implemented Frame.js to sequence a series of calls. But when one of the functions is a for loop, the frames within the for loop (of which there are several ajax calls) are not performed in sequence. I have tried re-initiated the Frame within the loop function, but it did not resolve the problem. Do you have any other suggestions?

should be removed

Frame.js is the combination of two basic types of libraries, together these two open the opportunity to solve both problems in a more systematic, elegant and concise way than either separately.

Frame is a combination of a library loader, like require, yep/nope or LAB, and a flow control library, like async ...

also consider removing speedTest from production version. either take it out or make it work.

Taken from a similar issue on async's issue list.

Should add support for a timeout value per Frame (in addition to useTimeout), and have a failover method that allows Frame to continue on.

This may require changing the script loader away from $LAB, as $LAB does not offer a "fail" state.

confusing for new users.

I've been thinking on how to manage transitions like for example crossfade or so on in frame.js, I think it's an enough cool feature to be easy to use instead of ending using a lot of flash everywhere to change between scenes :)

As frame.js is timeline based instead of node based, the "graphical view" of the solution could be something like:

var effects = [
{"name": "FX1", "start": 0, "end": 1000, "layer": 0, "id": 0 },
{"name": "FX2", "start": 750, "end": 2000, "layer": 1, "id": 1 },
{"name": "FXTransition", "start": 750, "end": 1000, "layer": 2, "id": 2 },
];
So the transition effect will affect during 250ms.
The transition effect should have two parameters: List of effects from the beginning of the transition, and list of effect at the end of the transition.
Right now for this example one will be the FX1, and the other one the FX2.

In summary what it will do is to create one FBO for each effect, and when it appears in action (.start()) it will disable the render to screen on both attached effects, and it will start using their FBO to do the transition using some shadermaterial or whatever you want to implement.

I've a proof of concept but before going further I wanted to check what you think about it.
I've made basically:

Include id parameter for each module instance, as we could link between effects, not just for this kind of effects but for many other kind.
Include a getModuleInstanceById or so function in frame.js
Create a TransitionModule with basic mix shader between the two fbo.
Include a input parameter on each effect in the transition similar to: parameters.input.renderToTexture=false. This parameter will be changed by the transition effect. And a parameter.output.fbo
Modify the doFrame in both effects to render to screen or to fbo according to the .renderToTexture parameter
So this is what I was doing yesterday and I got it working. Of course the part of including the extra input/output parameters and the doFrame switching between fbo or screen should be done in a cool fancy way so you could include each effect in a transition without need to modify it code.

Let me know what you think

instead of Javascript ticks

http://stackoverflow.com/questions/10284769/how-to-use-queue-in-jquery-animate/10285316#10285316
http://stackoverflow.com/questions/10250860/perform-function-after-x-number-of-calls-with-setinterval/10251029#10251029
http://stackoverflow.com/questions/10247697/flattening-out-nested-callback/10249125#10249125
http://stackoverflow.com/questions/10233374/break-from-jquery-for-loop-when-doing-an-ajax-call-return-error/10233614#10233614
http://stackoverflow.com/questions/10221302/deferred-calls-for-multiple-ajax-calls/10222069#10222069
http://stackoverflow.com/questions/7128110/http-synchronous-request-stops-my-gif-moving-in-chrome-and-ie/10059205#10059205
http://stackoverflow.com/questions/3034874/sequencing-ajax-requests/10059139#10059139
http://stackoverflow.com/questions/7519793/sequencing-events-in-javascript/10059072#10059072
http://stackoverflow.com/questions/10058753/how-to-create-pause-or-delay-in-for-loop/10058963#10058963

Add a yield function, like Unity has:

It is often more convenient to use the yield statement. The yield statement is a special kind of return, that ensures that the function will continue from the line after the yield statement next time it is called.

while(true) {
// do step 0
yield; // wait for one frame
// do step 1
yield; // wait for one frame
// ...
}

(function(exports){
exports = exports || {};
var Frame = exports.Frame || {};
var tests = {};

Frame.perf = function(){
    Frame.perf('Frame.perf', 'start');
    var args = Array.prototype.slice.apply(arguments);

    var perf = {
        name : args[0],
        start:[],
        stop:[],
        duration:[]
    };
    if(tests.hasOwnProperty(perf.name)){ 
        perf = tests[perf.name];
    } else {
        tests[perf.name] = perf;
    };

    switch(args[1]){
    case 'start':
        var timer = new Date();
        perf.start.push(timer.getTime());
        break;
    case 'stop':
        var timer = new Date();
        perf.stop.push(timer.getTime());
        perf.duration.push( _.last(perf.stop) - _.last(perf.start) );
        //console.log(_.last(perf.stop) , _.last(perf.start),  _.last(perf.stop) - _.last(perf.start))
        break;
    };

    if(Frame.debug >= 3){
        Frame.log('Frame Perf Test ::', args);
    };

    Frame.perf('Frame.perf', 'stop');
    return perf;
};

Frame.perf.report = function(){
    var report = _.reduce(tests, function(m, perf){ 
        m[perf.name] = Math.floor(_.reduce(perf.duration, function(m, num){ return m + num; }, 0) / perf.duration.length);
        return m; 
    }, {});
    return report;
};

Frame.perf.count = function(){
    var report = _.reduce(tests, function(m, perf){ 
        m[perf.name] = perf.duration.length;
        return m; 
    }, {});
    return report;
};

Frame.perf.impact = function(){
    var report = _.reduce(tests, function(m, perf){ 
        m[perf.name] = Math.floor(_.reduce(perf.duration, function(m, d){ m += d; return m; }, 0) / 100);
        return m; 
    }, {});
    return report;
};

Frame.perf.range = function(){
    var report = _.reduce(tests, function(m, perf){ 
        m[perf.name] = Math.floor(_.range(perf.duration) / 100);
        return m; 
    }, {});
    return report;
};


Frame.perf.tests = tests;

})(window);

Good tutorial about unit testing

https://www.unboxedconsulting.com/blog/making-javascript-testing-in-the-browser-not-suck-with-sinon-js-part-1

http://calendar.perfplanet.com/2012/the-non-blocking-script-loader-pattern/

Some good ideas here.

like this:
https://github.com/mrdoob/logger.js/blob/master/src/Logger.js

Frame.stack grows in size with each Frame. Using it in with setInterval, to create a FPS timeline for instance, creates a memory leak in the development version.

This is not true in the production version, so I'm not sure how important it is. Seems better Chrome than Firefox, which is struggling with it's memory footprint right now.

At very least Frame.stack() should be disable-able via some config option, maybe even be disabled by default.

by calling

get message: function () { [native code] }
get stack: function () { [native code] }

and appending result to the error message

Even though double is not a reserved word in javascript. Some javascript minifiers do not like it's use (I assume because it is a reserved word in other languages).

https://npmjs.org/package/kue

IE does not support syntax array.splice(index[, howMany[, element1[, ...[, elementN]]]]) well. Using slice(1) instead fixing the problem.

use async as a reference
https://github.com/caolan/async