Shan Huang

23 Jan 2014

V

My assigned letter is V. V is not quite my letter because it’s not in my name and I’m not particularly fond of the shape. V has a sharp and cold feel. I wanted to preserve that feel and therefore restrained myself from bending V into curves. I have the two arms of V fall from the middle with slightly different paces and bounce a little when they arrive at their final positions.


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

O

For letter of my choice I chose O. O reminds me of circular things like orbits and it looks like a planet too. So I have a small circle revolve around O along the path of a horizontal O.


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

Sketches

sketches-v

 

sketches-o

My initial designs for these letters were a bit more complex but then the parametric object project sucked all my power. In moments of despair I decided to keep my designs simple (and hopefully elegant!). I’m pretty happy with what I came up with. It didn’t take more than a few lines of code but the movement makes sense for the letters.

Code

code for V

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('V', {
 
  // Enter your name
  author: 'Shan Huang',
 
  // Enter a personal website, must have http
  website: 'http://shan-huang.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
    var p0 = polygon.vertices[0].clone();
    var p2 = polygon.vertices[2].clone();
    polygon.vertices[0].set(0, -370);
    polygon.vertices[2].set(0, -370);
 
    // Create the animation via a tween
    anitype.addTween(polygon.vertices[0], {
      to: { x: p0.x, y: p0.y },
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.9, // Value from 0 - 1
      start: 0        // Value from 0 - 1
    });
 
    anitype.addTween(polygon.vertices[2], {
      to: { x: p2.x, y: p2.y },
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.6, // Value from 0 - 1
      start: 0        // Value from 0 - 1
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});

code for O

/**
* Register your submission and choose a character
* For more information check out the documentation
* http://anitype.com/documentation
*/
Anitype.register('O', {
 
// Enter your name
author: 'Shan Huang',
 
// Enter a personal website, must have http
website: 'http://shan-huang.com/',
 
// Make your animation here
construct: function(two, points) {
 
// Reference to instance
var anitype = this;
 
// Create a Two.Polygon
var polygon = anitype.makePolygon(points).subdivide();
// Set an initial state
var circle = two.makeCircle(0, 0, 5);
 
// Create the animation via a tween
anitype.addTick(function(percent){
var perc = percent - Math.floor(percent);
var idx = Math.floor(percent*polygon.vertices.length)%polygon.vertices.length;
if(perc < 0.21125 || perc > 0.35){
circle.translation.y = polygon.vertices[idx].x / 2;
circle.translation.x = polygon.vertices[idx].y;
}
else{
circle.translation.y = -10000;
circle.translation.x = -10000;
}
});
 
// Return your polygon wrapped in a group.
return two.makeGroup([polygon, circle]);
 
}
 
});