renderer.js

var extend = rebound.util.extend,
    SpringSystem = rebound.SpringSystem,
    MathUtil = rebound.MathUtil;

var springSystem = new SpringSystem();

/** Animation **/

var Animation = function(layers, transitions) {

  // Build up a map of all the layers.
  this.layers = _.reduce(layers, function(memo, layer) {
    layer = new Layer(layer);
    memo[layer.name()] = layer;
    return memo;
  }, {});

  // Build up a map of all the transitions.
  this.transitions = _.reduce(transitions, function(memo, transition) {
    transition.layers = _.map(transition.layers, function(name) {
      return this.layers[name];
    }, this);
    transition = new Transition(transition);
    memo[transition.name()] = transition;
    return memo;
  }, {}, this);

  // Create a renderer
  this.renderer = new DomRenderer();

  // Listen to the physics system for updates.
  var _this = this;
  springSystem.addListener({
    onAfterIntegrate: function() {
      // On each update go through the transitions, which will update the
      // associated layers.
      _.each(_this.transitions, function(transition) {
        transition.update();
      })
      // Render the current layer state.
      _this.render();
    }
  });

  // Initial render.
  this.render();
};

extend(Animation.prototype, {

  getTransition: function(name) {
    return this.transitions[name];
  },

  render: function() {
    _.each(this.layers, function(layer) {
      this.renderer.renderLayer(layer);
    }, this);
  }

});

/** Renderer **/

// Renders layer state as DOM elements.
var DomRenderer = function() {
};

extend(DomRenderer.prototype, {
  renderLayer: function(layer) {
    this._nodes = this._nodes || {};
    var node = this._nodes[layer.name()];
    if (!node) {
      node = document.createElement('div');
      node.id = layer.name();
      this._nodes[layer.name()] = node;
      document.body.appendChild(node);
    }

    node.style.width = layer.width() + 'px';
    node.style.height = layer.height() + 'px';
    node.style.background = layer.background();
    xfrm(node, layer.x(), layer.y(), layer.scale(), layer.rot());
  }

});

/** Layer **/

var Layer = function(state) {this._state = state};
addAccessors(Layer.prototype,
  ['name', 'background', 'width', 'height', 'x', 'y', 'rot', 'scale']);

/** Transition **/

var Transition = function(state) {
  this._state = state;
  this._spring = springSystem.createSpring(
    this.tension(),
    this.friction());
};

addAccessors(Transition.prototype, ['name', 'layers', 'fields', 'start', 'end', 'tension', 'friction']);

extend(Transition.prototype, {
  go: function(value) {
    this._spring.setEndValue(value);
    return this;
  },

  update: function() {
    var layers = this.layers(),
      fields = this.fields(),
      start = this.start(),
      end = this.end(),
      val = this._spring.getCurrentValue();
    if (typeof start === 'string') {
      // must be a color tween
      val = MathUtil.interpolateColor(val, start, end, 0, 1);
    } else {
      val = MathUtil.mapValueInRange(val, 0, 1, start, end);
    }
    for (var i = 0, len = layers.length; i < len; i++) {
      for (var j = 0, len2 = fields.length; j < len2; j++) {
        layers[i][fields[j]](val);
      }
    }
  }
});