# Wanfang Diao

## 23 Jan 2014

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