12. AniType Letters

“By this art you may contemplate the variation of the 22 letters…”
— Jorge Luis Borges, The Library of Babel (La biblioteca de Babel), 1941 


Computational Typography with AniType

Computational artist/designer Jono Brandel (@jonobr1, b.1986) studied Design & Media Arts at UCLA, graduating in 2008; he is now part of the Data Arts Team in Google’s Creative Lab. He is the primary force behind Two.JS, a two-dimensional drawing API which allows agnostic use of SVG, Canvas, and WebGL in the browser. His most recent personal project is AniType, a system which invites people around the world to contribute dynamic letters brought to life with JavaScript. Jono writes:

For thousands of years, letters have sat static on the page, but thanks to today’s modern devices, they could do a lot more — they could dance and jump and wriggle their way across the screen. And you could help decide how they move.

In this exercise, you are asked to contribute two characters to AniType. Conveniently, there are 26 students in the course, and 26 letters in the alphabet. Thus, one of your letters has been assigned to you, below, according to an alphabetic list of your names. (If you don’t prefer your assigned letter, you may swap with someone else in the class, provided you inform the instructor.) Your other letter may be any letter, numeral, or nonalphanumeric character of your choice.

Learning Objectives
This exercise provides a tight, well-defined context for algorithmic play with parameterized form. Upon completion of this exercise, you will be able to:

  • Manipulate stroke letterforms computationally, with JavaScript;
  • Consider algorithmic animation in the context of dynamic typography;
  • Conceive and appraise graphical concepts for the manipulations of glyphs.

Have fun!


Inspirations

A Brief History of Title Design from Ian Albinson on Vimeo.

Dynamic, interactive and computational typography are enormous fields. There are extensive histories of experimental typography in motion graphics (especially from film titles) and shorter but no-less-interesting histories of computational typeface design, starting with (for the sake of argument) Donald Knuth’s landmark Metafont software (developed 1977-2008) — which was possibly the world’s first parametrized typeface. We will not dwell long here, but instead offer just a few key starting points for your own curiosity:

  • Rune Madsen’s excellent web lecture on the history of dynamic typography.
  • Kyuha Shim’s page, Code-Type.com http://code-type.com/about/
  • Caligraft, by Ricard Marxer Piñón, produced with his Geomerative library for Processing.

Of special note are various older computational typography projects by Peter Cho (all are Java applets, unfortunately requiring Java-safe browsing):

Jurg Lehni has written a terrific article on “Typeface as Programme“

Many of these ideas find realization in “Computed Type” by Christoph Knoth at ECAL:

And here’s a little gem by Mary Huang, Typeface: a Typographic Photobooth — a computationally-modifiable font, parametrically driven by control signals from a high-quality face-tracker:

Student Letter Assignments

In addition to a self-selected character, each student is also asked to code an animation for the AniType letter corresponding to their row in the table below. Please inform the professor if you wish to swap letters with a classmate.

Afnan Fahim A
Andre Le B
Andrew Russell C
Andrew Sweet D
Austin McCasland E
Brandon Taylor F
Celine Nguyen G
Chanamon Ratanalert H
Collin Burger I
Daniel Vu J
Emily Danchik K
Haris Usmani L
Jeff Crossman M
Joel Simon N
Kevan D. Loney O
Kevyn McPhail P
MacKenzie Bates Q
Maya Kreidieh R
Nastassia Barber S
Paul Peng T
Sama Kanbour U
Shan Huang V
Spencer Barton W
Ticha Sethapakdi X
Wanfang Diao Y
Yingri Guan Z

Instructions and Deliverables

  • Browse the letters on AniType. Examine how they are constituted and dynamized. Note how the interface works.
  • Be sure to browse the AniType documentation, and that of the two.JS library on which it is built. Get an idea for what kinds of graphical operations are possible.
  • SKETCH FIRST! Do some drawings in your notebook of your letters in their various states. Keep it simple. Keep it simple!
  • Create an account on AniType and get to work coding your characters’ animations.
  • NOTE: Jono cautions that you should “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.”

Now,

  1. In a blog post, briefly discuss your relationship to the letters you worked with.
  2. Include scans or photos of your hand-drawn sketches.
  3. In the text of the blog post, add hard links to each of your contributed characters, such as:
    http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgICAyvWPCgw/
    (You can get these links from the AniType Share button.)
  4. Use the iframe WordPress plugin (which has already been installed in this blog) to embed views of your characters. That’s how I did it up above.
  5. For each of your characters, embed your Javascript code into the blog post, using the WP-Syntax plugin. Instructions for doing so are here and here. Note that you may need to switch to the WordPress “Text”-editing mode (not Visual) editing mode at this point. (Otherwise, code with < and > characters can get messed up.)
  6. Did you achieve your intended design? Or arrive at an interesting unintended one? What’s the favorite AniType letter you came across, and why? Write a bit.
  7. Label your blog post with the Category, 12-AniType-Letters. That’s important!

Note how AniType allows you to fork someone else’s work.
Saaaay…. Am I permitted to fork someone else’s work? In this exercise, you are permitted to fork someone else’s work IF you show your work alongside that of your source. You should have demonstrably “made it your own”, and be prepared justify the originality of your effort. You must cite the forked work thoroughly (including your precursor’s name and URL of their letter) and explain the ways in which you altered their work in order to make it yours.