What if letters could move?

Guidelines

Anitype invites you to animate letters with JavaScript. To keep cohesion between characters, we've structured the development process. First, we provide point data for where your character should be at the end of your animation. Second, you have one second to animate your character, and anything longer will be cut short. Third, we encourage you to use transformation parameters like translate, rotate, scale, and vertices, however we won't accept animations that use style parameters* like linewidth, stroke, fill, and opacity. Lastly, minified submissions are not permitted. Please submit only human-readable code.

We're adding this constraint because we want future users of the typeface to be able to apply consistent styles across multiple characters, and if you make your “Y” green, users won't be able to override it and make all of “Y-E-L-L-O-W” yellow.

The Development Environment

Once you select a character, you'll see a code editor on the left and a preview of your animation on the right. To re-compile your code, click the Play (+↵) button in the center. To save your code, click Save (+S) in the upper right. Click Publish in the upper right only when you're ready to share your character publicly. This is an irreversible action, so be sure you’re ready.

The animation preview on the right includes a clock delineating the one second within which you can conduct your animation. To pause your animation, just click the clock. To scrub to a specific point in the animation, click the clock and drag vertically. The three buttons to the right of the character toggle various additional UI helpers including Guides, Bezier Points, and the Path itself.

Anatomy of a Submission

After you select a character, the text editor on the left includes some boilerplate code. This code is important because it contains register, a method that registers you with the typeface. register takes two arguments: the character you are registering and an object with the details about your character. This object requires 3 properties: your name, author, your website, website, and your code, construct, contained within an anonymous function.

Before we get into the code, let's go over how the letters are drawn. The first thing to note is that the rendering is built entirely on two.js. With this rendering, each character inhabits a 1,000 x 1,000 pixel rectangle. These dimensions were chosen because of the precision required in type design. When you look at the preview of compiled code it should be clear that the preview is not at 1:1 scale, this is because the values are scaled to fit the dimensions of the web. The center of the rectangle is considered (0, 0).

Now let's dive into the code. The construct method is invoked with the context of an instantiated Anitype object. In the JavaScript Specifics you might notice reference to an object anitype (with lowercase “a”). This naming refers to the variable this in the construct method. This method passes in two arguments: two and points. two is a reference to the available drawing space. points is an array of Two.Anchors ready to be constructed into a polygon via this.makePolygon(points). Whatever you draw, whether it's polygons, points, or lines, make sure that you add all those objects to a Two.Group and return the group at the end of the construct method. This construct method and a simple tween example are included in the boilerplate code. For more details on specifics, check out the api documentation in JavaScript Specifics. For inspiration and to see what others are making, try browsing the Entries.

JavaScript Specifics

In addition to JavaScript variables available in the browser we have provided 3 additional classes to help manage the creation and animation of characters.

Anitype

Anitype is a window level class that serves as the main interaction point for the project. While it is an instantiable class, for the purpose of defining and creating an animation it isn't necessary. As a result, only a subset of instance methods will be outlined here.

  • makePolygon anitype.makePolygon(points);

    Given an array of Two.Anchor points return a Two.Polygon. This is the encouraged format to construct your polygon.

  • addTween anitype.addTween(object, params);

    This method changes an object's properties over time, a.k.a tween. It takes a params object to describe exactly what should happen over time. This object contains:

    • to params.to

      A JavaScript Object describing the destination state of the object. e.g: In order to change scale and rotation we would set params.to = { scale: 1.0, rotation: Math.PI };

    • from params.from

      A JavaScript Object describing the initial state of what the object will be when starting the tween. This is an optional parameter.

    • start params.start

      A number between 0 - 1 describing when the tween will start.

    • duration params.duration

      A number between 0 - 1 describing how long the tween will last.

  • addTick anitype.addTick(onUpdate, [easing]);

    Pass an onUpdate function to be called every frame change of a letter's animation. An optional easing function to calibrate how often the tick fires. This is an alternate way of invoking anitype.addTween.

  • Version Anitype.Version

    The version of the anitype build. Useful for referencing change log from version-to-version.

  • Dimensions Anitype.Dimensions

    An object containing the archetypal information of any given letter.

    • width Anitype.Version.width

      The width in pixels of a character in the typeface.

    • height Anitype.Version.height

      The height in pixels of a character in the typeface.

    • spacing Anitype.Version.spacing

      The default spacing in pixels between characters.

  • getEndpoints Anitype.getEndpoints(letter, [size]);

    This returns an array of simple JavaScript Objects that have the same attributes of a Two.Anchor, the atomic unit of a letter in anitype. The method requires a letter representing the character you want to get the vertices of and an optional size to normalize the vertices' coordinates to — defaults to 1,000.

  • Instances Anitype.Instances

    An array of all instantiated instances of Anitype.

  • Endpoints Anitype.Endpoints

    A map of all characters in the typeface with corresponding vertex information to generate their form.

  • Characters Anitype.Characters

    A map of all character submissions added to anitype.js

  • Easing Anitype.Easing

    A map of all Penner Easing equations and then some. Each subsequent property has In, Out, and InOut functions. e.g: Anitype.Easing.Circular.In. Available easing curves are: Back, Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quartic, Quintic, and Sinusoidal.

  • register Anitype.register(letter, submission);

    Adds a submission to the Anitype.Characters corpus. Requires a letter representing the character being animated and a submission, an object with name, website, and construct properties.

  • deregister Anitype.deregister(letter, submission);

    Removes a submission from the Anitype.Characters corpus.

