dave

19 Jan 2015

I chose to animate L because few people did it, and it does not have Bezier curves which I have a lot of trouble with. I initially tried to animate 9, but it was too curvy for me.

I decided to approach anitype by thinking of the letters as shapes, and that turned into how L would move if it was a creature. Hence, I decided to animate it awkwardly attempting to move, then falling down. My original design has the legs move in a more wheel-like motion, and has it attempt to climb the wall. After I started working, I realized that the one second time constraint made that not really possible, so I decided to go for a more traditional walk. So I did not end up with my original intended design, but it was too unfeasible anyway.

link: http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDAgpiMCQw/

[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDAgpiMCQw/” width=”620″ height=”360″]

 

public class Hello {
/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('L', {

  // Enter your name
  author: 'dave',

  // Enter a personal website, must have http
  website: 'http://anitype.com/',

  // Make your animation here
  construct: function(two, points) {

    // Reference to instance
    var anitype = this;

    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
    
    // set up vars
    var p1 = polygon.vertices[0];
    var p2 = polygon.vertices[1];
    var p3 = polygon.vertices[2];
    
    // Set an initial state
    polygon.scale = 1;    
    p1.set(-50,200);
    p2.set(300,50);
    p3.set(350,200);
    
    var op1x = p1.x; var op1y = p1.y;
    var op2x = p2.x; var op2y = p2.y;
    var op3x = p3.x; var op3y = p3.y;

    // Create the animation via a tween
    // front leg
    
    anitype.addTween(p1, {
      to: { x: op1x-100, y: op1y-200 },//step up 1
      duration: 0.09,
      start: 0,
      complete: function(){
        anitype.addTween(p1, {//step down 1
          to: { x: op1x-150, y: op1y },
          //easing: Anitype.Easing.Elastic.Out,
          duration: 0.14,
          start: 0.07,
          complete: function(){
            anitype.addTween(p1, {//step up 2
              to: { x: op1x-160, y: op1y-75 },
              duration: 0.09,
              start: 0.4,
              complete: function(){
                anitype.addTween(p1, {// step down 2
                  to: { x: op1x-200, y: op1y },
                  easing: Anitype.Easing.Elastic.Out,
                  duration: 0.14,
                  start: 0.55,
                });
              }
            });
          }
        });
      }
    });
    
    
    // middle body
    anitype.addTween(p2, {
      to: { x: op2x-150, y: op2y },
      duration: 0.4,
      start: 0,
      complete: function(){
        anitype.addTween(p2, {
          to: { x: op2x-200, y: op2y+150 },
          easing: Anitype.Easing.Elastic.Out,
          duration: 0.4,
          start: 0.55
        });
      }
    });
    
    
    // back leg
    anitype.addTween(p3, {
      to: { x: op3x-50, y: op3y-50 },
      duration: 0.07,
      start: 0.25,
      complete: function(){
        anitype.addTween(p3, {
          to: { x: op3x-100, y: op3y },
          duration: 0.07,
          start: 0.33,
          complete: function(){
            anitype.addTween(p3, {
              to: { x: op3x-105, y: op3y },
              duration: 0.2,
              start: 0.7
            });
          }
        });
      }
    });
    

    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);

  }

});
}

My favorite Anitype is this asterisk. Its movement is memorizing, makes me want to stare at it for hours.

Sketch:

dsf