# Sylvia Kosowski

## 27 Jan 2015

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″]

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
* http://anitype.com/documentation
*/
Anitype.register('Z', {

author: 'Sylvia Kosowski',

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

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;

to: {y: 200},
easing: Anitype.Easing.Sinusoidal.Out,
duration: 0.25, // Value from 0 - 1
start: 0, // Value from 0 - 1
complete: function() {
to: {x: 150, y: -50},
easing: Anitype.Easing.Bounce.Out,
duration: 0.4,
start: 0.3,
});
}
});

to: {y: 200},
easing: Anitype.Easing.Sinusoidal.Out,
duration: 0.2, // Value from 0 - 1
start: 0.2, // Value from 0 - 1
complete: function() {
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);

}```

I selected the letter E — it’s the most commonly used letter in the English language, and it has a nice symmetry to it. I had it rise up from the baseline, with the cross bar shooting in from the left.

Generally, I achieved my design, but I actually wanted the top bar of the “E” rise flat (level) from the baseline, but the right end of it ended up whipping up a just after the left end. It actually makes the E look a little lazy, taking its time to bend upward.

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

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

```Anitype.register('E', {

author: 'Ron Kim',

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

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 = 1;

//Remember original x-coords of vertices to animate
var original_xvertices = [];
original_xvertices[4] = -155;
original_xvertices[5] = 0;

//Remember original y-coords of vertices to animate
var original_yvertices = [];
original_yvertices[1] = -325;
original_yvertices[0] = -325;

// Designate starting location of crossbar (offscreen)
var x_offscreen = -3000;
// Designate starting locations of vertical and top stem
var y_baseline = 335;

polygon.vertices[0].y= y_baseline;
polygon.vertices[1].y= y_baseline;

polygon.vertices[4].x = x_offscreen;
polygon.vertices[5].x = x_offscreen;

// Create the animation via a tween
//Animate the letter
//Have top stem rise up from baseline and whip up
to: {y : original_yvertices[0]},
easing: Anitype.Easing.Sinusoidal.Out,
duration: .5,
start: 0,
update: function(){
to: {y: original_yvertices[1]},
easing: Anitype.Easing.Elastic.Out,
duration: .4,
start: 0.0,
//Then, have crossbar shoot in from left
complete: function(){
to: {x: original_xvertices[4]},
easing: Anitype.Easing.Bounce.Out,
duration: .5,
start: 0.3,
update: function() {
to: {x: original_xvertices[5]},
easing: Anitype.Easing.Bounce.Out,
duration: .5,
start: 0.3
});
}
});
}
});
}
});

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

}

});
```

I like this Anitype character:

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

The motion is quite fluid and a bit mesmerizing.

# sejalpopat

## 27 Jan 2015

I chose the letter Z because I thought that it had the potential to be rearranged into shapes (triangles, rectangles) and my favorite entry so far is of the asterisk that morphs into a pentagon; so this initial interest in transforming the letter into a shape was inspired in part by that entry. Eventually though, after a few of my initial attempts (see below for the Z-morphing-into-triangle), I felt like transforming it into a shape was less interesting than trying to get the motion and rhythm correct.

My initial sketches:

My initial attempts:

I think the morphing into a triangle ends up kind of interesting looking but doesn’t have a good beat/rhythm.

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

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

My final attempt:

I like the timing in this final one; I think I didn’t like that my previous too entries just scaled down at the end of a second and then abruptly became large again. I like that this animation comes “full circle” in a way, and also has more of a “bounce”.

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

The code for this is:

```Anitype.register('Z', {

author: 'sejal',

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

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 = 1;

//name points
var tl = polygon.vertices[0]; //top left
var tr = polygon.vertices[1]; //top right
var bl = polygon.vertices[2]; //bottom left
var br = polygon.vertices[3]; //bottom right

//swing the top and bottom bars into middle diagonal
to: {x: 0, y: 0},
easing: Anitype.Easing.Sinusoidal.Out,
duration: .5,
start: 0
})

to: {x: 0, y:0},
easing: Anitype.Easing.Sinusoidal.Out,
duration: .5,
start: 0
})

to: {x:0},
duration: .5,
start:0
})

to: {x:0},
duration:.5 ,
start:0
})

//rotate whole polygon
to: {rotation: -3, scale: 1},
duration: 1,
start:.4
})

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

}

});