Two.Polygon

This is a class provided by two.js. It makes up the form of the character and has a number of handy attributes to manipulate. This documentation goes over the necessary attributes to successfully create animations. For a full list of Two.Polygon attributes refer to this documentation.

  • construct var polygon = anitype.makePolygon(points);

    Pass an array of Two.Anchor points to return a newly constructed Two.Polygon.

  • scale polygon.scale

    A number representing the scale of the polygon. Defaults to 1.

  • rotation polygon.rotation

    A number in radians representing the rotation of the polygon (from the center of the polygon). Defaults to 0.

  • translation polygon.translation

    A vector with x and y attributes to describe the position of the polygon. Defaults to x: 0, y: 0. For more information about vectors visit two.js documentation.

  • vertices polygon.vertices

    A collection of Two.Anchors that represent the vertices of the polygon. When these vertices' x or y attributes change the polygon reshapes itself.

  • subdivide polygon.subdivide([limit]);

    Subdivide the polygon.vertices into more points connected via straight lines. Pass the amount of subdivisions with limit. Default limit is 16 passes.

  • beginning polygon.beginning

    A number, 0 - 1, that is mapped to the layout and order of vertices. It represents which of the vertices from beginning to end should start the shape. Exceedingly helpful for animating strokes. Defaults to 0. Subdividing can make the use of this smoother.

  • ending polygon.ending

    A number, 0 - 1, that is mapped to the layout and order of vertices. It represents which of the vertices from beginning to end should end the shape. Exceedingly helpful for animating strokes. Defaults to 1. Subdividing can make the use of this smoother.

Two.Anchor

This is a class provided by two.js. It is the atomic unit to create the form of a character and its underlying structure is based on Bezier Curves. Like Two.Polygon this documentation goes over the necessary attributes to successfully create animations. For a full list of Two.Anchor attributes refer to this documentation.

  • construct var anchor = new Two.Anchor(x, y, [x1, y1, x2, y2, command]);

    Using the provided methods, it shouldn't be necessary construct your own anchors. It requires an x and y which delineate the position of the vector. x1 and y1 refer to the bezier control point that lie to the left of x and y. x2 and y2 refer to the bezier control point that lie to the right of x and y. command indicates what type of line should be drawn.

  • command anchor.command

    The drawing command for the anchor point. The possibilities are Two.Commands.move, Two.Commands.line, and Two.Commands.curve.

  • x anchor.x

    The x coordinate of the anchor point. Defaults to 0.

  • y anchor.y

    The y coordinate of the anchor point. Defaults to 0.

  • controls anchor.controls

    An object that exists only when anchor.command is Two.Commands.curve. It holds the anchor's control point Two.Vectors and describes what the make up of the curve will be.

    • left anchor.controls.left

      A Two.Vector that represents the position of the control point to the “left” of the anchor's position. To further clarify, if you were to orient the anchor so that it was normalized and facing up, this control point would be to the left of it.

    • right anchor.controls.right

      A Two.Vector that represents the position of the control point to the “right” of the anchor's position. To further clarify, if you were to orient the anchor so that it was normalized and facing up, this control point would be to the right of it.

All contributions are Creative Commons Attribute 3.0 Unported · Terms & Privacy