For my anitype character, I chose the letter Z. Originally, I wanted to do S because it’s the first letter of my name. However, I couldn’t figure out how to work with curves. So I decided to do Z since it’s pretty much an angular version of S. Plus, Z is an interesting letter since it’s used less frequently in common words.

As you can see from my sketch below, I originally wanted to make a jumping Z. However, I ran into a bug where it wasn’t jumping as I intended for some reason, so instead I made more of an unintended snapping upwards motion.

The actual letter:

[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDAoM_dCww/” width=”620″, height=”360″]

My favorite anitype letter was this one:

http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgICArKmaCgw/

It was similar to my original idea for S (I wanted to make a snake-like motion for S), so I appreciate that this person achieved what I could not.

Code for my Z:

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

 // Enter your name
 author: 'Sylvia Kosowski',

 // Enter a personal website, must have http
 website: 'http://www.sylviakosowski.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 an initial state
 //polygon.scale = 0;
 
 var p0 = points[0];
 var p1 = points[1];
 var p2 = points[2];
 var p3 = points[3];
 
 p0.x = -100;
 p0.y = 250;
 p1.y = 250;
 p2.y = 350;
 p3.y = 350;
 
 anitype.addTween(p1, {
 to: {y: 200},
 easing: Anitype.Easing.Sinusoidal.Out,
 duration: 0.25, // Value from 0 - 1
 start: 0, // Value from 0 - 1
 complete: function() {
 anitype.addTween(p1, {
 to: {x: 150, y: -50},
 easing: Anitype.Easing.Bounce.Out,
 duration: 0.4,
 start: 0.3,
 });
 }
 }); 
 
 anitype.addTween(p0, {
 to: {y: 200},
 easing: Anitype.Easing.Sinusoidal.Out,
 duration: 0.2, // Value from 0 - 1
 start: 0.2, // Value from 0 - 1
 complete: function() {
 anitype.addTween(p0, {
 to: {x: -50, y: -250},
 easing: Anitype.Easing.Sinusoidal.Out,
 duration: 0.25,
 start: 0.3,
 });
 }
 }); 
 
 // Return your polygon wrapped in a group.
 return two.makeGroup(polygon);

 }