```

# mileshiroo

## 27 Jan 2015

M is the first letter of Miles, my first name. I understand this letter as simple compared to some other letters, even though a serious designer named Katherine tells me that I am wrong, and that in fact “M is one of the most complex letters.”

My animation shows M performing a passionate, dipping motion. I had very few preconceptions for this animation, and figured it out through experimentation.

I like Lauren Valley’s O, because it is surprising, and would be difficult to use in a practical way. I agree with Lauren’s characterization of O as a predatory letter.

Letter on Anitype.

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

```Anitype.register('M', {

author: 'Miles Hiroo',
website: 'http://mileshiroo.info/',
construct: function(two, points) {

var anitype = this;
var polygon = anitype.makePolygon(points);
var sign = Math.random() < 0.5 ? -1 : 1;
polygon.scale = .7;

var w = Anitype.Dimensions.width;
var h = Anitype.Dimensions.height;

var left_leg = polygon.vertices[0];
var right_leg = polygon.vertices[points.length-1];
var middle = polygon.vertices[2];
var left_knee = polygon.vertices[1];
var right_knee = polygon.vertices[3];

from: {x: middle.x, y: middle.y+h*.2},
to: {x: left_knee.x, y: left_knee.y},
easing: Anitype.Easing.Elastic.Out,
duration: 2,
start: .4,
});

from: {x: middle.x, y: middle.y+h*.2},
to: {x: right_knee.x, y: right_knee.y},
easing: Anitype.Easing.Elastic.Out,
duration: 2,
start: .4,
});

from: {y: left_leg.y - w*.2},
to: {y: left_leg.y},
easing: Anitype.Easing.Linear.None,
duration: .2,
start: 0,
});

from: {y: right_leg.y - w*.2},
to: {y: right_leg.y},
easing: Anitype.Easing.Linear.None,
duration: .2,
start: 0,
});

from: {y: h*.8},
to: {y: middle.y},
easing: Anitype.Easing.Elastic.Out,
duration: 2,
start: .2,
});

var xSign = Math.random() < 0.5 ? -1 : 1;

from: {x: middle.x + (Math.random()*w*.3) * xSign},
to: {x: middle.x},
easing: Anitype.Easing.Elastic.Out,
duration: 1,
start: 0,
});

to: { rotation: 0, scale: 1 },
easing: Anitype.Easing.Elastic.Out,
duration: 1,
start: 0
});

return two.makeGroup(polygon);
}
});
```

# Matthew Kellogg – Anitype

M is the first letter of my first name. I would either be using M or K, and M came first (in my name, not the alphabet). This is all of the basis for my decision. I considered a few different approaches. Due to the snow and a brief speck of inspiration from the movie How the Grinch Stole Christmas (2000), I went with something which reminded me of the Christmas light cannon seen where Martha May Whovier uses a cannon to place lights accurately on her house.

These are my sketches.

This is my final version.

This is my sourcecode.

```/**
* Register your submission and choose a character
* http://anitype.com/documentation
*/
Anitype.register('M', {

author: 'Matthew Kellogg',

// Enter a personal website, must have http
website: '',

construct: function(two, points) {

// Reference to instance
var anitype = this;

// Create a Two.Polygon
var polygon = anitype.makePolygon(points);
polygon.subdivide(10);
// Set an initial state
//polygon.scale = 0;
var verts = polygon.vertices;
var lerp = function(i){
to: {x: verts[i].x, y: verts[i].y},
from: {x: 0, y: verts[0].y},
easing: Anitype.Easing.Elastic.Out,
duration: 0.35,
start: 0.2 + 0.5*((1.0*i)/(verts.length-1))
});
};

for (var i = 1; i < verts.length; i++){
lerp(i);
}

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

I did not achieve my intended design, but found that I liked this one more. The design I first had in mind involved making an N turn into an M. I decided it wasn’t great, so I thought I would make a straight line fold into an M (keeping the lines consistent lengths and bending at joints). I found that that was a bit harder than I’d have liked, and after a long while of fiddling with the code I ended up with my final result.

My favorite Anitype I found was the S by Sam Ticknor. I liked it because it flows very well and doesn’t seem too intrusive. I also liked it because unlike many of the other anitype letters including my own, it did not seem rubbery.