# 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.