I chose to animate L because few people did it, and it does not have Bezier curves which I have a lot of trouble with. I initially tried to animate 9, but it was too curvy for me.
I decided to approach anitype by thinking of the letters as shapes, and that turned into how L would move if it was a creature. Hence, I decided to animate it awkwardly attempting to move, then falling down. My original design has the legs move in a more wheel-like motion, and has it attempt to climb the wall. After I started working, I realized that the one second time constraint made that not really possible, so I decided to go for a more traditional walk. So I did not end up with my original intended design, but it was too unfeasible anyway.
link: http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDAgpiMCQw/
[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDAgpiMCQw/” width=”620″ height=”360″]
public class Hello {
/**
* Register your submission and choose a character
* For more information check out the documentation
* http://anitype.com/documentation
*/
Anitype.register('L', {
// Enter your name
author: 'dave',
// Enter a personal website, must have http
website: 'http://anitype.com/',
// Make your animation here
construct: function(two, points) {
// Reference to instance
var anitype = this;
// Create a Two.Polygon
var polygon = anitype.makePolygon(points);
// set up vars
var p1 = polygon.vertices[0];
var p2 = polygon.vertices[1];
var p3 = polygon.vertices[2];
// Set an initial state
polygon.scale = 1;
p1.set(-50,200);
p2.set(300,50);
p3.set(350,200);
var op1x = p1.x; var op1y = p1.y;
var op2x = p2.x; var op2y = p2.y;
var op3x = p3.x; var op3y = p3.y;
// Create the animation via a tween
// front leg
anitype.addTween(p1, {
to: { x: op1x-100, y: op1y-200 },//step up 1
duration: 0.09,
start: 0,
complete: function(){
anitype.addTween(p1, {//step down 1
to: { x: op1x-150, y: op1y },
//easing: Anitype.Easing.Elastic.Out,
duration: 0.14,
start: 0.07,
complete: function(){
anitype.addTween(p1, {//step up 2
to: { x: op1x-160, y: op1y-75 },
duration: 0.09,
start: 0.4,
complete: function(){
anitype.addTween(p1, {// step down 2
to: { x: op1x-200, y: op1y },
easing: Anitype.Easing.Elastic.Out,
duration: 0.14,
start: 0.55,
});
}
});
}
});
}
});
// middle body
anitype.addTween(p2, {
to: { x: op2x-150, y: op2y },
duration: 0.4,
start: 0,
complete: function(){
anitype.addTween(p2, {
to: { x: op2x-200, y: op2y+150 },
easing: Anitype.Easing.Elastic.Out,
duration: 0.4,
start: 0.55
});
}
});
// back leg
anitype.addTween(p3, {
to: { x: op3x-50, y: op3y-50 },
duration: 0.07,
start: 0.25,
complete: function(){
anitype.addTween(p3, {
to: { x: op3x-100, y: op3y },
duration: 0.07,
start: 0.33,
complete: function(){
anitype.addTween(p3, {
to: { x: op3x-105, y: op3y },
duration: 0.2,
start: 0.7
});
}
});
}
});
// Return your polygon wrapped in a group.
return two.makeGroup(polygon);
}
});
}
My favorite Anitype is this asterisk. Its movement is memorizing, makes me want to stare at it for hours.
Sketch: