Letter for Joe

implementation

var Letter, PreloaderView,
  bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

Letter = require('./Letter');

PreloaderView = (function() {
  PreloaderView.prototype.el = null;

  PreloaderView.prototype.refLetters = null;

  PreloaderView.prototype.letters = null;

  PreloaderView.prototype.isLoading = null;

  function PreloaderView() {
    this.update = bind(this.update, this);
    var domEl, el, i, j, letter, originPos, pos, ref;
    this.el = document.querySelector('#preloader-anim');
    pos = {
      x: this.el.getBoundingClientRect().left,
      y: this.el.getBoundingClientRect().top
    };
    originPos = [373, 384, 408, 425, 449, 469, 491, 518];
    domEl = this.el.querySelectorAll('.letter');
    this.letters = [];
    for (i = j = 0, ref = domEl.length; 0 <= ref ? j < ref : j > ref; i = 0 <= ref ? ++j : --j) {
      el = domEl[i];
      pos = originPos[i];
      letter = new Letter(el, pos - 373);
      this.letters.push(letter);
    }
    null;
  }

  PreloaderView.prototype.stop = function() {
    var j, len, letter, ref;
    ref = this.letters;
    for (j = 0, len = ref.length; j < len; j++) {
      letter = ref[j];
      letter.stop();
    }
    return null;
  };

  PreloaderView.prototype.update = function(canvasHelpBtn) {
    var j, len, letter, ref;
    ref = this.letters;
    for (j = 0, len = ref.length; j < len; j++) {
      letter = ref[j];
      letter.update();
    }
    return null;
  };

  return PreloaderView;

})();

module.exports = PreloaderView;

letter

var Letter,
  bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

Letter = (function() {
  Letter.prototype.el = null;

  Letter.prototype.style = null;

  Letter.prototype.angle = 0;

  Letter.prototype.speed = 0;

  Letter.prototype.rotationSpeed = 0;

  Letter.prototype.pos = null;

  Letter.prototype.originPos = null;

  Letter.prototype.cx = 0;

  Letter.prototype.cy = 0;

  Letter.prototype.radius = 50;

  Letter.prototype.shouldUpdate = null;

  Letter.prototype.vx = 0;

  Letter.prototype.vy = 0;

  Letter.prototype.vr = 0;

  Letter.prototype.spring = 0.03;

  Letter.prototype.friction = 0.88;

  Letter.prototype.rotation = 0;

  function Letter(_el, originPosX) {
    this.originPosX = originPosX;
    this.updatePos = bind(this.updatePos, this);
    this.stop = bind(this.stop, this);
    this.stick = bind(this.stick, this);
    this.update = bind(this.update, this);
    this.el = _el;
    this.style = this.el.style;
    this.angle = Math.random() * 360;
    this.speed = Math.random() * .2;
    this.rotation = Math.random() * 360;
    this.rotationSpeed = Math.random() * .1;
    this.originPos = {
      x: this.originPosX,
      y: 0
    };
    this.pos = this.originPos;
    this.shouldUpdate = true;
    this.cx = window.innerWidth / 2;
    this.cy = 0;
    this.el.classList.add('transitionIn');
    null;
  }

  Letter.prototype.update = function(angle) {
    if (this.shouldUpdate) {
      this.angle += this.speed;
      this.rotation += this.rotationSpeed;
      this.pos.x = Math.floor(this.cx + this.radius * Math.cos(this.angle));
      this.pos.y = Math.floor(this.cy + this.radius * Math.sin(this.angle));
    } else {
      this.stick();
    }
    this.updatePos();
    return null;
  };

  Letter.prototype.stick = function() {
    var ar, ax, ay, dr, dx, dy, offsetX;
    offsetX = (window.innerWidth - 167) / 2;
    dx = (offsetX + this.originPosX) - this.pos.x;
    ax = dx * this.spring;
    this.vx += ax;
    this.vx *= this.friction;
    this.pos.x += this.vx;
    dy = 0 - this.pos.y;
    ay = dy * this.spring;
    this.vy += ay;
    this.vy *= this.friction;
    this.pos.y += this.vy;
    dr = 0 - this.rotation;
    ar = dr * this.spring;
    this.vr += ar;
    this.vr *= this.friction;
    this.rotation += this.vr;
    return null;
  };

  Letter.prototype.stop = function() {
    setTimeout((function(_this) {
      return function() {
        return _this.shouldUpdate = false;
      };
    })(this), Math.random() * 1300);
    return null;
  };

  Letter.prototype.updatePos = function() {
    var transform;
    transform = "translate(" + this.pos.x + "px, " + this.pos.y + "px) rotate(" + this.rotation + "deg)";
    this.style.webkitTransform = transform;
    this.style.MozTransform = transform;
    this.style.msTransform = transform;
    this.style.OTransform = transform;
    this.style.transform = transform;
    return null;
  };

  return Letter;

})();

module.exports = Letter;