Interactive Art & Computational Design, Spring 2015

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', {

  // Enter your name
  author: 'Ron Kim',

  // Enter a personal website, must have http
	website: 'http://ronaldhkim.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 = 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;
    
		//Start with top stem collapsed on baseline
		polygon.vertices[0].y= y_baseline;
		polygon.vertices[1].y= y_baseline;
   
		//Start with crossbar offscreen to left
		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
		this.addTween(polygon.vertices[0],{
			to: {y : original_yvertices[0]},
			easing: Anitype.Easing.Sinusoidal.Out,
			duration: .5,
			start: 0,
			update: function(){
				anitype.addTween(polygon.vertices[1],{
					to: {y: original_yvertices[1]},
					easing: Anitype.Easing.Elastic.Out,
					duration: .4,
					start: 0.0,
					//Then, have crossbar shoot in from left
					complete: function(){
						anitype.addTween(polygon.vertices[4],{
							to: {x: original_xvertices[4]},
							easing: Anitype.Easing.Bounce.Out,
							duration: .5,
							start: 0.3,
							update: function() {
								anitype.addTween(polygon.vertices[5],{
									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.