Haris Usmani

22 Jan 2014

Letter Assigned: L
Letter Chosen: Z

From the time I learned I got the letter L, I know I wanted it to act like either a golf club or a hockey stick- So I started sketching and discovered I could use perspective to my advantage. I familiarized myself with the documentation and basically used Vertice Tweens with the realistic Easing applied to it- pretty simple approach.

notes-usmani


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

For the second letter, I imagined I’ll flip over the Z repeatedly but while working on it I made it appear as the letter I started with. It seemed to make a connection so I decided to go with it, fine tuning the animation times.


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

My favorite AniType letter (from the ones so far posted!) is sbarton272’s Q. It’s different from all others, in the way that its most laid-back and classy- every other entry is pretty quick and flashy.

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

Anitype.register('L', {
 
  // Enter your name
  author: 'Haris Usmani', 
 
  //Title: Strike the Hockey Stick
  //Technique: Simple Vertice Tween
 
  // Enter a personal website, must have http
  website: 'http://harisusmani.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;
 
    var iniX_v1=polygon.vertices[1].x;
    var iniY_v1=polygon.vertices[1].y;
    var iniX_v2=polygon.vertices[2].x;
    var iniY_v2=polygon.vertices[2].y;
 
    // Create the animation via a tween
    anitype.addTween(polygon.vertices[1], {
      to: { y: iniY_v1-300, x: iniX_v1-150 }, //Take Aim
      easing: Anitype.Easing.Elastic.Out,
      duration: 0.2, // Val ue from 0 - 1
      start: 0.0,        // Value from 0 - 1
      complete: function(){
            anitype.addTween(polygon.vertices[1], {
            to: { y: iniY_v1-50, x: iniX_v1 }, //Hit 1
            easing: Anitype.Easing.Quadratic.In,
            duration: 0.30, // Val ue from 0 - 1
            start: 0.25,        // Value from 0 - 1
        complete: function(){
              anitype.addTween(polygon.vertices[1], {
              to: { y: iniY_v1-150, x: iniX_v1+100 }, //Hit 2
              easing: Anitype.Easing.Elastic.In,
              duration: 0.2, // Val ue from 0 - 1
              start: 0.35,        // Value from 0 - 1
          complete: function(){
                anitype.addTween(polygon.vertices[1], {
                to: { y: iniY_v1, x: iniX_v1 }, //Return
                easing: Anitype.Easing.Quadratic.Out,
                duration: 0.1, // Val ue from 0 - 1
                start: 0.9        // Value from 0 - 1
            });
            }
          });
          }
        });
        }
    });
 
    anitype.addTween(polygon.vertices[2], {
      to: { y: iniY_v2-250, x: iniX_v2+10 }, //Take Aim
      easing: Anitype.Easing.Elastic.Out,
      duration: 0.2, // Val ue from 0 - 1
      start: 0.0,        // Value from 0 - 1
      complete: function(){
            anitype.addTween(polygon.vertices[2], {
            to: { y: iniY_v2-50, x: iniX_v2 }, //Hit 1
            easing: Anitype.Easing.Quadratic.In,
            duration: 0.30, // Val ue from 0 - 1
            start: 0.25,        // Value from 0 - 1
        complete: function(){
              anitype.addTween(polygon.vertices[2], {
              to: { y: iniY_v2-120, x: iniX_v2-10 }, //Hit 2
              easing: Anitype.Easing.Elastic.In,
              duration: 0.2, // Val ue from 0 - 1
              start: 0.35,        // Value from 0 - 1
          complete: function(){
                anitype.addTween(polygon.vertices[2], {
                to: { y: iniY_v2, x: iniX_v2 }, //Return
                easing: Anitype.Easing.Quadratic.Out,
                duration: 0.1, // Val ue from 0 - 1
                start: 0.9        // Value from 0 - 1
            });
            }
          });
          }
        });
        }
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

Anitype.register('Z', {
 
  // Enter your name
  author: 'Haris Usmani',
 
  // Enter a personal website, must have http
  website: 'http://harisusmani.com/',
 
  //Title: Is it a Z or a L?
 
  // 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;
 
    var iniX_v0=polygon.vertices[0].x;
    var iniY_v0=polygon.vertices[0].y;
    var iniX_v1=polygon.vertices[1].x;
    var iniY_v1=polygon.vertices[1].y;
    var iniX_v2=polygon.vertices[2].x;
    var iniY_v2=polygon.vertices[2].y;
    var iniX_v3=polygon.vertices[3].x;
    var iniY_v3=polygon.vertices[3].y;
 
    // Create the animation via a tween
    anitype.addTween(polygon.vertices[1], {
      to: { x: iniX_v0 }, //Take Aim
      easing: Anitype.Easing.Elastic.Out,
      duration: 0.3, // Val ue from 0 - 1
      start: 0.2,        // Value from 0 - 1
      complete: function(){
            anitype.addTween(polygon.vertices[2], {
            to: { x: iniX_v2 }, //Hit 1
            easing: Anitype.Easing.Quadratic.In,
            duration: 0.2, // Val ue from 0 - 1
            start: 0.4,        // Value from 0 - 1
        complete: function(){
              anitype.addTween(polygon.vertices[1], {
              to: { y: iniY_v1-150, x: iniX_v1+100 }, //Hit 2
              easing: Anitype.Easing.Elastic.In,
              duration: 0.2, // Val ue from 0 - 1
              start: 0.6,        // Value from 0 - 1
          complete: function(){
                anitype.addTween(polygon.vertices[1], {
                to: { y: iniY_v1, x: iniX_v1 }, //Return
                easing: Anitype.Easing.Quadratic.Out,
                duration: 0.5, // Val ue from 0 - 1
                start: 0.5        // Value from 0 - 1
            });
            }
          });
          }
        });
        }
    });
 
    anitype.addTween(polygon.vertices[2], {
      to: { x: iniX_v2+10 }, //Take Aim
      easing: Anitype.Easing.Elastic.Out,
      duration: 0.2, // Val ue from 0 - 1
      start: 0.4,        // Value from 0 - 1
      complete: function(){
            anitype.addTween(polygon.vertices[2], {
            to: { y: iniY_v2-50, x: iniX_v2 }, //Hit 1
            easing: Anitype.Easing.Quadratic.In,
            duration: 0.30, // Val ue from 0 - 1
            start: 0.25,        // Value from 0 - 1
        complete: function(){
              anitype.addTween(polygon.vertices[2], {
              to: { y: iniY_v2-120, x: iniX_v2-10 }, //Hit 2
              easing: Anitype.Easing.Elastic.In,
              duration: 0.2, // Val ue from 0 - 1
              start: 0.35,        // Value from 0 - 1
          complete: function(){
                anitype.addTween(polygon.vertices[2], {
                to: { y: iniY_v2, x: iniX_v2 }, //Return
                easing: Anitype.Easing.Quadratic.Out,
                duration: 0.1, // Val ue from 0 - 1
                start: 0.9        // Value from 0 - 1
            });
            }
          });
          }
        });
        }
    });
 
    // Create the animation via a tween
    anitype.addTween(polygon, {
      to: { scale: 1 },
      easing: Anitype.Easing.Elastic.Out,
      duration: 0.33, // Value from 0 - 1
      start: 0        // Value from 0 - 1
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});