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