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