# 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

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