- Type@Cooper Public Workshop Fall 2020
- 6:30–9:30pm, Thursdays, Oct 8th to Dec 17th
- Instructors: Lynne Yun, Kevin Yeh
- Course Discussion: Slack
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.
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)
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.
| 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 |
Subject to adjustment.
| Week | Topic | Recordings & Sketches | Assignments |
|---|---|---|---|
| 1 | Introductions, Overview, and Conceptualizing Programs | Recording Sketch Collection |
Interactive piece + Readings |
| 2 | Art, Data, and Grids | Recording | Grid-inspired composition + Readings |
| 3 | Transformation | Recording | Static or kinetic typography composition + Readings |
| 4 | Glitch Art | Recording | Glitch Art-inspired composition + Readings |
| 5 | Movement and Animation | Recording | Mini Project Ideation |
| 6 | Mini Project - Ideation and Planning | Recording | Mini Project Draft |
| 7 | Student Presentations | Final Project Ideation | |
| 8 | Final Project - Ideation and Planning | Final Project Draft | |
| 9 | Final Project - Troubleshooting | Final Project Progress | |
| 10 | Student Presentations | 🎉 |
- Make an account for the P5.js Web Editor
- Join the Generative Type Slack
Class materials: Grid paper
- Language as a Code System
- Quipu : Data weaving
- Language is Image, Paper, Code & Cloth by Francesca Capone excerpt
- First human computers
- Font as String
- Font as Image
- Font as Vector Coordinates
- Human Fax Machine Experiment
- Describe Vera Molnar piece
*~ Break ~*
- Programming as Language
- What is JavaScript?
- Learning JS and p5
- Reading documentation
- Searching for answers
- Web Browsers and the JavaScript Console
- Primitives and Conditionals
- Mental Modeling
- Debugging: Finding errors and their causes
- Drawing Things!
- The Execution Loop
- Mouse Interactivity
- Reading external images and fonts
- Randomness
- (beginner) Make an interactive brush tool
- (intermediate+) Make a mini drawing program. Think about how people could swap between different kinds of brushes, change canvas color, etc.
Note: Please be prepared to take a thought to bring back for discussion next week. (e.g. a quote that resonated with you, an opinion that you disagreed with, etc.)
- Shapes & Drawing by Coding Train
- Color by Coding Train
- Variables in p5.js(mouseX, mouseY) by Coding Train
- The random() Function by Coding Train
- A Note on the Type by Dexter Sinister, 2010
- Letter & Spirit by Dexter Sinister, 2012
Video-based: p5.js basics with Coding Train (Dan Shiffman): Code! Programming with p5.js
Text-based: tutorials via Allison Parrish
Official Documentation:
(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.
- Typewriter Art
- ASCII Art
- Concrete Poetry
- MetaFont & Knuth
- Hershey Fonts
*~ break ~*
- 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
- (beginner) ASCII/Typewriter Art inspired piece
- (intermediate+) Creating Game of Life (Feel free to make a variation on it also)
- while and for Loops with Coding Train
- Nested Loops with Coding Train
- What is an array? by Coding Train
- Arrays and Loops by Coding Train
- Using the for loop with camera feed in p5.js with Lynne
- Javascript Objects with Coding Train
- Function Basics with Coding Train
- Uploading Media Files with Coding Train
- The Fuzzy Edges of Character Encoding by Everest Pipkin
- (P)(E)(R)(S)(E)(V)(E)(R)(E) by Tauba Auerbach, 2017
- Hieroglyphs by Aaron Marcus, 1978
- The Concept of a Meta-Font by Donald Knuth
- Computers Are Hard: representing alphabets with Bianca Berning
- 7 Billion Humans Game
- Flow Fields by Tyler Hobbs, 2020 (Advanced)
- Typewriter Art: A Modern Anthology by Barrie Tullett
- The New Concrete: Visual Poetry in the 21st Century
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 ~*
- Transformations (scaling, rotation, translation, shearing)
- Creating Layouts (map)
- WebGL and 3D
Make a static or kinetic typographic piece.
- On Weaving by Anni Albers
- Designing as Visual Organization (pages 71-80)
- Unimaginable Images by Joseph P. Covington III, 1978
If you're not sure about transformations, concrete your understanding by going through one or two of these!
Text Based Tutorial
- Transformations and Functions by Allison Parrish
Video Based Tutorial
- Transformations Pt.1 with Coding Train
- Transformations Pt.2 with Coding Train
- Transformations Pt.3 with Coding Train
- Black Gooey Universe
- On Software, or the Persistence of Visual Knowledge by Wendy Chun, 2004
- Morphogenesis Resources by Jason Webb
- Periodic Functions for animation and layouts
- 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 ~*
- Breaking data down into components
- Objects and Agents
- Fonts as Vectors (Arrays of Objects)
- Case Study; Point-based Manipulation
- Case Study: Image-based Copy
Create a Glitch-Aesthetic inspired piece.
It is election week with lots of stressors going on! Please take time to take care of yourself first.
- Lossy text compression, for some reason?! by Allison Parrish
- Glitch Aesthetics by loriemerson
-
GltchLnguistx: The Machine in the Ghost / Static Trapped in Mouths (Note: You may have to Google your way through Flash links)
-
The Aesthetics of Failure by Kim Cascone
-
GTLCH AESTHETICS by Iman Moradi
(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'
- Everest Pipkin's Are.na Collection on Glitch Art
- databending and glitch art by stAllio
- The Art of PNG Glitch
- Glitchet Resources
- Excerpt from Visual Grammar by Christian Leborg
- Inspirational contemporary artists and designers
*~ break ~*
- Flow
- Using math, flow over time, representing movement
- Animation functions, easing
- Following polyline paths — spirals etc.
- Mouse movement paths
- Image Layers & Masking
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 :-))
- The Hacker Aesthetic of Minimalist Code by Daniel Temkin
- Materials for Computer People by Kelli Anderson
- We Talked To The Artists Who Made A Pokemon Glitch Zine
- Generative Art Theory
- The Recode Project: An Active Archive of Computer Art
- Hosting a p5 sketch on github pages by Coding Train
Office Hours are here
Please reach out if you would like an alternative time slot! :-)
- 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