Andre Le

23 Jan 2014


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

The first letter I animated was the letter B, which was assigned to me. I wanted to emphasize the whimsical curves of the B. I kept this one pretty simple, as animation using this library was new to me. I didn’t quite achieve what I wanted with this one. I felt that it could’ve used a little more personality.

Github Link

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('B', {
 
  // Enter your name
  author: 'Andre Le',
 
  // Enter a personal website, must have http
  website: 'http://andrele.com/',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
 
    // Create a Two.Polygon
 
    var polygon = anitype.makePolygon(points);
 
    var spine = anitype.makePolygon([polygon.vertices[0], polygon.vertices[1]]);
 
    polygon = polygon.subdivide();
 
    // Set an initial state
    polygon.scale = 1;
 
    var time = {value:0};
    anitype.addTween(time, {
      to: { value: 1 },
      easing: Anitype.Easing.Sinusoidal.InOut,
      duration: .8, 
      start: 0,
      update:function(){
        if (this.value < (1/2)) {
          polygon.beginning = this.value * 2;
        } else {
          polygon.beginning = 0;
          polygon.ending = (this.value - 0.5) * 2;
        }
      }
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(spine, polygon);
 
  }
 
});


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

I chose the letter A as my second letter because it happens to be my first initial. As I was playing with the lines, I realized that it looked like a standing figure with the cross bar as the waist. I sketched some ideas on how the crossbar could be animated and settled on a character “pulling up his pants.” :)

Overall, I’m pretty happy with this result. I felt that the animation brought the character to life, as if we caught the “A” at an embarrassing moment.

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('A', {
 
  // Enter your name
  author: 'Andre Le',
 
  // Enter a personal website, must have http
  website: 'http://www.andrele.com/',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
 
    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
 
    // Save state of crossbar
    var barLeft = polygon.vertices[3].clone();
    var barRight = polygon.vertices[4].clone();
 
    // Set an initial state
    polygon.scale = 1;
    polygon.translation.y = 0;
    polygon.vertices[3].x = polygon.vertices[0].x;
    polygon.vertices[3].y = polygon.vertices[0].y;
 
    polygon.vertices[4].x = polygon.vertices[2].x;
    polygon.vertices[4].y = polygon.vertices[2].y;
 
    var origApex = polygon.vertices[1].y;
 
    anitype.addTween(polygon.vertices[3], {
      to: { x: barLeft.x,
            y: barLeft.y },
      easing: Anitype.Easing.Elastic.InOut,
      duration: .5,
      start: .1,
      complete: function() {
        anitype.addTween(polygon.vertices[4], {
          to: { x: barRight.x,
                y: barRight.y },
          easing: Anitype.Easing.Elastic.InOut,
          duration: .5,
          start: .5
        });
      }
    });
 
    anitype.addTween(polygon.translation, {
      to:{ y: -100 },
      easing: Anitype.Easing.Sinusoidal.Out,
      duration: .2,
      start: .1,
      complete: function() {
        anitype.addTween(polygon.translation, {
          to:{ y: 0 },
          easing: Anitype.Easing.Bounce.Out,
          duration: .3,
          start: .3
        });
      }
    });
 
    anitype.addTween(polygon.vertices[1], {
      to:{ y: origApex+120 },
      easing: Anitype.Easing.Sinusoidal.Out,
      duration: .2,
      start: 0,
      complete: function() {
        anitype.addTween(polygon.vertices[1], {
          to:{ y: origApex },
          easing: Anitype.Easing.Sinusoidal.Out,
          duration: .2,
          start: .1
        });
      }
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});

Process Photos:

IMG_1063

My favorite AniType character would have to be the one below. The K looks as if it was an self assembling IKEA unit and crams a lot of motion into a 1 second loop. It reminds me of a pocket sized spy gadget that transforms into something completely different.