“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
In this assignment you will write code to animate a simple graphic form, using a JavaScript template and dynamic website built for sharing such designs. The purpose is to exercise and test your craft in expressively controlling form with code.
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. One of his most recent personal projects 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 a character to AniType. Your letter may be any of the 42 characters represented in the AniType character set:
ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-!?*/+
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!
[iframe src=”http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgICA8vyOCQw/” width=”620″ height=”360″]
Inspirations
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:
Instructions
- 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.”
Deliverables:
- 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:
http://www.anitype.com/entry/agtzfmFuaXR5cGVjb3IUCxIHbGV0dGVycxiAgICAyvWPCgw/
(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:
- Embed your Javascript code into the blog post as well, 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.)
- 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.