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