## 22 Jan 2014

The letter I was given was H. I’m not entirely close friends with h. Sure, it’s the second letter in my first name, but it’s significance is combined with C to form the “ch” sound. More words that I use have H to supplement a sound than to start a sound. But what does H stand for? Helicopter! Here is my AniType of H:

During the drawing stage, I initially wanted the H to fly in from the corner. However, after working with the space and the size of the original H, I figured it better to just spin the sides.

The next letter I chose to work on was G. G is a pretty interesting written letter. The capital G has so many places for serifs and can be written in so many ways. Don’t even get me started on a lowercase g. But G can be simple, too. It can be as simple as an O with an open door. So that is the AniType that I created:

For both of these letters, I pretty much came across my intended design with the exception of the H’s entire translation being left out. For a moment, I had the H’s sides spinning more quickly (3pi/540degrees) as I had imagined in my head, but I realized that with just 1 full rotation, you could imagine different angles that the H might be facing.

My favorite AniType letter that I came across was Quasimondo’s 8. It reminds me of a snowman and watching the squash and stretch of those circles is wonderful.

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 Anitype.register('G', {   // Enter your name author: 'chanamonster',   // Enter a personal website, must have http website: 'http://chanamon.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 pt0 = points[0].clone(); var pt1 = points[1].clone(); var pt2 = points[2].clone(); var pt3 = points[3].clone(); var pt4 = points[4].clone(); var pt5 = points[5].clone();   var curve = anitype.makePolygon([pt0, pt1, pt2, pt3, pt4]); curve.subdivide(); curve.ending = 0;   pt4 = new Two.Anchor(pt4.x, pt4.y); var lip = anitype.makePolygon([pt4, pt5]); lip.vertices[1].set(pt4.x, pt4.y); lip.ending = 0;     //draw curve anitype.addTween(curve, { to: { scale: 1, ending: 1 }, duration: 0.5, start: 0.01, })   //draw lip anitype.addTween(lip, { to: { ending: 1 }, duration: 0.1, start: 0.45, }) anitype.addTween(lip.vertices[1], { to: { x: 175, y: -175}, duration: 0.1, start: 0.45, complete: function(){ //move lip down anitype.addTween(lip.vertices[1], { to: { x: 0, y: 10 }, easing: Anitype.Easing.Bounce.Out, duration: 0.25, start: 0.7, }); } })   // Return your polygon wrapped in a group. return two.makeGroup(curve, lip);   }
 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 Anitype.register('H', {   // Enter your name author: 'chanamonster',   // Enter a personal website, must have http website: 'http://chanamon.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 = 0;   // Create the animation via a tween   // for (var i = 0; i < = 5; i++){ // var x1 = polygon.vertices[1].x; // var y1 = polygon.vertices[1].y; // x1 += 100; // y1 += 10; // // polygon.vertices[1].x = x1; // // polygon.vertices[1].y = y1; // anitype.addTween(polygon.vertices[1], { // to: { x: Math.sin(i)*300 +200 }, // rotate 360deg // // easing: Anitype.Easing.Circular, // duration: 0.1, // Value from 0 - 1 // start: 0 // Value from 0 - 1 // }); // }   //variables created with help from Greg Kepler's T var pt0 = points[0].clone(); var pt1 = points[1].clone(); var pt2 = points[2].clone(); var pt3 = points[3].clone(); var pt4 = points[4].clone(); var pt5 = points[5].clone(); var d = polygon.vertices[4].x*-1; //x distance from vertical center to edge of H   //move to rotate around center of line pt0.x += d; pt1.x += d; pt2.x -= d; pt3.x -= d;     var left = anitype.makePolygon([pt0, pt1]); var right = anitype.makePolygon([pt2, pt3]); var center = anitype.makePolygon([pt4, pt5]);   anitype.addTween(left, { to: { rotation: 2*Math.PI }, //rotate 360deg cw easing: Anitype.Easing.Sinusoidal.Out, duration: 0.9, start: 0 });   left.translation.set(-d,0);   anitype.addTween(right, { to: { rotation: 2*Math.PI }, //rotate 360deg cw easing: Anitype.Easing.Sinusoidal.Out, duration: 0.9, start: 0 });   right.translation.set(d, 0);     // Return your polygon wrapped in a group. return two.makeGroup(left, center, right);   }