Yingri Guan

23 Jan 2014

I think Letter Z reminds me of really strong motion, almost like swiftly swinging the arms. Sometimes I also associate it with lightening as the shape gives its sharp look.


This letter is referencing Karadox‘s work of Letter A on AniType. I was looking for a source code to generate a swift motion and came across his work.

image-2

 

18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

/**
 * 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: 'Yingri Guan',
 
  // Enter a personal website, must have http
  website: 'http://yingriguan.com/',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
    this.duration = 1000;
 
    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
    // Set an initial state
    polygon.vertices[0].set(-200, 345);
    polygon.vertices[1].set(-200, -345); // top
    polygon.vertices[2].set(200, -345); // right bottom
    polygon.vertices[3].set(-200, 345); // left short arm
    //polygon.vertices[4].set(215, 328); // left short arm
    // Create the animation via a tween
 
    anitype.addTween(polygon.vertices[0], {
      to: { x: -200, y: -345 },
      easing: Anitype.Easing.Bounce.Out,
      duration: 1, // Value from 0 - 1
      start: 0,   
    });
 
    anitype.addTween(polygon.vertices[1], {
      to: { x: 200, y: -345 },
      easing: Anitype.Easing.Bounce.Out,
      duration: 1, // Value from 0 - 1
      start: 0,   
    });
 
    anitype.addTween(polygon.vertices[2], {
      to: { x: -200, y: 345 },
      easing: Anitype.Easing.Bounce.Out,
      duration: 1, // Value from 0 - 1
      start: 0,   
    });
 
    anitype.addTween(polygon.vertices[3], {
      to: { x: 200, y: 345 },
      easing: Anitype.Easing.Bounce.Out,
      duration: 1, // Value from 0 - 1
      start: 0,        // Value from 0 - 1
    });
 
    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);
 
  }
 
});

I picked “8” because it symbolizes good fortune in Chinese culture. With the advent of Chinese New Year, I am inspired to create a dancing “8” to celebrate this auspicious festival.  This was an accident as I was playing with Quasimondo‘s code on AniType.


image-1

18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

/**
 Anitype.register('8', {
 
  author: 'Yingri Guan',
 
  website: 'http://yingriguan.com/',
 
  construct: function(two, points) {
 
    var anitype = this;
 
    var polygon = anitype.makePolygon(points);
    polygon.subdivide(5);
   var circles = _.map(polygon.vertices, function(v) {
          return two.makeCircle(0, 0, 12);
        });
 
    anitype.addTick(function(percent){
 
    var t = [];
    var l = polygon.vertices.length;
 
     for ( var i = 0; i < l; i++ )
     {
       var p = (percent * 8) % 1;
       var v1 =polygon.vertices[i];
      var v2 = polygon.vertices[(i+8)%l];
        t[i] = {x: v1.x + p * ( v2.x - v1.x),
                y: v1.y + p * ( v2.y - v1.y)};
      }
 
      for ( i = 0; i < circles.length; i++ )
      {
        var c =circles[i];
        c.translation.x = t[i].x;
        c.translation.y = t[i].y;
      }
 
    });
 
    return two.makeGroup(circles);
  }
 
});