Andrew Russell

22 Jan 2014

C

This letter was a bit of a pain. It seems that every design I tried to animate had some issue with the bezier curves. This is probably why C had only two animations. Two examples are the crossed out sketches seen below. I also fiddled around without sketching to try and figure out what the bezier curves would do. While fiddling around, an unintended shape happened and I went with it. I quickly sketched out a design that could be cool and went to work.



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

/

I was looking at the symbols which had yet to see much love when I came across the forward slash. An idea jumped out at me, so I started drawing. I quickly coded up my idea, and since there were no curves, it worked exactly as intended.



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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
82
83
84
85
86
87
88
89
90
91
92
93

Anitype.register('C', {
  // Enter your name
  author: 'Andrew Russell',
 
  // Enter a personal website, must have http
  website: 'http://ajrussell.ca/',
 
  construct: function(two, points) {
    var anitype = this;
 
    var reference = [
      points[0].clone(),
      points[1].clone(),
      points[2].clone(),
      points[3].clone(),
      points[4].clone()
    ];
 
    var polygon = anitype.makePolygon(points);
 
    var fold_length = 0.35;
    var spin_length = 0.4;
 
    anitype.addTween(points[1], {
      to: { y: 0, ly: 0, ry: 0 },
      easing: Anitype.Easing.Quadratic.InOut,
      duration: fold_length,
      start: 0,
      update: function() {
        anitype.addTween(points[1], {
          to: { y: reference[1].y, ly: reference[1].ly, ry: reference[1].ry },
          easing: Anitype.Easing.Quadratic.InOut,
          duration: fold_length,
          start: 1 - fold_length
        });
      }
    });
 
    anitype.addTween(points[3], {
      to: { y: 0, ly: 0, ry: 0 },
      easing: Anitype.Easing.Quadratic.InOut,
      duration: fold_length,
      start: 0,
      update: function() {
        anitype.addTween(points[3], {
          to: { y: reference[3].y, ly: reference[3].ly, ry: reference[3].ry },
          easing: Anitype.Easing.Quadratic.InOut,
          duration: fold_length,
          start: 1 - fold_length
        });
      }
    });
 
    anitype.addTween(points[0], {
      to: { y: 0 },
      easing: Anitype.Easing.Quadratic.InOut,
      duration: fold_length,
      start: 0,
      update: function() {
        anitype.addTween(points[0], {
          to: { y: reference[0].y },
          easing: Anitype.Easing.Quadratic.InOut,
          duration: fold_length,
          start: 1 - fold_length
        });
      }
    });
 
    anitype.addTween(points[4], {
      to: { y: 0 },
      easing: Anitype.Easing.Quadratic.InOut,
      duration: fold_length,
      start: 0,
      update: function() {
        anitype.addTween(points[4], {
          to: { y: reference[4].y },
          easing: Anitype.Easing.Quadratic.InOut,
          duration: fold_length,
          start: 1 - fold_length
        });
      }
    });
 
    anitype.addTween(polygon, {
      to: { rotation: -2 * 3.141 },
      easing: Anitype.Easing.Sinusoidal.InOut,
      duration: spin_length,
      start: 0.5 - spin_length/2
    });
 
    return two.makeGroup(polygon);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

Anitype.register('/', {
  // Enter your name
  author: 'Andrew Russell',
 
  // Enter a personal website, must have http
  website: 'http://ajrussell.ca/',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
 
    var top = 369;
 
    var left_middle = new Two.Anchor(0, 0);
    var right_middle = new Two.Anchor(0, 0);
    right_middle.command = "L";
 
    // Create a Two.Polygon
    var left = anitype.makePolygon([left_middle, points[1]]);
    var right = anitype.makePolygon([points[0], right_middle]);
 
    var ease_type = Anitype.Easing.Quadratic.In;
    var length = 0.1;
 
    anitype.addTween(points[0], {
      to: { y: top },
      easing: ease_type,
      start: 0,
      duration: length,
      update: function() {
        anitype.addTween(points[0], {
          to: { y: -top },
          easing: ease_type,
          start: 0.5,
          duration: length
        });
      }
    });
 
    anitype.addTween(points[1], {
      to: { y: -top },
      easing: ease_type,
      start: 0.25,
      duration: length,
      update: function() {
        anitype.addTween(points[1], {
          to: { y: top },
          easing: ease_type,
          start: 0.75,
          duration: length
        });
      }
    })
 
    return two.makeGroup(right, left);
  }
});