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

I have chosen for the letter ‘L’, foremost because it is the first letter of my last name en secondly because it was a letter that was not often done before. I started sketching out several ideas and read through the documentation online and tried to understand what previous people had made and how.

Thomas LAngerak – Anitype1

After this I started with my own design. Especially making using of Chris Delbuck previous work, I managed to get something working. I know how almost everything works, at least I thought. Because when writing my code I found out that something’s were necessary which I deemed as unnecessary. I thought that;

anitype.addTween(polygon, {
to: { value: scale }, //no clue yet
easing: Anitype.Easing.Bounce.InOut, //easing (Linear, Circular, Elastic.... In, Out, InOut (graph form))
duration: 0, // Value from 0 - 1 how lang the animation takes
start: 0, // Value from 0 - 1 when the animation starts
update:function(){ //update the fertices
pv[2].x = (pv[0].oX - pv[2].oX) * this.value + pv[2].oX; //ver
pv[2].y = (pv[0].oY - pv[2].oY) * this.value + pv[2].oY;

was an unnecessary feature. Yet it seems it was, I still do not know why but I am definitely planning on finding out more about this. I ended up after playing around with different values and their effects with an animation I really like and find mesmerizing. I still find it a shame that I do not know for an hundred percent what I did.

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

// Enter your name
author: 'Thomas Langerak',

// Enter a personal website, must have http
website: 'http://thomaslangerak.nl/',

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

// Reference to instance
var anitype = this; //create an object?

// Create a Two.Polygon
var polygon = anitype.makePolygon(points); //make polygon
var pv = polygon.vertices; //create a vertice for both lines
_.each(pv, function(vert){
vert.oX = vert.x; //create x value
vert.oY = vert.y; //create y value
});

// Set an initial state
var scale = 1; //????

// Create the animation via a tween
anitype.addTween(polygon, {
to: { value: scale }, //no clue yet
easing: Anitype.Easing.Bounce.InOut, //easing (Linear, Circular, Elastic.... In, Out, InOut (graph form))
duration: 0, // Value from 0 - 1 how lang the animation takes
start: 0, // Value from 0 - 1 when the animation starts
update:function(){ //update the fertices
pv[2].x = (pv[0].oX - pv[2].oX) * this.value + pv[2].oX; //ver
pv[2].y = (pv[0].oY - pv[2].oY) * this.value + pv[2].oY;

}
});

anitype.addTween(polygon, {
to: { value: scale },
easing: Anitype.Easing.Bounce.Out,
duration:0.9, // Value from 0 - 1
start: 0, // Value from 0 - 1
update:function(){
pv[0].x = (pv[2].oX - pv[0].oX) * this.value + pv[0].oX;
pv[0].y = (pv[2].oY - pv[0].oY) * this.value + pv[0].oY;
}
})

// 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('L', {

 // Enter your name
 author: 'Thomas Langerak',

 // Enter a personal website, must have http
 website: 'http://thomaslangerak.nl/',

 // Make your animation here
 construct: function(two, points) {
 
 // Reference to instance
 var anitype = this; //create an object?

 // Create a Two.Polygon
 var polygon = anitype.makePolygon(points); //make polygon
 var pv = polygon.vertices; //create a vertice for both lines
 _.each(pv, function(vert){
 vert.oX = vert.x; //create x value
 vert.oY = vert.y; //create y value
 });
 
 
 // Set an initial state
 var scale = 1; //????
 
 // Create the animation via a tween
 anitype.addTween(polygon, {
 to: { value: scale }, //no clue yet
 easing: Anitype.Easing.Linear.Out, //easing (Linear, Circular, Elastic.... In, Out, InOut (graph form))
 duration: 1, // Value from 0 - 1 how lang the animation takes
 start: 0, // Value from 0 - 1 when the animation starts
 update:function(){ //update the vertices
 pv[2].x = (pv[0].oX - pv[2].oX) * this.value + pv[2].oX; //ver????
 pv[2].y = (pv[0].oY - pv[2].oY) * this.value + pv[2].oY; 
 
 }
 });

 anitype.addTween(polygon, {
 to: { value: scale },
 easing: Anitype.Easing.Bounce.Out,
 duration:0.8, // Value from 0 - 1
 start: 0.1, // Value from 0 - 1
 update:function(){
 pv[0].x = (pv[2].oX - pv[0].oX) * this.value + pv[0].oX; //hor????
 pv[0].y = (pv[2].oY - pv[0].oY) * this.value + pv[0].oY;
 }
 }) 


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

 }

});