# 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 &lt; left.length; i++){ left[i].x = -1; } var right = _.map(points, function(p){ return p.clone(); }); for (var k = 0; k &lt; 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 &lt; all.length; i++){ if(all[i].x &lt; 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 &lt; 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 &gt; 0 &amp;&amp; i &lt; 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 &gt;= 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: