I grew up thinking my name is ugly and awkward and I still do sometimes. It feels weird hearing people fumble over my name. My handwriting sucks, too, so my name looks ugly to me. I never could figure out how to make it how I liked it. My Y’s tend to hang awkwardly. Like, yup, it’s a y, boyoyoyoing here it is. I decided to play on that and make some hanging Y’s , like a catenary. Apparently it is very “suggestive” of …. “something”, although nobody seems able to put their finger on it.

[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDA4NiCCQw/” width=”620″ height=”320″]

[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDA2YmBCww/” width=”620″ height=”320″]

[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgIDAxJmdCQw/” width=”620″ height=”320″]

[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgICAk4SWCww/” width=”620″ height=”320″]

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

  // Enter your name
  author: 'Yeliz Karadayi',

  // Enter a personal website, must have http
  website: 'http://ygk-arch.com',

  // Make your animation here
  
  construct: function(two, points) {

    // Reference to instance
    var anitype = this;

    // Create a Two.Polygon
    var letterY = anitype.makePolygon(points);
    var animY = anitype.makePolygon();
    
    
      
    anitype.addTick(function( percent ){
      var v = letterY.vertices;
      var v2 = animY.vertices;
       
      var dy = v[0].y;
      var t2 = percent*100;
      

        animY.vertices.push(new Two.Anchor(v[3].x+30-(t2/3),v[3].y-200+t2*2,null,null,null,null,Two.Commands.move));
        animY.vertices.push(new Two.Anchor(v[4].x,v[4].y,null,null,null,null,Two.Commands.curve));
        animY.vertices.push(new Two.Anchor(v[3].x-30+(t2/3),v[3].y-200+t2*2,null,null,null,null,Two.Commands.curve));
        
         animY.vertices.push(new Two.Anchor(v[0].x,v[0].y,null,null,v[0].x,v[0].y+200-(t2*2),Two.Commands.move));
         animY.vertices.push(new Two.Anchor(v[1].x,v[1].y-200+t2*2,v[1].x-50+(t2/2),v[1].y-200+t2*2,v[1].x+50-(t2/2),v[1].y-200+t2*2,Two.Commands.curve));          
        animY.vertices.push(new Two.Anchor(v[2].x,v[2].y,v[2].x,v[2].y+200-(t2*2),null,null,Two.Commands.curve));
         
     if(t2 > 60){
       for(i = 0; i < 24; i ++){
         if(animY.vertices.length > 6) {animY.vertices.shift();}
       }
     }
    });
      
    // Return your polygon wrapped in a group.
    return two.makeGroup(animY);

  }

});

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

  // Enter your name
  author: 'Yeliz Karadayi',

  // Enter a personal website, must have http
  website: 'http://ygk-arch.com',

  // Make your animation here
  construct: function(two, points) {

    // Reference to instance
    var anitype = this;

    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
    
    var a = points[4];
    var b = points[3];
    
    var c = points[0];
    var d = points[1];
    var e = points[2];
    
    
    b.dest = { x: b.x, y: b.y };
    b.y = c.y;
    anitype.addTween(b, {
      to: b.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.7,
      start: 0.3
    });
    
    a.dest = { x: a.x, y: a.y };
    a.copy(b);
    anitype.addTween(a, {
      to: a.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.7,
      start: 0.3
    });
    
    
    
    var ca = new Two.Anchor(c.x,c.y,null,null,c.x,c.y+300,Two.Commands.move);
    var da = new Two.Anchor(d.x,d.y,d.x-50,d.y,d.x+50,d.y,Two.Commands.curve);     
    var ea = new Two.Anchor(e.x,e.y,e.x,e.y+300,null,null,Two.Commands.curve);    

    c.command = Two.Commands.move;
    d.command = Two.Commands.curve;
    e.command = Two.Commands.curve;

    v1 = new Two.Vector(c.x,c.y+30);
    v2 = new Two.Vector(d.x-50,c.y+30);
    v3 = new Two.Vector(d.x+50,c.y+30);
    v4 = new Two.Vector(e.x,e.y+30);

    
    // c.controls.right = ( v1 );
    // d.controls.left = ( v2 );
    // d.controls.right = ( v3 );
    // e.controls.left = ( v4 );
    
    
    
    cc = c.controls.right;
    cc.dest = { x: cc.x, y: cc.y };
    cc.copy(v1);
    anitype.addTween(cc, {
      to: cc.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });
    
    var dd = d.controls.left;
    dd.dest = { x: dd.x, y: dd.y };
    dd.copy(v2);
    anitype.addTween(dd, {
      to: dd.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });
    dd = d.controls.right;
    dd.dest = { x: dd.x, y: dd.y };
    dd.copy(v3);
    anitype.addTween(dd, {
      to: dd.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });
    dd = d;
    dd.dest = { x: d.x, y: d.y };
    dd.y = c.y;
    anitype.addTween(dd, {
      to: dd.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.7,
      start: 0.3
    });
    var ee = e.controls.left;
    ee.dest = { x: ee.x, y: ee.y };
    ee.copy(v4);
    anitype.addTween(ee, {
      to: ee.dest,
      easing: Anitype.Easing.Bounce.Out,
       duration: 0.5,
      start: 0.5
    });

    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);

  }

});

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

  // Enter your name
  author: 'Yeliz Karadayi',

  // Enter a personal website, must have http
  website: 'http://ygk-arch.com',
 // Make your animation here
  construct: function(two, points) {

    // Reference to instance
    var anitype = this;

    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
    var a = points[4];
    var b = points[3];
    b.y = b.y-100;
    
    b.dest = { x: b.x, y: b.y+100 };
    anitype.addTween(b, {
      to: b.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });
    
    a.dest = { x: a.x, y: a.y };
    a.copy(b);
    anitype.addTween(a, {
      to: a.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });
    
    
    var c = points[0];
    var d = points[1];
    var e = points[2];
    
    var ca = new Two.Anchor(c.x,c.y,null,null,c.x,c.y+300,Two.Commands.move);
    var da = new Two.Anchor(d.x,d.y,d.x-50,d.y,d.x+50,d.y,Two.Commands.curve);     
    var ea = new Two.Anchor(e.x,e.y,e.x,e.y+300,null,null,Two.Commands.curve);    

    c.command = Two.Commands.move;
    d.command = Two.Commands.curve;
    e.command = Two.Commands.curve;

    v1 = new Two.Vector(c.x,c.y+300);
    v2 = new Two.Vector(d.x-50,d.y-100);
    v3 = new Two.Vector(d.x+50,d.y-100);
    v4 = new Two.Vector(e.x,e.y+300);

    d.y -= 100;
    // c.controls.right = ( v1 );
    // d.controls.left = ( v2 );
    // d.controls.right = ( v3 );
    // e.controls.left = ( v4 );
    
    
    
    cc = c.controls.right;
    cc.dest = { x: cc.x, y: cc.y };
    cc.copy(v1);
    anitype.addTween(cc, {
      to: cc.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });
    
    var dd = d.controls.left;
    dd.dest = { x: dd.x, y: dd.y };
    dd.copy(v2);
    anitype.addTween(dd, {
      to: dd.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });
    dd = d.controls.right;
    dd.dest = { x: dd.x, y: dd.y };
    dd.copy(v3);
    anitype.addTween(dd, {
      to: dd.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });
    dd = d;
    dd.dest = { x: d.x, y: d.y+100 };
    anitype.addTween(dd, {
      to: dd.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });
    var ee = e.controls.left;
    ee.dest = { x: ee.x, y: ee.y };
    ee.copy(v4);
    anitype.addTween(ee, {
      to: ee.dest,
      easing: Anitype.Easing.Bounce.Out,
       duration: 0.5,
      start: 0.5
    });

    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);

  }

});

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

  // Enter your name
  author: 'Yeliz Karadayi',

  // Enter a personal website, must have http
  website: 'http://ygk-arch.com',

  // Make your animation here
  construct: function(two, points) {

    // Reference to instance
    var anitype = this;

    // Create a Two.Polygon
    var polygon = anitype.makePolygon(points);
    var a = points[4];
    var b = points[3];
    b.y = b.y-300;
    
    b.dest = { x: b.x, y: b.y+300 };
    anitype.addTween(b, {
      to: b.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.7,
      start: 0.3
    });
    
    a.dest = { x: a.x, y: a.y };
    a.copy(b);
    anitype.addTween(a, {
      to: a.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.7,
      start: 0.3
    });
    
    
    var c = points[0];
    var d = points[1];
    var e = points[2];
    
    var ca = new Two.Anchor(c.x,c.y,null,null,c.x,c.y+300,Two.Commands.move);
    var da = new Two.Anchor(d.x,d.y,d.x-50,d.y,d.x+50,d.y,Two.Commands.curve);     
    var ea = new Two.Anchor(e.x,e.y,e.x,e.y+300,null,null,Two.Commands.curve);    

    c.command = Two.Commands.move;
    d.command = Two.Commands.curve;
    e.command = Two.Commands.curve;

    v1 = new Two.Vector(c.x,c.y+300);
    v2 = new Two.Vector(d.x-50,d.y-100);
    v3 = new Two.Vector(d.x+50,d.y-100);
    v4 = new Two.Vector(e.x,e.y+300);

    d.y -= 100;
    // c.controls.right = ( v1 );
    // d.controls.left = ( v2 );
    // d.controls.right = ( v3 );
    // e.controls.left = ( v4 );
    
    
    
    cc = c.controls.right;
    cc.dest = { x: cc.x, y: cc.y };
    cc.copy(v1);
    anitype.addTween(cc, {
      to: cc.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });http://jon
    
    var dd = d.controls.left;
    dd.dest = { x: dd.x, y: dd.y };
    dd.copy(v2);
    anitype.addTween(dd, {
      to: dd.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });
    dd = d.controls.right;
    dd.dest = { x: dd.x, y: dd.y };
    dd.copy(v3);
    anitype.addTween(dd, {
      to: dd.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });
    dd = d;
    dd.dest = { x: d.x, y: d.y+100 };
    anitype.addTween(dd, {
      to: dd.dest,
      easing: Anitype.Easing.Bounce.Out,
      duration: 0.5,
      start: 0.5
    });
    var ee = e.controls.left;
    ee.dest = { x: ee.x, y: ee.y };
    ee.copy(v4);
    anitype.addTween(ee, {
      to: ee.dest,
      easing: Anitype.Easing.Bounce.Out,
       duration: 0.5,
      start: 0.5
    });

    // Return your polygon wrapped in a group.
    return two.makeGroup(polygon);

  }

});