I animated the letter ‘W’ because I liked that it was symmetrical. My goal was to make it look like the lower vertices were being pulled down by an invisible hand. I wish the animation could take longer but I think the effect still comes across. I initially had some trouble understanding how to program the letters but after looking at some particularly well documented code I was able to figure out how to create the basic animation I envisioned.  (special thanks to people with well organized + documented code!)

http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDAguaCCgw/edit

Here’s what it looks like:

Here’s my code:

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

// Enter your name
author: 'Rachel',

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

//code adapted from Bryce Summers 'M' anitype submission

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

// Reference to instance
var anitype = this;

this.duration = 1000;

// Create a Two.Polygon
var polygon = anitype.makePolygon(points);
// Set an initial state
var x0 = polygon.vertices[0].x;
var y0 = polygon.vertices[0].y;

var x1 = polygon.vertices[1].x;
var y1 = polygon.vertices[1].y;

var x2 = polygon.vertices[2].x;
var y2 = polygon.vertices[2].y;

var x3 = polygon.vertices[3].x;
var y3 = polygon.vertices[3].y;

var x4 = polygon.vertices[4].x;
var y4 = polygon.vertices[4].y;

var v0 = polygon.vertices[0];
var v1 = polygon.vertices[1];
var v2 = polygon.vertices[2];
var v3 = polygon.vertices[3];
var v4 = polygon.vertices[4];

//set easing
var easing = Anitype.Easing.Elastic.Out;

//first point
anitype.addTween(v0, {
to: { x: x0 , y: y0},
duration: 1,
start: 0,

complete: function(){
anitype.addTween(v0, {
to: { x: x0, y: y0},
duration: .5, // Value from 0 - 1
start: 0.5 // Value from 0 - 1
})}

});
//second point
anitype.addTween(v1, {
to: { x: x1, y: y0},
easing: easing,
duration: 0.5,
start: 0,

complete: function(){
anitype.addTween(v1, {
to: { x: x1, y: y1 + 400},
easing: easing,
duration: 1, // Value from 0 - 1
start: 0.5 // Value from 0 - 1
})}

});
//third point
anitype.addTween(v2, {
to: { x: x2, y: y0},
easing: easing,
duration: 0.5,
start: 0,

complete: function(){
anitype.addTween(v2, {
to: { x: x2, y: y2 },
easing: easing,
duration: 1, // Value from 0 - 1
start: 0.5 // Value from 0 - 1
})}

});
//fourth point
anitype.addTween(v3, {
to:{ x: x3, y: y0},
easing: easing,
duration: 0.5,
start: 0,

complete: function(){
anitype.addTween(v3, {
to: { x: x3, y: y3 + 400},
easing: easing,
duration: 1, // Value from 0 - 1
start: 0.5 // Value from 0 - 1
})}
});
//fifth point
anitype.addTween(polygon.vertices[4], {
to: { x: x4, y: y4},
duration: 0.5,
start: 0,

complete: function(){
anitype.addTween(v4, {
to: { x: x4, y: y4},
easing: easing,
duration: .5, // Value from 0 - 1
start: 0.5 // Value from 0 - 1
})}

});

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

}

});

When I first started to choose character, I just thought one of my initials should be the best — however, when I browsed letter Q’s gallery, I was surprised, that nobody used the circular feature to design their animation. That’s why I did the following sketch.

When I was implementing this design, it was occurred to me that the bar of letter Q just should not stay right in the middle. Then I changed the position of the bar to middle to the right.

Here is the animation.

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

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

    // Enter your name
    author: 'chenliang',

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

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

        // Reference to instance
        var anitype = this;

        // Create a Two.Polygon
        var circle = anitype.makePolygon(points.slice(0,5));
        var bar = anitype.makePolygon(points.slice(5,7));

        // Create the animation via a tween
        anitype.addTween(bar, {
            from: { scale: 1.0, rotation: 0 },
            to: { scale: 1.0, rotation: -Math.PI/8 },
            easing: Anitype.Easing.Elastic.Out,
            duration: 0.5, // Value from 0 - 1
            start: 0.5 // Value from 0 - 1
        });
 
        anitype.addTween(circle, {
            from: { scale: 1.0, rotation: 0 },
            to: { scale: 1.0, rotation: Math.PI },
            easing: Anitype.Easing.Elastic.InOut,
            duration: 0.5, // Value from 0 - 1
            start: 0 // Value from 0 - 1
        });

        // Return your polygon wrapped in a group.
        return two.makeGroup(circle, bar);
    
    }

});

