Category Archives: 12-AniType-Letters

Shan Huang

23 Jan 2014

V

My assigned letter is V. V is not quite my letter because it’s not in my name and I’m not particularly fond of the shape. V has a sharp and cold feel. I wanted to preserve that feel and therefore restrained myself from bending V into curves. I have the two arms of V fall from the middle with slightly different paces and bounce a little when they arrive at their final positions.


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

O

For letter of my choice I chose O. O reminds me of circular things like orbits and it looks like a planet too. So I have a small circle revolve around O along the path of a horizontal O.


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

Sketches

sketches-v

 

sketches-o

My initial designs for these letters were a bit more complex but then the parametric object project sucked all my power. In moments of despair I decided to keep my designs simple (and hopefully elegant!). I’m pretty happy with what I came up with. It didn’t take more than a few lines of code but the movement makes sense for the letters.

Code

code for V

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('V', {
 
  // Enter your name
  author: 'Shan Huang',
 
  // Enter a personal website, must have http
  website: 'http://shan-huang.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 p0 = polygon.vertices[0].clone();
    var p2 = polygon.vertices[2].clone();
    polygon.vertices[0].set(0, -370);
    polygon.vertices[2].set(0, -370);
 
    // Create the animation via a tween
    anitype.addTween(polygon.vertices[0], {
      to: { x: p0.x, y: p0.y },
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.9, // Value from 0 - 1
      start: 0        // Value from 0 - 1
    });
 
    anitype.addTween(polygon.vertices[2], {
      to: { x: p2.x, y: p2.y },
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.6, // Value from 0 - 1
      start: 0        // Value from 0 - 1
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});

code for O

/**
* Register your submission and choose a character
* For more information check out the documentation
* http://anitype.com/documentation
*/
Anitype.register('O', {
 
// Enter your name
author: 'Shan Huang',
 
// Enter a personal website, must have http
website: 'http://shan-huang.com/',
 
// Make your animation here
construct: function(two, points) {
 
// Reference to instance
var anitype = this;
 
// Create a Two.Polygon
var polygon = anitype.makePolygon(points).subdivide();
// Set an initial state
var circle = two.makeCircle(0, 0, 5);
 
// Create the animation via a tween
anitype.addTick(function(percent){
var perc = percent - Math.floor(percent);
var idx = Math.floor(percent*polygon.vertices.length)%polygon.vertices.length;
if(perc < 0.21125 || perc > 0.35){
circle.translation.y = polygon.vertices[idx].x / 2;
circle.translation.x = polygon.vertices[idx].y;
}
else{
circle.translation.y = -10000;
circle.translation.x = -10000;
}
});
 
// Return your polygon wrapped in a group.
return two.makeGroup([polygon, circle]);
 
}
 
});

Collin Burger

23 Jan 2014


My interpretation of the letter ‘I’ was inspired by the word “I” in English. While brainstorming about this letter, I began to think more about the word “I” and wrote “I thinks very highly of itself.” So I animated an “I” that does not think it  should be bound by its 1000×1000 pixel box. I looked at Max Hawkins’ code for ‘I’ to figure out how to get extra points from the ones given and fill them to form a polygon that resembles an ‘I’.

My Code for ‘I’:

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

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('I', {
  // Enter your name
  author: 'Collin Burger',
  // Enter a personal website, must have http
  website: 'http://github.com/cyburgee',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
 
    _.each(points, function(p) { console.log(p.x)});
    _.each(points, function(p) { console.log(p.y)});
    var left = _.map(points, function(p){ return p.clone(); });
    for (var i = 0; i < left.length; i++){
      left[i].x = -1;
    }
    var right = _.map(points, function(p){ return p.clone(); });
    for (var k = 0; k < right.length; k++){
      right[k].x = 1;
    }
 
    right.reverse();
    var all = left.concat(right);
    right.reverse();
 
    anitype.addTick(function(t) {
      for (var i = 0; i < all.length; i++){
      if(all[i].x < 0)
        all[i].x = -470*Math.sin(t*Math.PI) + 1;
      else
        all[i].x = 470*Math.sin(t*Math.PI) - 1;
 
      if (all[i].y < 0)
        all[i].y = -337 - 130*Math.sin(t*Math.PI);
      else
        all[i].y = 337 + 130*Math.sin(t*Math.PI);
      }
 
      polygon.fill = polygon.stroke;
 
    },Anitype.Easing.Cubic.Out);
    //Back, Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quartic, Quintic, and Sinusoidal.
 
     var polygon = new Two.Polygon(all,true);
 
    var ret = two.makeGroup(polygon);
 
    // Return your polygon wrapped in a group.
    return ret;
  }
 
});

Max Hawkins’ Code for ‘I’

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

Anitype.register('I', {
  author: 'Max Hawkins',
  website: 'http://maxhawkins.me/',
 
  construct: function(two, glyph) {
    var anitype = this;
 
    var points = anitype.makePolygon(glyph)
      .subdivide()
      .vertices;
    points = _.rest(points);
 
    var left = _.map(points, function(p){ return p.clone(); });
    var right = _.map(points, function(p){ return p.clone(); });
 
    right.reverse();
    var all = left.concat(right);
    right.reverse();
 
    function sinOffset(time, max, min, point, i) {
        var offset = (i / points.length) + time;
        var osc = Math.sin(offset * Math.PI * 2) / 2 + 0.5;
        point.x = osc * (max - min) + min;
    }
 
    anitype.addTick(function(t){
 
      var leftOffset = _.partial(sinOffset, t, -30, -50);
      _.each(left, leftOffset);
 
      var rightOffset = _.partial(sinOffset, t, 30, 50);
      _.each(right, rightOffset);
 
      polygon.fill = polygon.stroke;
    });
 
    var polygon = new Two.Polygon(all, true);
 
    return two.makeGroup(polygon);
  }
 
});


I chose to animate ‘4’ because it only had one previous entry and I thought it could use some attention.  After testing some geometric transformations, I settled on animating the phrase in the popular lexicon that represents arithmetic, which is “Two plus two equals 4.”  While I don’t think it’s a very interesting take on animating the number, I still wanted to see if I could conjure up other characters using Anitype and incorporate them into the representation of ‘4.’

My Code for ‘4’:

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('4', {
 
  // Enter your name
  author: 'Collin Burger',
 
  // Enter a personal website, must have http
  website: 'http://www.github.com/cyburgee/',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
    var anchors2 = [];
    var too = Anitype.getEndpoints('2',1000);
    var i = 0;
    _.each(too, function(p) {
      //var comm = Two.Commands.move;
      if (i > 0 && i < 5)         anchors2.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y,            p.controls.right.x, p.controls.right.y, Two.Commands.curve));       else if (i >= 5)
        anchors2.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.line));
      else
        anchors2.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.move));
      //console.log(anchors2.pop())
      i ++;
    });
 
    var anchorsPlus = [];
    var plus = Anitype.getEndpoints('+',1000);
    i = 0;
    _.each(plus, function(p){
      if (i == 1 || i == 3)
        anchorsPlus.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.line));
      else
        anchorsPlus.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.move));
      i++;
    });
 
    var anchorsEqBottom = [];
 
    var yEq = 100;
    var xEq = 150;
    anchorsEqBottom.push(new Two.Anchor(-xEq,-yEq, -xEq,-yEq, -xEq,-yEq, Two.Commands.line));
    anchorsEqBottom.push(new Two.Anchor(xEq,-yEq, xEq,-yEq, xEq,-yEq, Two.Commands.line));
 
    var anchorsEqTop = [];
 
    anchorsEqTop.push(new Two.Anchor(-xEq,yEq, -xEq,yEq, -xEq, yEq, Two.Commands.line));
    anchorsEqTop.push(new Two.Anchor(xEq,yEq, xEq,yEq, xEq,yEq, Two.Commands.line));
 
    /*_.each(plus, function(p){
      if (i == 1 || i == 3)
        anchorsPlus.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.line));
      else
        anchorsPlus.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.move));
      i++;
    });*/
 
    var pointsOrig = _.map(points, function(p) {return p.clone();});
 
    var poly4 = anitype.makePolygon(points);
    var poly2 = anitype.makePolygon(anchors2);
    var polyPlus = anitype.makePolygon(anchorsPlus);
    var polyEqBottom = anitype.makePolygon(anchorsEqBottom);
    var polyEqTop = anitype.makePolygon(anchorsEqTop);
 
    poly4.scale = 0;
    poly2.scale = 1;
    polyPlus.scale = 0;
    polyEqBottom.scale = 0;
    polyEqTop.scale = 0;
 
    var duration = 0.15;
    var beginAni = 0;
    var secondAni = beginAni + duration;// + 0.01;
    var thirdAni = secondAni + duration;// + 0.01;
    var fourthAni = thirdAni + duration;// + 0.01;
    var fifthAni = fourthAni + duration;// + 0.01;
    var sixthAni = fifthAni + duration;// + 0.01;
    //console.log(fifthAni);
    //var ease = Anitype.Easing.Circular
 
    //show first 2
    anitype.addTween(poly2, {
      from: {scale: 1},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: 0, // Value from 0 - 1
      start: beginAni,
      complete: function(){
        anitype.addTween(poly2, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start: secondAni
        });
      }
    });
 
    //show plus
    anitype.addTween(polyPlus, {
      from: {scale : 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Elastic.Out,
      duration: duration, // Value from 0 - 1
      start: secondAni,
      complete: function(){
        anitype.addTween(polyPlus, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start: thirdAni
        });
      }
    });
 
    //show second 2
    anitype.addTween(poly2, {
      from: {scale: 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: duration, // Value from 0 - 1
      start: thirdAni,
      complete: function(){
        anitype.addTween(poly2, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start: fourthAni
        });
      }
    });
 
    //show eq
    anitype.addTween(polyEqTop, {
      from: {scale: 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: duration, // Value from 0 - 1
      start: fourthAni,
      complete: function(){
        anitype.addTween(polyEqTop, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start:fifthAni 
        });
      }
    });
    anitype.addTween(polyEqBottom, {
      from: {scale: 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: duration, // Value from 0 - 1
      start: fourthAni,
      complete: function(){
        anitype.addTween(polyEqBottom, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start: fifthAni
        });
      }
    });
 
    //show 4
    anitype.addTween(poly4, {
      from: {scale: 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: duration, // Value from 0 - 1
      start: fifthAni
    });
 
    // Return your polygon wrapped in a group.
    //var group = two.makeGroup(poly2);
    var group = two.makeGroup(poly2);
    group.add(polyPlus);
    group.add(polyEqTop);
    group.add(polyEqBottom);
    group.add(poly4);
 
    return group;
 
  }
 
});

