[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDAoM_dCQw/” width=”100%” height=”500″]

http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDAoM_dCQw/

Anitype.register('R', {

  // Enter your name
  author: 'Dan Russo',

  // Enter a personal website, must have http
  website: 'http://solidhaptik.io',

  construct: function(two, points) {

  // Points for anitype letter "R" and "O" are obtained
    var anitype = this;
    var anchorsOrbit = [];
    var oh = Anitype.getEndpoints('o',1000);
  // Letter "o" is used to quickly generate vertices for a circular path
    var i = 0;
    _.each(oh, function(p) {
      if (i > 0 && i < 5)         anchorsOrbit.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y,            p.controls.right.x, p.controls.right.y, Two.Commands.curve));       else if (i >= 5)
        anchorsOrbit.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.line));
      else
        anchorsOrbit.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.move));
      i ++;
    });

   // Create polygons for visible letter and orbit path
    var polygon = anitype.makePolygon(points);
    polygon. scale = 0;
    var orbit = anitype.makePolygon(anchorsOrbit).subdivide();

    // Creates the animation of letter "R" via a tween
    anitype.addTween(polygon, {
      to: { scale: 1 },
      easing: Anitype.Easing.Elastic.Out,
      duration: 0.2, 
      start: 0        
    });
    
    
    // Make Electrons via Circle
    var electron1 = two.makeCircle(0, 0, 8);
    var electron2 = two.makeCircle(0, 0, 8);
    var electron3 = two.makeCircle(0, 0, 8)

    
    
    // Animation for 1st orbit
    anitype.addTick(function(percent){
      var idx = Math.floor(percent*orbit.vertices.length)%orbit.vertices.length;
      electron1.translation.y = (orbit.vertices[idx].y * Math.cos(45) + orbit.vertices[idx].x * Math.sin(45)) * 1.5;
      electron1.translation.x = (orbit.vertices[idx].x  * Math.cos(45) - orbit.vertices[idx].y * Math.sin(45)) * 1.5;

    // Hide electrons behind letter

      if(percent < .2 || percent > 0){
     electron1.scale = 1;
      }
      else{
      electron1.scale = 0;
      }
    });
    
    // Animation for 2nd orbit
    anitype.addTick(function(percent){
      var idx = Math.floor(percent*orbit.vertices.length)%orbit.vertices.length;
      electron2.translation.y = (orbit.vertices[idx].x * Math.cos(180) + orbit.vertices[idx].y * Math.sin(180)) * 2;
      electron2.translation.x = (orbit.vertices[idx].y  * Math.cos(180) - orbit.vertices[idx].x * Math.sin(180)) * 2;

      if(percent < .2 || percent > 0){
     electron2.scale = 1;
      }
      else{
      electron2.scale = 0;
      }
    });

    // Animation for 3rd orbit
    anitype.addTick(function(percent){
      var idx = Math.floor(percent*orbit.vertices.length)%orbit.vertices.length;
      electron3.translation.y = (orbit.vertices[idx].x + orbit.vertices[idx].y) * 1.25;
      electron3.translation.x = (orbit.vertices[idx].y - orbit.vertices[idx].x) * 1.25;

      if(percent < .2 || percent > 0){
     electron3.scale = 1;
      }
      else{
      electron3.scale = 0;
      }
    });



    // Returned polygon in wrapped group.
     return two.makeGroup([polygon,electron1,electron2,electron3]);

  }

});