“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
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.
This exercise provides a tight, well-defined context for algorithmic play with parameterized form. Upon completion of this exercise, you will be able to:
- Consider algorithmic animation in the context of dynamic typography;
- Conceive and appraise graphical concepts for the manipulations of glyphs.
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.
|Kevan D. Loney||O|
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.”
- In a blog post, briefly discuss your relationship to the letters you worked with.
- Include scans or photos of your hand-drawn sketches.
- In the text of the blog post, add hard links to each of your contributed characters, such as:
(You can get these links from the AniType Share button.)
- 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.
- 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.
- 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.