Generative Typography
- Type@Cooper Public Workshop Summer 2020
- 6:30–9:30pm, 2 sections (Tuesdays & Thursdays), June 2nd to Aug 6th
- Instructors: Lynne Yun, Kevin Yeh
- Course Discussion: Slack
Course Description
Since the invention of written language, typography as a practice has existed and adapted to the many forms of human expression — from being cast in metal to being manipulated within photographic mediums. Recently, the ability to engage in visual coding through the browser has become easier than ever, opening the doors for creatives to generate and digitally manipulate font structures and layouts to create new and exciting compositions.
This class will focus on generative design as it pertains to typography and letterforms. We will explore the building blocks of algorithmic art and apply those tools to manipulate digital type, which is, at its core, a series of data points. In addition to visual coding, the class will engage in critical discussions about the computational nature of creation. How does this differ from historical methods of typographic exploration, and what can we take from the past to build upon it? How do we create generative designs that are meaningful as opposed to frivolous?
P5.js will be the main programming library for the course, and students who are new to programming are welcome. Techniques covered in this course will include building visual compositions with code, manipulating pixel and vector data, and implementing them in real-time applications, such as computer-assisted handwriting and animation.
Learning Outcomes:
By the successful completion of this course, students will have:
- Comfort in Javascript programming
- Confidence in the P5.js environment
- Critical reasoning as it applies to computational making
- Familiarity with technological advances in typography
- An understanding of digital structures for various data types (images, font files, etc)
Class Format
In the first half of the workshop, weekly lectures will tie together typographic and programmatic concepts, and browser-based projects will be assigned with specific goals.
Lots of in-class time will be devoted to working on projects, building programmatic skills, and discussing readings and concepts related to generative typography. You should expect to spend time outside of class gaining additional background and practice with the topics covered by the projects.
In the latter half, you will apply generative form-making tools as part of your design process in a self-selected medium, such as an interactive website, animated sequence, or dynamic branding identity. We'll hold 1:1 critique sessions to support your creative and technical process.
Throughout the course, we'll be available during class and on slack for all your questions, concerns, and ideas — along with your peers.
Initial Weekly Format
Time | Description |
---|---|
6:30pm – 7:15pm | Discuss Homework |
7:15pm – 7:45pm | Reading Discussion |
7:45pm – 8:15pm | Conceptual Lecture |
8:15pm – 8:30pm | Break |
8:30pm - 9:30pm | Technical Demo & Q/A |
Course Outline
Subject to adjustment.
Topic Sections
Section 0: Before the First Week
- Make an account for the P5.js Web Editor
- Join the Generative Type Slack
Section 1: Overview and Conceptualizing Programs
Class materials: Grid paper
6:30pm 👋 Roundtable Intros & Housekeeping
7:00pm 👩🏻💻 Semester Overview
Talking to Machines
- Language as a Code System
- Quipu : Data weaving
- Language is Image, Paper, Code & Cloth by Francesca Capone excerpt
- First human computers
Type as Machine-Readable Data
- Font as String
- Font as Image
- Font as Vector Coordinates
Thought Exercises
- Human Fax Machine Experiment
- Describe Vera Molnar piece
*~ Break ~*
8:15pm 👨🏻💻 Technical Demo
What is a Program?
- Programming as Language
- What is JavaScript?
- Learning a language
- Reading documentation
- Searching for answers
How Do I JavaScript?
- Web Browsers and the JavaScript Console
- Primitives and Conditionals
- Mental Modeling
- Debugging: Finding errors and their causes
Anatomy of a P5.js Sketch
- Drawing Things!
- The Execution Loop
- Mouse Interactivity
- Reading external images and fonts
- Randomness
✏️ Week 1 Homework
Assignment
- Make a brush tool or other interactive piece.
Readings
- A Note on the Type by Dexter Sinister, 2010
- Letter & Spirit by Dexter Sinister, 2012
- Computer Grass is Natural Grass
- Vera Molar Interview
📚 Technical Resources
Practical Javascript:
p5.js tutorials:
Programming (for those who like to learn conceptually):
- Just Javascript - super accessible, visual newsletter by Dan Abramov and Maggie Appleton.
- Eloquent Javascript (Chapters 0-2) - In-depth walkthrough of JavaScript.
Additional Resources
Section 2: Art, Data, and Grids
6:30pm ✏️ Discuss Homework
7:15pm 📖 Class Reading Discussion
7:45pm 👩🏻💻 Early Generative Mediums & Artists
- Typewriter Art
- ASCII Art
- Concrete Poetry
Teaching Computers
- Nature-Inspired algorithms
- Fallacy of algorithms
- Conways' Game of Life
Generative Type Designers
- MetaFont & Knuth
- Hershey Fonts
*~ break ~*
8:30pm 👨🏻💻 Technical Demo
- Automation and Repetition (Loops!)
- Representing Collections (Arrays, Grids)
- Fonts as Images (Arrays of Arrays)
- RGB Grids
- ASCII Art From Images
- Functional Programming
- Organizing Code
- Programs within Programs
✏️ Week 2 Homework
Suggested Assignments
- (beginner) ASCII/Typewriter Art inspired piece
- (intermediate+) Creating Game of Life inspired piece
Readings
- Hieroglyphs by Aaron Marcus, 1978
- (P)(E)(R)(S)(E)(V)(E)(R)(E) by Tauba Auerbach, 2017
- Unimaginable Images by Joseph P. Covington III, 1978
(Optional Readings)
- The Concept of a Meta-Font by Donald Knuth
Additional Resources
- 7 Billion Humans Game
- Gratifying Generatives - Vera Molnár by cozy coding
- Flow Fields by Tyler Hobbs, 2020 (Advanced)
Section 3: Transformation
6:30pm ✏️ Discuss Homework
7:15pm 📖 Class Reading Discussion
7:45pm 👩🏻💻 Generative Writers, Artists & Poets
Asemic Writing
- Voynich manuscript
- Xu Bing's Book from the Sky
- Mirtha Dermisache
- Anders Hoff Inconvergent
Early Computer Art
- Hiroshi Kawano
- Ken Knowlton
- First Arabic Poster
- Manfred Mohr
Web Poetry
- Seattle Drift
- Nested by Orteil
- Lines of Force by Nick Montfort
- abcdefghijklmnopqrstuvwxyz by Jörg Piringer
- Further Sketch by Ross Goodwin
*~ break ~*
8:30pm 👨🏻💻 Technical Demo
- Transformations (scaling, rotation, translation, shearing)
- Layouts (map)
- WebGL and 3D
✏️ Week 3 Homework
Make a static or kinetic typographic piece.
Readings
- The Fuzzy Edges of Character Encoding by Everest Pipkin
- On Weaving by Anni Albers
- Designing as Visual Organization (pages 71-80)
- Computational Models for Expressive Dimensional Typography by Peter Cho, 1999
- Background, Thoughts On Type, Concluding Remarks
- Optionally, look through the experiments and other sections.
(Optional Readings)
- Black Gooey Universe
- Outer Space and Technological Progress by Roger Coqart, 1978
- On Software, or the Persistence of Visual Knowledge by Wendy Chun, 2004
- Graphics Applications In the Environment by G. F. Kammerer-Luka, 1976
Additional Resources
- Morphogenesis Resources by Jason Webb
- Periodic Functions for animation and layouts
Section 4: Glitch Art
6:30pm ✏️ Discuss Homework
7:15pm 📖 Class Reading Discussion
7:45pm 👩🏻💻 The Aesthetics of Data Bending
- The Aesthetics of Failure
- John Cage, 4'33"
- Glitch Art as Style & Statement
- Examples of Digital Glitch Art
- DIY Photo Glitch Exercise
- Typography inspired by Glitch
*~ break ~*
8:30pm 👨🏻💻 Technical Demo
- Breaking data down into components
- Representing Independent Data (Objects)
- Fonts as Vectors (Arrays of Objects)
- Case Study; Point-based Slit-Scanning
- Case Study: Image-based Slit-Scanning
✏️ Week 4 Homework
Create a Glitch-Aesthetic inspired piece.
Readings
- Glitch Aesthetics by loriemerson
- Lossy text compression, for some reason?! by Allison Parrish
- GltchLnguistx: The Machine in the Ghost / Static Trapped in Mouths (Note: You may have to Google your way through Flash links)
Optional Readings
- The Aesthetics of Failure by Kim Cascone
- GTLCH AESTHETICS by Iman Moradi
If you want to read more...
(Similar material as above but different takes)
- The Glitch Moment(um) / Glitch Studies Manifesto
- Thoughts on Glitch[Art]v2.0
- Compression Aesthetics: Glitch from the Avant Garde to Kanye West by IVC Author
- 100 Takes on 'Glitches and bugs in digital art'
Additional Resources
- Everest Pipkin's Are.na Collection on Glitch Art
- databending and glitch art by stAllio
- The Art of PNG Glitch
- Glitchet Resources
Section 5: Movement and Animation
6:30pm ✏️ Discuss Homework
7:15pm 📖 Class Reading Discussion
7:45pm 👩🏻💻 Inspirational Artists
- Excerpt from Visual Grammar by Christian Leborg
- Inspirational contemporary artists and designers
*~ break ~*
8:30pm 👨🏻💻 Technical Demo
- Flow
- Using math, flow over time, representing movement
- Animation functions, easing
- Following polyline paths — spirals etc.
- Mouse movement paths
✏️ Week 5 Homework
You will be working on a mini-project of your own over the next two weeks. For next week, please come prepared to share your idea and a draft (so that you can ask for any technical help if need be :-))
Readings:
(Not Required) Readings:
- The Hacker Aesthetic of Minimalist Code by Daniel Temkin
- Materials for Computer People by Kelli Anderson
Optional Readings:
Additional Resources
- Generative Art Theory
- The Recode Project: An Active Archive of Computer Art
Technical Resources
General Resources
Shaders
For image-processing heavy operations like these, using the GPU as opposed to the CPU is a lot faster. You can do this via shaders! The downside is that shaders require a language of their own called GLSL, but is worth tackling if this is in your interest.
Accessibility
- If your project is intended for people to interact with, check out Designing for accessibility is not that hard by Pablo Stanley. For us, this might mean things like:
- Adding enough color contrast
- Adding alt-text if applicable
- Supporting keyboard navigation
Office Hours
You can sign up for office hours in 20 minute slots. They're typically available every Friday and Sunday. Let us know if all the slots are taken or timezone doesn't work for you and we can figure out an alternative time slot!
What Should I Do After the Course?
Pretty much whatever is on your radar of interest! :-) Here are some rabbit holes I would recommend...
Video/Tutorial Series
-
Nature of Code by Dan Shiffman
- Youtube Series are also available!
Other Frameworks & Libraries
Shaders
- Book of Shaders
- P5.js Shader Tutorial Series
- P5.js Shader example collection on Github
- Shader School
Online Courses (at least due to COVID-19)
Conferences * EYEO