Category Archives: 11-anitype

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.

IMG_0961_small

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

 }
Link

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.

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

  // Enter your name
  author: 'sejal',

  // Enter a personal website, must have http
  website: 'http://www.sejalpopat.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;
  
    //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
    anitype.addTween(tl, {
      to: {x: 0, y: 0},
      easing: Anitype.Easing.Sinusoidal.Out,
      duration: .5,
      start: 0
    })
    
     anitype.addTween(br, {
      to: {x: 0, y:0},
      easing: Anitype.Easing.Sinusoidal.Out,
      duration: .5,
      start: 0
    })
    
    anitype.addTween(tr, {
      to: {x:0},
      duration: .5,
      start:0
    })
    
     anitype.addTween(bl, {
      to: {x:0},
      duration:.5 ,
      start:0
    })
  
    
    //rotate whole polygon
    anitype.addTween(polygon, {
      to: {rotation: -3, scale: 1},
      easing: Anitype.Easing.Quadratic.Out,
      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];
    
    anitype.addTween(left_knee, {
       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,
    });
    
    anitype.addTween(right_knee, {
       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,
    });
    
     anitype.addTween(left_leg, {
       from: {y: left_leg.y - w*.2},
       to: {y: left_leg.y},
       easing: Anitype.Easing.Linear.None,
       duration: .2,
       start: 0,
    });
    
    anitype.addTween(right_leg, {
       from: {y: right_leg.y - w*.2},
       to: {y: right_leg.y},
       easing: Anitype.Easing.Linear.None,
       duration: .2,
       start: 0,
    });
          
    anitype.addTween(middle, {
       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;
  
    anitype.addTween(middle, {
       from: {x: middle.x + (Math.random()*w*.3) * xSign},
       to: {x: middle.x},
       easing: Anitype.Easing.Elastic.Out,
       duration: 1,
       start: 0,
    });
    
    anitype.addTween(polygon, {
      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.

anitype-sketch

This is my final version.

This is my sourcecode.

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

 // Enter your name
 author: 'Matthew Kellogg',

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

 // Make your animation here
 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){
   anitype.addTween(verts[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.