Austin McCasland

22 Jan 2014

The letter which was assigned to me is E. For this anitype letter, I wanted the character to remain legible – therefore complete abstraction was ruled out. I thought there was a unique opportunity with the letter E in that when it is mirrored there is a relatively small difference in the horizontal lines that it uses. I used this to create a looping animation which remains legible, but also takes on the appearance of a 3d transformation. The character I chose was the number 1. I was interested in seeing what I could do with only two lines. It still reads as a one in context, but I thought the idea of a stick figure walking would be a good test for what two lines could do. I played around with the positions of the leg movement a lot to come up with this repeating loop of the walking 1.

Sketches to come when I can get to my sketchbook tomorrow morning!

The Walking 1 has yet to make it to the published page, waiting on the backend to catch up with me, link to come Copy paste the source to see it!


/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('E', {
 
  // Enter your name
  author: 'Austin McCasland',
 
  // Enter a personal website, must have http
  website: 'http://www.austastic.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 an initial state
    var d = polygon.getBoundingClientRect();
 
    var startVertices= new Array();
 
    //Saves starting vertices
 
    for(i=0; i<polygon .vertices.length;i++) {
      startVertices[i] = polygon.vertices[0];
    }
    console.log(polygon.vertices[5]._x)
 
 
 
 
 
    anitype.addTween(polygon, {
      to: {rotation: Math.PI},
      duration: .3, // Value from 0 - 1
      start: 0,        // Value from 0 - 1
 
      complete:function() {
        //Reverses the top and bottom horizontal lines, moves vertical bar to the left
        anitype.addTween(polygon.vertices[0], {
          to: { x:-175},
 
          duration: .5, // Value from 0 - 1
          start: .5        // Value from 0 - 1
        });
         anitype.addTween(polygon.vertices[3], {
          to: { x:-175},
 
          duration: .5, // Value from 0 - 1
          start: .5        // Value from 0 - 1
        });
        anitype.addTween(polygon.vertices[1], {
          to: { x:175},
 
          duration: .5, // Value from 0 - 1
          start: .5        // Value from 0 - 1
        });
         anitype.addTween(polygon.vertices[2], {
          to: { x:175},
 
          duration: .5, // Value from 0 - 1
          start: .5        // Value from 0 - 1
        });
        anitype.addTween(polygon.vertices[4], {
          to: { x:175},
 
          duration: .5, // Value from 0 - 1
          start: .5        // Value from 0 - 1
        });
        anitype.addTween(polygon.vertices[5], {
          to: { x:-15},
 
          duration: .5, // Value from 0 - 1
          start: .5        // Value from 0 - 1
        });
 
      }
 
    });
 
 
 
 
 
    /*anitype.addTween(polygon.vertices[0], {
 
      to: { scale: 1 },
      to: { x: 215, y: 328 },
      easing: Anitype.Easing.Elastic.Out,
      duration: 1, // Value from 0 - 1
      start: 0        // Value from 0 - 1
    });*/
 
    /*
    anitype.addTween(polygon.vertices[0], {
 
      to: { scale: 1 },
      to: { x: 215, y: 328 },
      easing: Anitype.Easing.Elastic.Out,
      duration: 1, // Value from 0 - 1
      start: 0        // Value from 0 - 1
    });*/
 
 
 
 
 
    /*polygon.vertices[0].set(200, 0);
 
    anitype.addTween(polygon.vertices[0], {
 
      to: { scale: 1 },
      to: { x: 215, y: 328 },
      easing: Anitype.Easing.Elastic.Out,
      duration: 1, // Value from 0 - 1
      start: 0        // Value from 0 - 1
    });*/
 
 
 
 
 
 
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
 
});

The Walking 1

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('1', {
 
  // Enter your name
  author: 'Austin McCasland',
 
  // Enter a personal website, must have http
  website: 'http://www.austastic.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 an initial state
    polygon.scale = 1;
 
    console.log(polygon.vertices[2]._y);
 
 
    anitype.addTween(polygon.vertices[0], {
     to: { x:46, y: -205},
 
          duration: .25, // Value from 0 - 1
          start: 0,        // Value from 0 - 1
 
 
      complete:function() {
        anitype.addTween(polygon.vertices[0], {
          to: { x:46, y: 337},
 
          duration: .25, // Value from 0 - 1
          start: .25,        // Value from 0 - 1
 
 
          //Gait 1
          complete:function() {
            anitype.addTween(polygon.vertices[0], {
            to: { x:-250, y: 337},
 
            duration: .25, // Value from 0 - 1
            start: .5,        // Value from 0 - 1
             complete:function() {
                anitype.addTween(polygon.vertices[0], {
                to: { x:-46, y: -205},
 
                duration: .25, // Value from 0 - 1
                start: .75,        // Value from 0 - 1
 
              });
            }
          });
          }
        });
      }
 
    });
 
 
   anitype.addTween(polygon.vertices[2], {
     to: { x:-250, y: 337},
 
          duration: .25, // Value from 0 - 1
          start: 0,        // Value from 0 - 1
 
 
      complete:function() {
        anitype.addTween(polygon.vertices[2], {
          to: { x:-46, y: -205},
 
          duration: .25, // Value from 0 - 1
          start: .25,        // Value from 0 - 1
 
 
          //Gait 1
          complete:function() {
            anitype.addTween(polygon.vertices[2], {
            to: { x:46, y: -205},
 
            duration: .25, // Value from 0 - 1
            start: .5,        // Value from 0 - 1
             complete:function() {
                anitype.addTween(polygon.vertices[2], {
                to: { x:46, y: 337},
 
                duration: .25, // Value from 0 - 1
                start: .75,        // Value from 0 - 1
 
              });
            }
          });
          }
        });
      }
 
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});

I was quite happy with the results of my anitype letters. They are simple and came out just as I’d intended them to. My favortie anitype letter is the wiggly A that rotates and “jellyfishes” its legs. It just has so much character to it that it’s hard not to love.