rlciavar

26 Jan 2015

I animated the letter ‘W’ because I liked that it was symmetrical. My goal was to make it look like the lower vertices were being pulled down by an invisible hand. I wish the animation could take longer but I think the effect still comes across. I initially had some trouble understanding how to program the letters but after looking at some particularly well documented code I was able to figure out how to create the basic animation I envisioned.  (special thanks to people with well organized + documented code!)

http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDAguaCCgw/edit

Here’s what it looks like:

anitype_W

Here’s my code:

/**
* Register your submission and choose a character
* For more information check out the documentation
* http://anitype.com/documentation
*/
Anitype.register('W', {

// Enter your name
author: 'Rachel',

// Enter a personal website, must have http
website: 'http://www.rachelciavarella.com',

//code adapted from Bryce Summers 'M' anitype submission

// Make your animation here
construct: function(two, points)
{

// Reference to instance
var anitype = this;

this.duration = 1000;

// Create a Two.Polygon
var polygon = anitype.makePolygon(points);
// Set an initial state
var x0 = polygon.vertices[0].x;
var y0 = polygon.vertices[0].y;

var x1 = polygon.vertices[1].x;
var y1 = polygon.vertices[1].y;

var x2 = polygon.vertices[2].x;
var y2 = polygon.vertices[2].y;

var x3 = polygon.vertices[3].x;
var y3 = polygon.vertices[3].y;

var x4 = polygon.vertices[4].x;
var y4 = polygon.vertices[4].y;

var v0 = polygon.vertices[0];
var v1 = polygon.vertices[1];
var v2 = polygon.vertices[2];
var v3 = polygon.vertices[3];
var v4 = polygon.vertices[4];

//set easing
var easing = Anitype.Easing.Elastic.Out;

//first point
anitype.addTween(v0, {
to: { x: x0 , y: y0},
duration: 1,
start: 0,

complete: function(){
anitype.addTween(v0, {
to: { x: x0, y: y0},
duration: .5, // Value from 0 - 1
start: 0.5 // Value from 0 - 1
})}

});
//second point
anitype.addTween(v1, {
to: { x: x1, y: y0},
easing: easing,
duration: 0.5,
start: 0,

complete: function(){
anitype.addTween(v1, {
to: { x: x1, y: y1 + 400},
easing: easing,
duration: 1, // Value from 0 - 1
start: 0.5 // Value from 0 - 1
})}

});
//third point
anitype.addTween(v2, {
to: { x: x2, y: y0},
easing: easing,
duration: 0.5,
start: 0,

complete: function(){
anitype.addTween(v2, {
to: { x: x2, y: y2 },
easing: easing,
duration: 1, // Value from 0 - 1
start: 0.5 // Value from 0 - 1
})}

});
//fourth point
anitype.addTween(v3, {
to:{ x: x3, y: y0},
easing: easing,
duration: 0.5,
start: 0,

complete: function(){
anitype.addTween(v3, {
to: { x: x3, y: y3 + 400},
easing: easing,
duration: 1, // Value from 0 - 1
start: 0.5 // Value from 0 - 1
})}
});
//fifth point
anitype.addTween(polygon.vertices[4], {
to: { x: x4, y: y4},
duration: 0.5,
start: 0,

complete: function(){
anitype.addTween(v4, {
to: { x: x4, y: y4},
easing: easing,
duration: .5, // Value from 0 - 1
start: 0.5 // Value from 0 - 1
})}

});

// Return your polygon wrapped in a group.
return two.makeGroup(polygon);

}

});