I originally was working on the letter “K” since my name is Jack Koo. However, I found “c” to be more interesting after trying it with the code i wrote for K. For my Anitype character, I first randomly picked all the beginnings or endings of a line, and then, connected them to a random point. This is a modular piece and can apply to any letters. I thought that “C” was interesting because when it morphed it ended up with other letter shapes such as K, a, d, etc..
Here’s a graph explaining what it is doing. (It really looked nothing like what i thought it would when i was sketching) (below)
Here’s another letter (K) the letter I started with.
And Here is my code:
/**
* Register your submission and choose a character
* For more information check out the documentation
* http://anitype.com/documentation
*/
Anitype.register('C', {
// Enter your name
author: 'Jack',
// Enter a personal website, must have http
website: 'http://jackkoo.com',
// Make your animation here
construct: function(two, points) {
// Reference to instance
var anitype = this;
// Create a Two.Polygon
var polygon = anitype.makePolygon(points);
// Save original positions
var originalPoints = [];
for (var i = 0; i < points.length; i++)
{
originalPoints.push(new Two.Vector(points[i].x, points[i].y));
}
// Pick either first point to second or vice versa
var b = false;
if (Math.random() > .5)
{
b = true;
}
// Pick a random point to connect to
var start = Math.floor(Math.random() * points.length);
for (var i = 0; i < points.length; i++)
{
if (b === true)
{
points[i].x = points[start].x;
points[i].y = points[start].y;
}
b = !b;
}
polygon.rotation = -10;
anitype.addTween(polygon, {
to: {rotation: 0},
easing: Anitype.Easing.Elastic.Out,
duration: 0.3, // Value from 0 - 1
start: 0, // Value from 0 - 1
complete: function(){
for (var i = 0; i < points.length; i++)
{
anitype.addTween(polygon.vertices[i], {
to: { x: originalPoints[i].x, y: originalPoints[i].y },
easing: Anitype.Easing.Elastic.Out,
duration: 1, // Value from 0 - 1
start: .3, // Value from 0 - 1
});
}
}
});
// Return your polygon wrapped in a group.
return two.makeGroup(polygon);
}
});