I didn’t achieve the initial design, but I think the current one might be better.

I love this one Shan Huang did.

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

It simulated a star and its planet really well.

I like letters. Letters are fun. So are teeth (unless someone is eating you). So for this assignment, I chose to channel the letter O’s feral nature and gave it teeth.
[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDA2Z2QCQw/” width=”620″ height=”360″]

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

When I first approached this assignment, I was fascinated by the one letter animation process. In my mind, animating letters was always done in the form of taking a word and giving it a property, such as, the word “dog” would behave like a dog, and the word “fly” would grow wings and move around a screen.

I ended up choosing the letter O and began to think of what kind of properties it would have. Automatically, I thought of it as a mouth, but I designed it in a way so that it would behave like a predator. At first, it looks harmless, but after a moment, it grows long teeth that form the letter O.

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

  // Enter your name
  author: 'LValley',

  // Enter a personal website, must have http
  website: 'http://digital-love.squarespace.com/',

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

    // Reference to instance
    var anitype = this;
    //var x = 0;
    

    var line_1 = two.makeLine(-700,329,-215,-329);
    var line_2 = two.makeLine(-600,329, -215, -329);
    var line_3 = two.makeLine(-500,329, -215, -329);
    var line_4 = two.makeLine(-400,329,-215,-329);
    var line_5 = two.makeLine(-300,329, -215, -329);
    var line_6 = two.makeLine(-200,329, -215, -329);
    var line_7 = two.makeLine(-100,329,-215,-329);
    var line_8 = two.makeLine(0,329, -215, -329);
    var line_9 = two.makeLine(100,329, -215, -329);
    var line_10 = two.makeLine(200,329,-215,-329);
    var line_11 = two.makeLine(300,329, -215, -329);
    var line_12 = two.makeLine(400,329, -215, -329);
    var line_13 = two.makeLine(500,329, -215, -329);
    var line_14 = two.makeLine(600,329,-215,-329);
    var line_15 = two.makeLine(700,329, -215, -329);
    var line_16 = two.makeLine(800,329, -215, -329);
    var line_17 = two.makeLine(900,329,-215,-329);
    var line_18 = two.makeLine(1000,329, -215, -329);
    var line_19 = two.makeLine(1100,329, -215, -329);
 
    var line_20 = two.makeLine(-700, 0,-215,-329);
    var line_21 = two.makeLine(-600, 0, -215, -329);
    var line_22 = two.makeLine(-500, 0, -215, -329);
    var line_23 = two.makeLine(-400,0,-215,-329);
    var line_24 = two.makeLine(-300,0, -215, -329);
    var line_25 = two.makeLine(-200,0, -215, -329);

    var line_33 = two.makeLine(600,0,-215,-329);
    var line_34 = two.makeLine(700,0, -215, -329);
    var line_35 = two.makeLine(800,0, -215, -329);
    var line_36 = two.makeLine(900,0,-215,-329);
    var line_37 = two.makeLine(1000,0, -215, -329);
    var line_38 = two.makeLine(1100,0, -215, -329);

    var line_39 = two.makeLine(-700, -329,-215,-329);

    var line_57 = two.makeLine(1100,-329, -215, -329);

     var line_58 = two.makeLine(-700, -658,-215,-329);

    var line_76 = two.makeLine(1100,-658, -215, -329);

    var line_77 = two.makeLine(-700, -987,-215,-329);
    var line_78 = two.makeLine(-600, -987, -215, -329);
     var line_79 = two.makeLine(-500, -987, -215, -329);
     var line_80 = two.makeLine(-400,-987,-215,-329);

    var line_92 = two.makeLine(800,-987, -215, -329);
    var line_93 = two.makeLine(900,-987,-215,-329);
    var line_94 = two.makeLine(1000,-987, -215, -329);
    var line_95 = two.makeLine(1100,-987, -215, -329);
    //row_6
    var line_96 = two.makeLine(-700, -1316,-215,-329);
    var line_97 = two.makeLine(-600, -1316, -215, -329);
    var line_98 = two.makeLine(-500, -1316, -215, -329);
    var line_99 = two.makeLine(-400, -1316,-215,-329);
    var line_100 = two.makeLine(-300,-1316, -215, -329);
    var line_101 = two.makeLine(-200,-1316, -215, -329);
    var line_102 = two.makeLine(-100,-1316,-215,-329);
    var line_103 = two.makeLine(0,-1316, -215, -329);
    var line_104 = two.makeLine(100,-1316, -215, -329);
    var line_105 = two.makeLine(200,-1316,-215,-329);
    var line_106 = two.makeLine(300,-1316, -215, -329);
    var line_107 = two.makeLine(400,-1316, -215, -329);
    var line_108 = two.makeLine(500,-1316, -215, -329);
    var line_109 = two.makeLine(600,-1316,-215,-329);
    var line_110 = two.makeLine(700,-1316, -215, -329);
    var line_111 = two.makeLine(800,-1316, -215, -329);
    var line_112 = two.makeLine(900,-1316,-215,-329);
    var line_113 = two.makeLine(1000,-1316, -215, -329);
    var line_114 = two.makeLine(1100,-1316, -215, -329);

    line_1.vertices[0].set(0, 450);
    line_1.vertices[1].set(0,350);
    
    //line_2
    line_2.vertices[0].set(0,450);
    line_2.vertices[1].set(0,350);
    
        //line_3
    line_3.vertices[0].set(0,450);
    line_3.vertices[1].set(0,350);

    line_4.vertices[0].set(0,450);
    line_4.vertices[1].set(0,350);
    
    //line_2
    line_5.vertices[0].set(0,450);
    line_5.vertices[1].set(0,350);
    
        //line_3
    line_6.vertices[0].set(0,450);
    line_6.vertices[1].set(0,350);
    
    line_7.vertices[0].set(0, 450);
    line_7.vertices[1].set(0,350);
    
    //line_2
    line_8.vertices[0].set(0,450);
    line_8.vertices[1].set(0,350);
    
        //line_3
    line_9.vertices[0].set(0,450);
    line_9.vertices[1].set(0,350);

    line_10.vertices[0].set(0,450);
    line_10.vertices[1].set(0,350);
    
    //line_2
    line_11.vertices[0].set(0,450);
    line_11.vertices[1].set(0,350);
    
        //line_3
    line_12.vertices[0].set(0,450);
    line_12.vertices[1].set(0,350);
    
    //line_3
    line_13.vertices[0].set(0,450);
    line_13.vertices[1].set(0,350);

    line_14.vertices[0].set(0,450);
    line_14.vertices[1].set(0,350);
    
    //line_2
    line_15.vertices[0].set(0,450);
    line_15.vertices[1].set(0,350);
    
        //line_3
    line_16.vertices[0].set(0,450);
    line_16.vertices[1].set(0,350);
    
    line_17.vertices[0].set(0, 450);
    line_17.vertices[1].set(0,350);
    
    //line_2
    line_18.vertices[0].set(0,450);
    line_18.vertices[1].set(0,350);
    
        //line_3
    line_19.vertices[0].set(0,450);
    line_19.vertices[1].set(0,350);

        //line_3
    line_22.vertices[0].set(0,450);
    line_22.vertices[1].set(0,350);

        //line_3
    line_23.vertices[0].set(0,450);
    line_23.vertices[1].set(0,350);

    line_24.vertices[0].set(0,450);
    line_24.vertices[1].set(0,350);
    
    //line_2
    line_25.vertices[0].set(0,450);
    line_25.vertices[1].set(0,350);
    
    //     //line_3
    line_20.vertices[0].set(0,450);
    line_20.vertices[1].set(0,350);
    
    line_21.vertices[0].set(0, 450);
    line_21.vertices[1].set(0,350);

    //line_3
    line_33.vertices[0].set(0,450);
    line_33.vertices[1].set(0,350);

    line_34.vertices[0].set(0,450);
    line_34.vertices[1].set(0,350);
    
    //line_2
    line_35.vertices[0].set(0,450);
    line_35.vertices[1].set(0,350);


     line_39.vertices[0].set(0,450);
     line_39.vertices[1].set(0,350);
    
    // //line_2
    line_36.vertices[0].set(0,450);
    line_36.vertices[1].set(0,350);
    
    //     //line_3
    line_37.vertices[0].set(0,450);
    line_37.vertices[1].set(0,350);

    //     //line_3
    line_38.vertices[0].set(0,450);
    line_38.vertices[1].set(0,350);


    
    line_57.vertices[0].set(0, 450);
    line_57.vertices[1].set(0,350);
    
    // //line_2
     line_58.vertices[0].set(0,450);
     line_58.vertices[1].set(0,350);
    
    
    //     //line_3
    line_76.vertices[0].set(0,450);
    line_76.vertices[1].set(0,350);
    
    line_77.vertices[0].set(0, 450);
    line_77.vertices[1].set(0,350);
    
    //line_2
    line_78.vertices[0].set(0,450);
    line_78.vertices[1].set(0,350);


    line_79.vertices[0].set(0,450);
    line_79.vertices[1].set(0,350);

    line_80.vertices[0].set(0,450);
    line_80.vertices[1].set(0,350);
    
    
    line_92.vertices[0].set(0,450);
    line_92.vertices[1].set(0,350);
    
    //     //line_3
    line_93.vertices[0].set(0,450);
    line_93.vertices[1].set(0,350);

    line_94.vertices[0].set(0,450);
    line_94.vertices[1].set(0,350);
    
    //line_2
    line_95.vertices[0].set(0,450);
    line_95.vertices[1].set(0,350);
    
        //line_3
    line_96.vertices[0].set(0,450);
    line_96.vertices[1].set(0,350);
    
    line_97.vertices[0].set(0, 450);
    line_97.vertices[1].set(0,350);
    
    //line_2
    line_98.vertices[0].set(0,450);
    line_98.vertices[1].set(0,350);
    
        //line_3
    line_99.vertices[0].set(0,450);
    line_99.vertices[1].set(0,350);

    line_100.vertices[0].set(0,450);
    line_100.vertices[1].set(0,350);
    
    //line_2
    line_101.vertices[0].set(0,450);
    line_101.vertices[1].set(0,350);
    
        //line_3
    line_102.vertices[0].set(0,450);
    line_102.vertices[1].set(0,350);
    
    //line_3
    line_103.vertices[0].set(0,450);
    line_103.vertices[1].set(0,350);

    line_104.vertices[0].set(0,450);
    line_104.vertices[1].set(0,350);
    
    //line_2
    line_105.vertices[0].set(0,450);
    line_105.vertices[1].set(0,350);
    
        //line_3
    line_106.vertices[0].set(0,450);
    line_106.vertices[1].set(0,350);
    
    line_107.vertices[0].set(0, 450);
    line_107.vertices[1].set(0,350);
    
    //line_2
    line_108.vertices[0].set(0,450);
    line_108.vertices[1].set(0,350);
    
        //line_3
    line_109.vertices[0].set(0,450);
    line_109.vertices[1].set(0,350);

    line_110.vertices[0].set(0,450);
    line_110.vertices[1].set(0,350);
    
    //line_2
    line_111.vertices[0].set(0,450);
    line_111.vertices[1].set(0,350);
    
        //line_3
    line_112.vertices[0].set(0,450);
    line_112.vertices[1].set(0,350);

        //line_3
    line_113.vertices[0].set(0,450);
    line_113.vertices[1].set(0,350);

    line_114.vertices[0].set(0,450);
    line_114.vertices[1].set(0,350);
    

    
    
     //Create the animation via a tween
    function moveVert(vert, x1, x2, y1, y2,start,duration){
      anitype.addTween(line_5, {
        to: {x :0, y : -1000 },
        easing: Anitype.Easing.Linear.Out,
        update: function() {
          anitype.addTween(vert, {
            to: {x: x2, y:y2},
            easing: Anitype.Easing.Elastic.Out,
            duration: duration,
            start: start
          });
        },
        duration: duration, // Value from 0 - 1
        start: start        // Value from 0 - 1
      });
    }
         //Create the animation via a tween
    function moveVert1(vert, x1, x2, y1, y2,start,duration){
      anitype.addTween(line_3, {
        to: { x: 0, y: 1000 },
        easing: Anitype.Easing.Linear.Out,
        update: function() {
          anitype.addTween(vert, {
            to: {x: x2, y:y2},
            easing: Anitype.Easing.Elastic.Out,
            duration: duration,
            start: start
          });
        },
        duration: duration, // Value from 0 - 1
        start: start        // Value from 0 - 1
      });
    }
    
    //moveVert(line_1.vertices[1],0,215,-329,-329,0,.5);
    //moveVert(line_10.vertices[1],0,-215,-329,-100,.25,.75);
    moveVert(line_3.vertices[1],0,-215,-329,-800,.4,.75);
    moveVert(line_5.vertices[1],0,-215,-329,-250,.4,.45);
    moveVert(line_7.vertices[1],0,-215,-329,70,.2,.75);
    moveVert(line_9.vertices[1],0,-215,-329,250,.2,.75);
    
    moveVert(line_11.vertices[1],0,215,-329,250,.2,.75); 
    moveVert(line_13.vertices[1],0,215,-329,0,.2,.75);
    moveVert(line_15.vertices[1],0,215,-329,-250,.4,.75);
    moveVert(line_17.vertices[1],0,215,-329,-800,.4,.75);
    
    //moveVert(line_19.vertices[1],0,-215,-329,-800,.25,.5);
    moveVert(line_22.vertices[1],0,-215,-329,-250,.5,.75);
    moveVert(line_24.vertices[1],0,-215,-329,70,.5,.75);
    moveVert(line_25.vertices[1],0,-215,-329,250,.5,.75);
    
    moveVert(line_33.vertices[1],0,215,-329,250,.5,.75);
    moveVert(line_34.vertices[1],0,215,-329,0,.5,.75);
    moveVert(line_35.vertices[1],0,215,-329,-250,.5,.75);
    
    //top
    
        //moveVert(line_1.vertices[1],0,215,-329,-329,0,.5);
    //moveVert(line_10.vertices[1],0,-215,-329,-100,.25,.75);
    moveVert(line_104.vertices[0],0,-215,-329,550,.2,.75);
    moveVert(line_106.vertices[0],0,215,-329,550,.2,.75);
    moveVert(line_102.vertices[0],0,-215,-329,700,.2,.75);
    moveVert(line_108.vertices[0],0,215,-329,700,.2,.75);

    moveVert(line_100.vertices[0],0,-215,-329,900,.5,.75);
    moveVert(line_110.vertices[0],0,215,-329,900,.5,.75);
    moveVert(line_98.vertices[0],0,-215,-329,1100,.5,.75);
    moveVert(line_112.vertices[0],0,215,-329,1100,.25,.75);
    
    moveVert(line_78.vertices[0],0,-215,-329, 1300,.4,.75); 
    moveVert(line_94.vertices[0],0,215,-329,1300,.4,.75);

    
    
    // Return your polygon wrapped in a group.
    return two.makeGroup(line_1,line_2, line_3, line_4, line_5, line_6, line_7, line_8, line_9, line_10, line_11, line_12, line_13, line_14, line_15, line_16, line_17, line_18, line_19, line_20, line_21, line_22, line_23,line_24, line_25, line_33, line_34, line_35, line_36, line_37, line_38, line_39, line_57, line_58, line_76, line_77, line_78, line_79, line_80,line_92, line_93, line_94, line_95, line_96, line_97, line_98, line_99, line_100, line_101, line_102, line_103,line_104, line_105, line_106, line_107, line_108, line_109, line_110, line_111, line_112, line_113, line_114);

  }

});