Notes:
type_1 type_2 type_3

Kevan Loney

23 Jan 2014

Howdy all!

For this assignment I was given “O” and I chose “L” to accompany it.

At the planning stages I knew I either wanted to the O to deflate or explode. Ultimately I ended up with it exploding like a big bang. This concept concludes with the explosion forming into a mountain like structure. Showing how it made world and the countless stars around us.

“O”

http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgICAlt-CCww/



shortcode

AniType_Sketch

 

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



shortcode

The L was a bit less poetic in a since. I just wanted to have fun and have it fall as if it were a stick with no support. Then it hits an invisible wall to slide backwards.

This was my first time using Java Script, so it posed a bit of a learning curve, but the project turned out to be a lot of fun in the end!

 The code is provided below:

 

Code O:

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

 
/**
* Register your submission and choose a character
* For more information check out the documentation
* http://anitype.com/documentation
* "0" that explodes into a mountain.
* "O What a Mountain!"
*/
Anitype.register('O', {
 
// Enter your name
author: 'kdloney',
// Make your animation here
construct: function(two, points) {
 
// Reference to instance
var anitype = this;
 
// Create a Two.Polygon
var polygon = anitype.makePolygon(points);
 
var p0 = polygon.vertices[0];
var p1 = polygon.vertices[1];
var p2 = polygon.vertices[2];
var p3 = polygon.vertices[3];
var p4 = polygon.vertices[4];
 
// Set an initial state
polygon.scale = 0;
 
// Create the animation via a tween
anitype.addTween(polygon, {
to: { scale: 1.5},
easing: Anitype.Easing.Elastic.Out,
duration: 3, // Value from 0 - 1
start: .1 // Value from 0 - 1
});
 
anitype.addTween(polygon.vertices[0], {
to: { y: -400, x: -500 },
easing: Anitype.Easing.Quadratic.Out,
duration: .2, // Value from 0 - 1
start: .2, // Value from 0 - 1
complete: function(){
anitype.addTween(polygon.vertices[0], {
to: {x:-600, y: 250 },
easing: Anitype.Easing.Quadratic.InOut,
duration: 0.3, // Value from 0 - 1
start: 0.25,
});
}
});
 
anitype.addTween(polygon.vertices[4], {
to: { y: -400, x: 500 },
easing: Anitype.Easing.Quadratic.Out,
duration: .2, // Value from 0 - 1
start: .2, // Value from 0 - 1
complete: function(){
anitype.addTween(polygon.vertices[4], {
to: {x:600, y: 250 },
easing: Anitype.Easing.Quadratic.InOut,
duration: 0.3, // Value from 0 - 1
start: 0.25,
});
}
});
anitype.addTween(polygon.vertices[2], {
to: { y: 0, x: 0 },
easing: Anitype.Easing.Quadratic.Out,
duration: .3, // Value from 0 - 1
start: .35, // Value from 0 - 1
complete: function(){
anitype.addTween(polygon.vertices[2], {
to: {x:0 , y: -500 },
easing: Anitype.Easing.Quadratic.InOut,
duration: 0.4, // Value from 0 - 1
start: 0.5,
});
}
});
// Return your polygon wrapped in a group.
return two.makeGroup(polygon);
 
}
 
});

 

Code L:

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

 
/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 *
 * I was inspired by the "M" by Quasimondo.
 * In this animation, I wanted the "L" to look like a mouth chomping down, 
 * and then closing whole out of satifaction.
 */
Anitype.register('L', {  // Enter your name
  author: 'KLoney',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
 
    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
 
        // Define vertices
    //var p0 = polygon.vertices[0];
    //var p1 = polygon.vertices[1];
    //var p2 = polygon.vertices[2];
 
    var px1 = polygon.vertices[0].x + 760;
    var py1 = polygon.vertices[0].y;
    var px2 = polygon.vertices[1].x + 50;
    var py2 = polygon.vertices[1].y;
    var px3 = px1 - px2;
    var py3 = py1 - py2;
 
 
    // Set an initial state
    polygon.scale = 1;
    polygon.translate = {x: 1000};
 
    // Create the animation via a tween
 
 
    anitype.addTween(polygon.vertices[0], {
      to: { y: 0, x: px1 - 0 },
      easing: Anitype.Easing.Sinusoidal.Out,
      duration: 0.23, // Value from 0 - 1
      start: .1,      // Value from 0 - 1
         complete: function(){
         anitype.addTween(polygon.vertices[0], {
          to: { y: py1 , x : px1},
          easing: Anitype.Easing.Sinusoidal.InOut,
          duration: 0.2, // Value from 0 - 1
          start: 0.3        // Value from 0 - 1
        });
 
      }
    });
 
    anitype.addTween(polygon.vertices[2], {
      to: { y: py2 + 0, x: px2 +550 },
      easing: Anitype.Easing.Sinusoidal.Out,
      duration: 0.23, // Value from 0 - 1
      start: .1,      // Value from 0 - 1
      complete: function(){
         anitype.addTween(polygon.vertices[0], {
          to: { y: py2 , x : px2 +500},
          easing: Anitype.Easing.Sinusoidal.InOut,
          duration: 0.2, // Value from 0 - 1
          start: 0.25        // Value from 0 - 1
        });
 
      }
    });
 
   anitype.addTween(polygon.vertices[1], {
      to: { y: py2 + 0, x: px2 -350 },
      easing: Anitype.Easing.Sinusoidal.Out,
      duration: 0.23, // Value from 0 - 1
      start: .54,      // Value from 0 - 1
      complete: function(){
         anitype.addTween(polygon.vertices[0], {
          to: { y: py2 , x : px2 -350},
          easing: Anitype.Easing.Sinusoidal.InOut,
          duration: 0.2, // Value from 0 - 1
          start: 0.45        // Value from 0 - 1
        });
 
      }
    });
 
 
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});

Yingri Guan

23 Jan 2014

I think Letter Z reminds me of really strong motion, almost like swiftly swinging the arms. Sometimes I also associate it with lightening as the shape gives its sharp look.


This letter is referencing Karadox‘s work of Letter A on AniType. I was looking for a source code to generate a swift motion and came across his work.

image-2

 

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

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('Z', {
 
  // Enter your name
  author: 'Yingri Guan',
 
  // Enter a personal website, must have http
  website: 'http://yingriguan.com/',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
    this.duration = 1000;
 
    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
    // Set an initial state
    polygon.vertices[0].set(-200, 345);
    polygon.vertices[1].set(-200, -345); // top
    polygon.vertices[2].set(200, -345); // right bottom
    polygon.vertices[3].set(-200, 345); // left short arm
    //polygon.vertices[4].set(215, 328); // left short arm
    // Create the animation via a tween
 
    anitype.addTween(polygon.vertices[0], {
      to: { x: -200, y: -345 },
      easing: Anitype.Easing.Bounce.Out,
      duration: 1, // Value from 0 - 1
      start: 0,   
    });
 
    anitype.addTween(polygon.vertices[1], {
      to: { x: 200, y: -345 },
      easing: Anitype.Easing.Bounce.Out,
      duration: 1, // Value from 0 - 1
      start: 0,   
    });
 
    anitype.addTween(polygon.vertices[2], {
      to: { x: -200, y: 345 },
      easing: Anitype.Easing.Bounce.Out,
      duration: 1, // Value from 0 - 1
      start: 0,   
    });
 
    anitype.addTween(polygon.vertices[3], {
      to: { x: 200, y: 345 },
      easing: Anitype.Easing.Bounce.Out,
      duration: 1, // Value from 0 - 1
      start: 0,        // Value from 0 - 1
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});

I picked “8” because it symbolizes good fortune in Chinese culture. With the advent of Chinese New Year, I am inspired to create a dancing “8” to celebrate this auspicious festival.  This was an accident as I was playing with Quasimondo‘s code on AniType.


image-1

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

/**
 Anitype.register('8', {
 
  author: 'Yingri Guan',
 
  website: 'http://yingriguan.com/',
 
  construct: function(two, points) {
 
    var anitype = this;
 
    var polygon = anitype.makePolygon(points);
    polygon.subdivide(5);
   var circles = _.map(polygon.vertices, function(v) {
          return two.makeCircle(0, 0, 12);
        });
 
    anitype.addTick(function(percent){
 
    var t = [];
    var l = polygon.vertices.length;
 
     for ( var i = 0; i < l; i++ )
     {
       var p = (percent * 8) % 1;
       var v1 =polygon.vertices[i];
      var v2 = polygon.vertices[(i+8)%l];
        t[i] = {x: v1.x + p * ( v2.x - v1.x),
                y: v1.y + p * ( v2.y - v1.y)};
      }
 
      for ( i = 0; i < circles.length; i++ )
      {
        var c =circles[i];
        c.translation.x = t[i].x;
        c.translation.y = t[i].y;
      }
 
    });
 
    return two.makeGroup(circles);
  }
 
});

Celine Nguyen

23 Jan 2014

 Animating ‘G’


Here is my ‘G’ on AniType. I’m very fond of G’s in general because different typefaces take very different approaches to where the horizontal bar is placed, if there’s a spur, what the spur looks like, &c.  Since the G looks very similar to an O with a segment popped down, my initial sketches were to have the letter start out as an O, with one segment wobbling back and forth and snapping down into place to make a G.

AniType G sketches

I realized for the kind of wobbliness I wanted to do, a second of animation time wasn’t quite enough (and I also couldn’t get the particular motion I wanted). So I decided to switch to a flipping motion instead of a wobbling motion, with the horizontal bar starting in its down position and then flipping out and in.

Once I’d made this, I realized that the G’s horizontal bar section looked a bit like a pinball-machine lever hitting a ball, or a man politely doffing his hat. I really wanted to include a secondary object with the letter to make it more characterized, but animating a hat shape to follow the movement of the letterform segment was slightly difficult, and the animations didn’t line up very well. It is a bit cleaner this way, though, and more useful as an actual letter.

/**
/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('G', {
 
  author: 'Celine Nguyen',
  website: 'http://celinenguyen.com/',
 
  construct: function(two, points) {
    var anitype = this;
    var polygon = anitype.makePolygon(points);
 
    var easingType = Anitype.Easing.Quadratic.In;
    var closedX = points[0].x - 10;
    var closedY = points[0].y;
    var insideX = closedX - 100;
    var insideY = closedY + 55;
    var outsideX = closedX + 110;
    var outsideY = insideY;
    var downX = points[5].x;
    var downY = points[5].y;
    var flipDuration = 0.1;
 
    anitype.addTween(points[5], {
      to: {x: closedX, y: closedY},
      easing: easingType,
      duration: flipDuration,
      start: flipDuration,
      complete: function() {
        anitype.addTween(points[5], {
          to: {x: outsideX, y: outsideY},
          easing: easingType,
          duration: flipDuration,
          start: 2 * flipDuration,
          complete: function() {
            anitype.addTween(points[5], {
              to: {x: closedX, y: closedY},
              easing: easingType,
              duration: flipDuration,
              start: 3 * flipDuration,
              complete: function() {
                anitype.addTween(points[5], {
                  to: {x: downX, y: downY},
                  easing: easingType,
                  duration: flipDuration,
                  start: 4 * flipDuration,
                });
              }
            });
          }
        });
      }
    });
 
    return two.makeGroup(polygon);
  }
 
});

Animating ‘N’


Here is my ‘N’ on AniType. I chose to do the N because at the time there was only one other N entry, and it looked a little lonely. I also liked that N’s can be very compressible and rearrangeable (3 straight lines of approximately similar length, easily separable). I ended up coming up with an idea pretty quickly with a simple animation mechanism: having the two legs of the N unfold from the diagonal.

AniType N sketchees

Largely because I had a pretty well-defined and simple idea at the beginning (and also because I was tired out from wrangling my G) this turned out to be reasonable straightforward to do.

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('N', {
 
  author: 'Celine Nguyen',
  website: 'http://celinenguyen.com/',
 
  construct: function(two, points) {
    var anitype = this;
    var polygon = anitype.makePolygon(points);
    polygon.rotation = Math.PI;
 
    var x0f = polygon.vertices[0].x;
    var y0f = polygon.vertices[0].y;
    var x1f = polygon.vertices[1].x;
    var y1f = polygon.vertices[1].y;
    var x2f = polygon.vertices[2].x;
    var y2f = polygon.vertices[2].y;
    var x3f = polygon.vertices[3].x;
    var y3f = polygon.vertices[3].y;
 
    polygon.vertices[0].set(0, y2f);
    polygon.vertices[1].set(0, y1f);
    polygon.vertices[2].set(0, y2f);
    polygon.vertices[3].set(0, y1f);
 
    anitype.addTween(polygon.vertices[0], {
      to: {x: x2f, y: y2f},
      duration: 0.2,
      start: 0.1,
      complete: function() {
        anitype.addTween(polygon.vertices[0], {
          to: {x: x0f, y: y0f},
          duration: 0.2,
          start: 0.3
        });
      }
    });
    anitype.addTween(polygon.vertices[1], {
      to: {x: x1f, y: y1f},
      duration: 0.2,
      start: 0.1,
    });
    anitype.addTween(polygon.vertices[2], {
      to: {x: x2f, y: y2f},
      duration: 0.2,
      start: 0.1
    });
    anitype.addTween(polygon.vertices[3], {
      to: {x: x1f, y: y1f},
      duration: 0.2,
      start: 0.1,
      complete: function() {
        anitype.addTween(polygon.vertices[3], {
          to: {x: x3f, y: y3f},
          duration: 0.2,
          start: 0.3
        });
      }
    });
 
    return two.makeGroup(polygon);
  }
});

Favorite AniType letter


It’s pretty hard for me to choose a favorite, but I love Greg Kepler‘s T. I think the animation is very clean and gives the letter a ton of personality. It’s also something that really relies on the characteristics and structure of a T to work well.

Andre Le

23 Jan 2014


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

The first letter I animated was the letter B, which was assigned to me. I wanted to emphasize the whimsical curves of the B. I kept this one pretty simple, as animation using this library was new to me. I didn’t quite achieve what I wanted with this one. I felt that it could’ve used a little more personality.

Github Link

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('B', {
 
  // Enter your name
  author: 'Andre Le',
 
  // Enter a personal website, must have http
  website: 'http://andrele.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 spine = anitype.makePolygon([polygon.vertices[0], polygon.vertices[1]]);
 
    polygon = polygon.subdivide();
 
    // Set an initial state
    polygon.scale = 1;
 
    var time = {value:0};
    anitype.addTween(time, {
      to: { value: 1 },
      easing: Anitype.Easing.Sinusoidal.InOut,
      duration: .8, 
      start: 0,
      update:function(){
        if (this.value < (1/2)) {
          polygon.beginning = this.value * 2;
        } else {
          polygon.beginning = 0;
          polygon.ending = (this.value - 0.5) * 2;
        }
      }
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(spine, polygon);
 
  }
 
});


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

I chose the letter A as my second letter because it happens to be my first initial. As I was playing with the lines, I realized that it looked like a standing figure with the cross bar as the waist. I sketched some ideas on how the crossbar could be animated and settled on a character “pulling up his pants.” :)

Overall, I’m pretty happy with this result. I felt that the animation brought the character to life, as if we caught the “A” at an embarrassing moment.

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('A', {
 
  // Enter your name
  author: 'Andre Le',
 
  // Enter a personal website, must have http
  website: 'http://www.andrele.com/',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
 
    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
 
    // Save state of crossbar
    var barLeft = polygon.vertices[3].clone();
    var barRight = polygon.vertices[4].clone();
 
    // Set an initial state
    polygon.scale = 1;
    polygon.translation.y = 0;
    polygon.vertices[3].x = polygon.vertices[0].x;
    polygon.vertices[3].y = polygon.vertices[0].y;
 
    polygon.vertices[4].x = polygon.vertices[2].x;
    polygon.vertices[4].y = polygon.vertices[2].y;
 
    var origApex = polygon.vertices[1].y;
 
    anitype.addTween(polygon.vertices[3], {
      to: { x: barLeft.x,
            y: barLeft.y },
      easing: Anitype.Easing.Elastic.InOut,
      duration: .5,
      start: .1,
      complete: function() {
        anitype.addTween(polygon.vertices[4], {
          to: { x: barRight.x,
                y: barRight.y },
          easing: Anitype.Easing.Elastic.InOut,
          duration: .5,
          start: .5
        });
      }
    });
 
    anitype.addTween(polygon.translation, {
      to:{ y: -100 },
      easing: Anitype.Easing.Sinusoidal.Out,
      duration: .2,
      start: .1,
      complete: function() {
        anitype.addTween(polygon.translation, {
          to:{ y: 0 },
          easing: Anitype.Easing.Bounce.Out,
          duration: .3,
          start: .3
        });
      }
    });
 
    anitype.addTween(polygon.vertices[1], {
      to:{ y: origApex+120 },
      easing: Anitype.Easing.Sinusoidal.Out,
      duration: .2,
      start: 0,
      complete: function() {
        anitype.addTween(polygon.vertices[1], {
          to:{ y: origApex },
          easing: Anitype.Easing.Sinusoidal.Out,
          duration: .2,
          start: .1
        });
      }
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});

Process Photos:

IMG_1063

My favorite AniType character would have to be the one below. The K looks as if it was an self assembling IKEA unit and crams a lot of motion into a 1 second loop. It reminds me of a pocket sized spy gadget that transforms into something completely different.


Anitype Letters

Character R


I wanted to create a visualization that was differed from one loop to another because a 1 second loop duration is fairly short and made some of my animations feel too repetitive.  So I decided to include randomness to each polygon vertex. The output looked very funny, which I liked, but the randomness was harsh and looked very frantic. In order to create a smoother animation, I tried many types of easing and settled on sinusoidal easing.  I also played around with timing to get a smooth transition.

Rsketches

 

Character !


I wanted my second character to be an animation based on the shape of the character. After some sketching, I realized that the ‘!’ character consisted of a dot and line, which could resemble a small character playing jump rope. My main inspiration was the idea that characters form words and communication, in a sense they are alive. So it would be interesting if we portrayed this liveliness, personality and playfulness in the letter’s animation.

!sketches

Wanfang Diao

23 Jan 2014

7970C6C7-9D25-4CC4-92EB-41B2C55E587B

3 sticks connected by one point at the center. That’s my understanding of Y. So I made the point as an fixed axis and 3 sticks roll around it. The coordinate seems confusing to me at first, after several trials and adjustment, the result is a  little bit different then I thought but approach the sense of 3D rolling in my mind.


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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('Y', {
 
  // Enter your name
  author: 'Wanfang',
 
  // Enter a personal website, must have http
  website: 'http://dropr.com/wanfangdiao',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
 
    // Change duration of animation
    //this.duration = 2000;
 
    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
 
   //console.log(polygon.vertices);
 
    // Set an initial state
 
    anitype.addTween(polygon.vertices[0], {
      to: { x: -186  },
      easing: Anitype.Easing.Quadratic.InOut,
      duration: 0.25, // Value from 0 - 1
      start: 0,        // Value from 0 - 1
      complete: function(){
        anitype.addTween(polygon.vertices[0], {
          to: {x:109 },
          easing: Anitype.Easing.Quadratic.InOut,
          duration: 0.25, // Value from 0 - 1
          start: 0.26,
          complete: function(){
            anitype.addTween(polygon.vertices[0], {
              to: {x: -288 },
              easing: Anitype.Easing.Quadratic.InOut,
              duration: 0.25, // Value from 0 - 1
              start: .51,
            complete: function(){
              anitype.addTween(polygon.vertices[0], {
                to: {x: -186 },
                easing: Anitype.Easing.Quadratic.InOut,
                duration: 0.24, // Value from 0 - 1
                start: .76
              });
            }
            });
          }
        });
      }
    });
     anitype.addTween(polygon.vertices[2], {
      to: { x: 186  },
      easing: Anitype.Easing.Quadratic.InOut,
      duration: 0.25, // Value from 0 - 1
      start: 0,        // Value from 0 - 1
      complete: function(){
        anitype.addTween(polygon.vertices[2], {
          to: {x:-109 },
          easing: Anitype.Easing.Quadratic.InOut,
          duration: 0.25, // Value from 0 - 1
          start: 0.26,
          complete: function(){
            anitype.addTween(polygon.vertices[2], {
              to: {x: 288 },
              easing: Anitype.Easing.Quadratic.InOut,
              duration: 0.25, // Value from 0 - 1
              start: .51,
            complete: function(){
              anitype.addTween(polygon.vertices[2], {
                to: {x: 186 },
                easing: Anitype.Easing.Quadratic.InOut,
                duration: 0.24, // Value from 0 - 1
                start: .76
              });
            }
            });
          }
        });
      }
    });
    anitype.addTween(polygon.vertices[4], {
      to: { x: -150  },
      easing: Anitype.Easing.Quadratic.InOut,
      duration: 0.25, // Value from 0 - 1
      start: 0,        // Value from 0 - 1
      complete: function(){
        anitype.addTween(polygon.vertices[4], {
          to: {x:0 },
          easing: Anitype.Easing.Quadratic.InOut,
          duration: 0.25, // Value from 0 - 1
          start: 0.26,
          complete: function(){
            anitype.addTween(polygon.vertices[4], {
              to: {x: 150 },
              easing: Anitype.Easing.Quadratic.InOut,
              duration: 0.25, // Value from 0 - 1
              start: .51,
            complete: function(){
              anitype.addTween(polygon.vertices[4], {
                to: {x: 0 },
                easing: Anitype.Easing.Quadratic.InOut,
                duration: 0.24, // Value from 0 - 1
                start: .76
              });
            }
            });
          }
        });
      }
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});

W looks like wave. So my idea is to make it soft and shake like a string. As a beginner of javascript, I tried to find a similar example first. I began with forking the work of Chris as shown below. After being familiar with the code structure, I found that the reason it looks like 2 string but one is that the formula of vert.x is a simple cos. Sp I changed the main  formula to 2*cos(t)-cos(2*t);I adjust the several parameters until it looks like one string waving by holding two ends.



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

/**
* Register your submission and choose a character
* For more information check out the documentation
* http://anitype.com/documentation
*/
Anitype.register('W', {
 
author: 'Wanfang Diao',
 
website: 'http://dropr.com/wanfangdiao',
 
construct: function(two, points) {
 
var anitype = this;
 
var polygon = anitype.makePolygon(points).subdivide();
var dimensions = polygon.getBoundingClientRect();
var angleStep = (Math.PI * 2 / polygon.vertices.length);
 
_.each(polygon.vertices, function(vert, i){
var time = { value:0 };
vert.oX = vert.x;
vert.oAngle = Math.cos((vert.x / dimensions.width / 2) + (i*angleStep));
anitype.addTween(time, {
to: { value: 0.5 },
easing: Anitype.Easing.Linear.None,
duration: 0.74,
start: 0.25,
update: function() {
var angle = vert.oAngle + (this.value * Math.PI * 4);
vert.x = (Math.cos(angle)-Math.cos(2*angle) )* vert.oX;
}
});
});
 
return two.makeGroup(polygon);
}
});

		


		

								

	


	

		

			

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



		


		

								

	


	

		

			

				
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.