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