Chanamon Ratanalert

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.


IMG_20140122_231019005 (1)

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);
 
  }