Anitype Javascript Code

For this assignment, I have chosen to animate the letter ‘M’. I chose this letter, because I was originally going to animate the letter ‘B’ to be bird like, but I discovered that Anitype animations can only be 1 second long so I chose a letter that was more directly bird like.

Concept Sketches

Concept Drawings created before I read the documentation.

Revised Sketch

My animation may be viewed at this address:

http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDA_I-VCQw/

Please note: Due to a glitch in the Anitype webservice, I ended up created several duplicate animations, because the window displaying visua feedback for the success of the creation automatically was instantly closed automatically, whereas it should have remained open so that I could read what it had to say

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

Javascript Code

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

  // Enter your name
  author: 'Bryce Summers',

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

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

    // Reference to instance
    var anitype = this;

    this.duration = 1000;

    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
    // Set an initial state
    var x0 = polygon.vertices[0].x;
    var y0 = polygon.vertices[0].y;
    
    var x1 = polygon.vertices[1].x;
    var y1 = polygon.vertices[1].y;
    
    var x2 = polygon.vertices[2].x;
    var y2 = polygon.vertices[2].y;
    
    var x3 = polygon.vertices[3].x;
    var y3 = polygon.vertices[3].y;
    
    var x4 = polygon.vertices[4].x;
    var y4 = polygon.vertices[4].y;
    
    
    var v0 = polygon.vertices[0];
    var v1 = polygon.vertices[1];
    var v2 = polygon.vertices[2];
    var v3 = polygon.vertices[3];
    var v4 = polygon.vertices[4];
    
    
    var val_h = 200;
    var val_v = 200;
    
    var easing  = Anitype.Easing.Sinusoidal.In;
    var easing2 = Anitype.Easing.Sinusoidal.Out;
      
    /*
    polygon.vertices[0].set(x0 - val_h, y0 - val_h);
    polygon.vertices[1].set(x1 - val_h/2, y1 + val_h);
    polygon.vertices[2].set(x2, y2);
    polygon.vertices[3].set(x3 + val_h/2, y3 + val_h);
    polygon.vertices[4].set(x4 + val_h, y4 - val_h);
      */
      
    // There and back again.
      

    anitype.addTween(v0, {
      to: { x: x0 - val_h, y: y0 - val_h*4},
      easing: easing,
      duration: 0.5,
      start: 0,
      
      complete: function(){
        anitype.addTween(v0, {
          to: { x: x0, y: y0},
          easing: easing2,
          duration: .5, // Value from 0 - 1
          start: 0.5 // Value from 0 - 1        
        })}
      
    });
    
    anitype.addTween(v1, {
      to: { x: x1 + val_h/2, y: y1 + val_h*2},
      easing: easing,
      duration: 0.5,
      start: 0,
      
      complete: function(){
        anitype.addTween(v1, {
          to: { x: x1, y: y1},
          easing: easing2,
          duration: .5, // Value from 0 - 1
          start: 0.5 // Value from 0 - 1        
        })}
      
    });
    
    anitype.addTween(v2, {
      to: { x: x2, y: y2 + val_v*.7 },
      easing: easing,
      duration: 0.5,
      start: 0,
      
      complete: function(){
        anitype.addTween(v2, {
          to: { x: x2, y: y2},
          easing: easing2,
          duration: .5, // Value from 0 - 1
          start: 0.5 // Value from 0 - 1        
        })}
        
        
    });
    
    anitype.addTween(v3, {
      to: { x: x3 - val_h/2, y: y3 + val_h*2 },
      easing: easing,
      duration: 0.5,
      start: 0,
      
      complete: function(){
        anitype.addTween(v3, {
          to: { x: x3, y: y3},
          easing: easing2,
          duration: .5, // Value from 0 - 1
          start: 0.5 // Value from 0 - 1        
        })}
    });
    
    anitype.addTween(polygon.vertices[4], {
      to: { x: x4 + val_h, y: y4 - val_h*4 },
      easing: easing,
      duration: 0.5,
      start: 0,
      
      complete: function(){
        anitype.addTween(v4, {
          to: { x: x4, y: y4},
          easing: easing2,
          duration: .5, // Value from 0 - 1
          start: 0.5 // Value from 0 - 1        
        })}
        
    });
    
    
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);

  }

});

I originally intended to make a letter ‘B’, but decided instead to make a flapping letter ‘M’. I think I came close to my desired design, but I probably would have liked a bit more circular motion in the wing flapping.

My favorite anitype character that I came across was this one:

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

I like how it finds an isomorphism between a graph representing a spiral and a graph representing a ‘3’. It also remind me of winding numbers and various mathematics ideas such as the following: