AniType Letters: ‘I’ and ‘4’ | Interactive Art & Computational Design, Spring 2014

My interpretation of the letter ‘I’ was inspired by the word “I” in English. While brainstorming about this letter, I began to think more about the word “I” and wrote “I thinks very highly of itself.” So I animated an “I” that does not think it should be bound by its 1000×1000 pixel box. I looked at Max Hawkins’ code for ‘I’ to figure out how to get extra points from the ones given and fill them to form a polygon that resembles an ‘I’.

My Code for ‘I’:

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('I', {
  // Enter your name
  author: 'Collin Burger',
  // Enter a personal website, must have http
  website: 'http://github.com/cyburgee',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
 
    _.each(points, function(p) { console.log(p.x)});
    _.each(points, function(p) { console.log(p.y)});
    var left = _.map(points, function(p){ return p.clone(); });
    for (var i = 0; i &lt; left.length; i++){
      left[i].x = -1;
    }
    var right = _.map(points, function(p){ return p.clone(); });
    for (var k = 0; k &lt; right.length; k++){
      right[k].x = 1;
    }
 
    right.reverse();
    var all = left.concat(right);
    right.reverse();
 
    anitype.addTick(function(t) {
      for (var i = 0; i &lt; all.length; i++){
      if(all[i].x &lt; 0)
        all[i].x = -470*Math.sin(t*Math.PI) + 1;
      else
        all[i].x = 470*Math.sin(t*Math.PI) - 1;
 
      if (all[i].y &lt; 0)
        all[i].y = -337 - 130*Math.sin(t*Math.PI);
      else
        all[i].y = 337 + 130*Math.sin(t*Math.PI);
      }
 
      polygon.fill = polygon.stroke;
 
    },Anitype.Easing.Cubic.Out);
    //Back, Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quartic, Quintic, and Sinusoidal.
 
     var polygon = new Two.Polygon(all,true);
 
    var ret = two.makeGroup(polygon);
 
    // Return your polygon wrapped in a group.
    return ret;
  }
 
});

Max Hawkins’ Code for ‘I’

Anitype.register('I', {
  author: 'Max Hawkins',
  website: 'http://maxhawkins.me/',
 
  construct: function(two, glyph) {
    var anitype = this;
 
    var points = anitype.makePolygon(glyph)
      .subdivide()
      .vertices;
    points = _.rest(points);
 
    var left = _.map(points, function(p){ return p.clone(); });
    var right = _.map(points, function(p){ return p.clone(); });
 
    right.reverse();
    var all = left.concat(right);
    right.reverse();
 
    function sinOffset(time, max, min, point, i) {
        var offset = (i / points.length) + time;
        var osc = Math.sin(offset * Math.PI * 2) / 2 + 0.5;
        point.x = osc * (max - min) + min;
    }
 
    anitype.addTick(function(t){
 
      var leftOffset = _.partial(sinOffset, t, -30, -50);
      _.each(left, leftOffset);
 
      var rightOffset = _.partial(sinOffset, t, 30, 50);
      _.each(right, rightOffset);
 
      polygon.fill = polygon.stroke;
    });
 
    var polygon = new Two.Polygon(all, true);
 
    return two.makeGroup(polygon);
  }
 
});

I chose to animate ‘4’ because it only had one previous entry and I thought it could use some attention. After testing some geometric transformations, I settled on animating the phrase in the popular lexicon that represents arithmetic, which is “Two plus two equals 4.” While I don’t think it’s a very interesting take on animating the number, I still wanted to see if I could conjure up other characters using Anitype and incorporate them into the representation of ‘4.’

My Code for ‘4’:

/**
 * Register your submission and choose a character
 * For more information check out the documentation
 * http://anitype.com/documentation
 */
Anitype.register('4', {
 
  // Enter your name
  author: 'Collin Burger',
 
  // Enter a personal website, must have http
  website: 'http://www.github.com/cyburgee/',
 
  // Make your animation here
  construct: function(two, points) {
 
    // Reference to instance
    var anitype = this;
    var anchors2 = [];
    var too = Anitype.getEndpoints('2',1000);
    var i = 0;
    _.each(too, function(p) {
      //var comm = Two.Commands.move;
      if (i &gt; 0 &amp;&amp; i &lt; 5)         anchors2.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y,            p.controls.right.x, p.controls.right.y, Two.Commands.curve));       else if (i &gt;= 5)
        anchors2.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.line));
      else
        anchors2.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.move));
      //console.log(anchors2.pop())
      i ++;
    });
 
    var anchorsPlus = [];
    var plus = Anitype.getEndpoints('+',1000);
    i = 0;
    _.each(plus, function(p){
      if (i == 1 || i == 3)
        anchorsPlus.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.line));
      else
        anchorsPlus.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.move));
      i++;
    });
 
    var anchorsEqBottom = [];
 
    var yEq = 100;
    var xEq = 150;
    anchorsEqBottom.push(new Two.Anchor(-xEq,-yEq, -xEq,-yEq, -xEq,-yEq, Two.Commands.line));
    anchorsEqBottom.push(new Two.Anchor(xEq,-yEq, xEq,-yEq, xEq,-yEq, Two.Commands.line));
 
    var anchorsEqTop = [];
 
    anchorsEqTop.push(new Two.Anchor(-xEq,yEq, -xEq,yEq, -xEq, yEq, Two.Commands.line));
    anchorsEqTop.push(new Two.Anchor(xEq,yEq, xEq,yEq, xEq,yEq, Two.Commands.line));
 
    /*_.each(plus, function(p){
      if (i == 1 || i == 3)
        anchorsPlus.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.line));
      else
        anchorsPlus.push(new Two.Anchor(p.x, p.y, p.controls.left.x, p.controls.left.y, 
          p.controls.right.x, p.controls.right.y, Two.Commands.move));
      i++;
    });*/
 
    var pointsOrig = _.map(points, function(p) {return p.clone();});
 
    var poly4 = anitype.makePolygon(points);
    var poly2 = anitype.makePolygon(anchors2);
    var polyPlus = anitype.makePolygon(anchorsPlus);
    var polyEqBottom = anitype.makePolygon(anchorsEqBottom);
    var polyEqTop = anitype.makePolygon(anchorsEqTop);
 
    poly4.scale = 0;
    poly2.scale = 1;
    polyPlus.scale = 0;
    polyEqBottom.scale = 0;
    polyEqTop.scale = 0;
 
    var duration = 0.15;
    var beginAni = 0;
    var secondAni = beginAni + duration;// + 0.01;
    var thirdAni = secondAni + duration;// + 0.01;
    var fourthAni = thirdAni + duration;// + 0.01;
    var fifthAni = fourthAni + duration;// + 0.01;
    var sixthAni = fifthAni + duration;// + 0.01;
    //console.log(fifthAni);
    //var ease = Anitype.Easing.Circular
 
    //show first 2
    anitype.addTween(poly2, {
      from: {scale: 1},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: 0, // Value from 0 - 1
      start: beginAni,
      complete: function(){
        anitype.addTween(poly2, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start: secondAni
        });
      }
    });
 
    //show plus
    anitype.addTween(polyPlus, {
      from: {scale : 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Elastic.Out,
      duration: duration, // Value from 0 - 1
      start: secondAni,
      complete: function(){
        anitype.addTween(polyPlus, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start: thirdAni
        });
      }
    });
 
    //show second 2
    anitype.addTween(poly2, {
      from: {scale: 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: duration, // Value from 0 - 1
      start: thirdAni,
      complete: function(){
        anitype.addTween(poly2, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start: fourthAni
        });
      }
    });
 
    //show eq
    anitype.addTween(polyEqTop, {
      from: {scale: 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: duration, // Value from 0 - 1
      start: fourthAni,
      complete: function(){
        anitype.addTween(polyEqTop, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start:fifthAni 
        });
      }
    });
    anitype.addTween(polyEqBottom, {
      from: {scale: 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: duration, // Value from 0 - 1
      start: fourthAni,
      complete: function(){
        anitype.addTween(polyEqBottom, {
          from: { scale: 1},
          to: { scale: 0},
          //easing: Anitype.Easing.Circular.Out,
          duration: duration, // Value from 0 - 1
          start: fifthAni
        });
      }
    });
 
    //show 4
    anitype.addTween(poly4, {
      from: {scale: 0},
      to: { scale: 1 },
      //easing: Anitype.Easing.Circular.Out,
      duration: duration, // Value from 0 - 1
      start: fifthAni
    });
 
    // Return your polygon wrapped in a group.
    //var group = two.makeGroup(poly2);
    var group = two.makeGroup(poly2);
    group.add(polyPlus);
    group.add(polyEqTop);
    group.add(polyEqBottom);
    group.add(poly4);
 
    return group;
 
  }
 
});

Notes:

M	T	W	T	F	S	S
« May
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

Interactive Art & Computational Design, Spring 2014

An Advanced Studio in Arts Engineering and Freestyle Computing // Prof. Golan Levin, Carnegie Mellon University

Collin Burger

23 Jan 2014