“By this art you may contemplate the variation of the 22 letters…”
— Jorge Luis Borges, The Library of Babel (La biblioteca de Babel), 1941
“To create a typeface that is easily malleable in the computational medium, the constituent shapes must be reduced to compact numerical forms.”
— John Maeda, 2000
[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgICAkq-eCww/” width=”100%” height=”360″]
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 a character to AniType. Your letter may be any of the 42 characters represented in the AniType character set:
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.
[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgICA8vyOCQw/” width=”620″ height=”360″]
Here is a brief history of title design in films, illustrating evolving concepts of how letters might become dynamic forms. (Many more examples can be found at http://www.artofthetitle.com/):
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, which discusses the surprisingly close relationship between typography and computation.
- 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.
- Jurg Lehni has written a terrific article on “Typeface as Programme“
Of special note are various older computational typography projects (all are Java applets, unfortunately difficult to view in many browsers):
- Type Me, Type Me Not by Peter Cho (1997)
- Letterscapes by Peter Cho (2002)
- WordScapes by Peter Cho (2008)
- Alphabot by Nik Pashenkov (2001)
Many of these ideas find realization in “Computed Type” by Christoph Knoth at ECAL:
Here is a Bachelor Thesis by Michael Flückiger und Nicolas Kunz, from Bern 2009:
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:
- Read Rune Madsen’s excellent web lecture on the history of dynamic typography, starting from the section “Rule-based Typography” about halfway down.
- SKETCH FIRST! Do some drawings in your notebook of your letter in its various states. Try to devise a concept for how this letter wants to move. Keep it simple.
- Browse the letters on AniType. Examine how they are constituted and dynamized. Note how the AniType interface works.
- Examine the AniType documentation, and also that of the two.JS library on which it is built. Get an idea for what kinds of graphical operations are possible.
- Revise your sketches with what you have learned from the AniType documentation.
- Create an account on AniType and start coding your character’s animation. Allow yourself to change your concept as you respond to the “feel” of the animation.
- 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 letter you chose.
- In your blog post, Include scans or photos of your hand-drawn sketches.
- In the text of the blog post, add hard links to your contributed character, such as:
(You can get these links from the AniType Share button.)
- In the “Text” (HTML) editing mode of WordPress, use the iframe shortcode to embed views of your characters. That’s how I did it up above, as in the example:
- Did you achieve your intended design? Or did you arrive at an interesting unintended one? What’s the favorite AniType letter you came across, and why? Write a bit.
- Title your blog post Yourname-AniType.
- Label your blog post with the Category, 11-AniType. That’s important!
Am I permitted to fork someone else’s work on AniType?
In a word, No. You can certainly study someone else’s work. But you must devise and implement your own concept.