# JohnMars—AniType

The asterisk [*] — a star. It’s all-powerful, yet noncommittal (why should any one letter deserve my attention? You have to be special to earn that). I like stars, space, vectors, and the interplay between Sine and Cosine, so I made the formation of a galaxy.

I rarely use sketchbooks (I find them simultaneously too constraining, too unconstrained, to fast, and too slow), but I do like diagrams:

I unfortunately could not get the stars to spin the way I wanted (Two.js doesn’t have complete vector implementation), but what I ended up with serendipitously gave me something that feels more full and three-dimensional than what I was trying to achieve.

Inspiration and the discovery that Two.js has an Underscore.js dependency go to Max Hawkins, Shan Huang, and Justin Windle. Overall, my favorite characters might be Max Hawkin’s “H” or Sebastian Tissot’s “A”

```Anitype.register('*', {

author: 'John Mars',
website: 'http://M4R5.io',
construct: function(two, points) {

// reference to this instance
var anitype = this;

// the letter skeleton
var polygon = anitype.makePolygon(points);

// the vertices of the letter, subdivided
var vertices = polygon.subdivide(3).vertices;

// Two.js has an Underscore.js dependency, so we can use it here
// make a random-sized "star" for each vertex, but place it randomly on the canvas
var stars = _.map(vertices, function(vertex, i) {
var star = two.makeCircle(0, 0, 10);
star.translation.set(Math.random() * 1000 - 500, Math.random() * 1000 - 500);
star.scale = Math.random() * 4;
return star;
});

// create a list of each vertex as a vector (for vector math later)
var vertexVectors = _.map(vertices, function(vertex, i) {
return new Two.Vector(vertices[i].x, vertices[i].y);
});

// pick a random sign (+/-) for each vertex (for vector math later)
var directions = _.map(vertices, function(vertex, i) {
return Math.random() < 0.5 ? -1 : 1;
});

// control individual star scaling
_.each(stars, function(star, i) {
console.log(vertices[i].x);
to: {scale: 1},
easing: Anitype.Easing.Exponential.In,
duration: 0.66,
start: 0
});
});

// control individual star movement
_.each(stars, function(star, i) {

// linear interpolation from current star position to goal vertex position, as a function of the current frame
star.translation.lerp(vertexVectors[i], percent * 2);

// vector rotations for orbital realism
new Two.Vector(
Math.cos(percent * Math.PI * 2)  * (1.0 - percent) * 5 * directions[i],
Math.sin(percent * Math.PI * 2) * (1.0 - percent) * 5 * directions[i]
)
);
});
}, Anitype.Easing.Exponential.In);

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

}
});
```
This entry was posted in 11-anitype on .

## About John Mars

Graduate student in Tangible Interaction Design