- Type@Cooper Public Workshop Spring 2022
- 6:30–9:30pm Tuesdays Feb 1st to Apr 5th
- 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 | Week 1 Recorded Session Demo Sketches |
Interactive 'brush' tool for drawing + Readings |
2 | Variation and Repetition | Week 2 Recorded Session Demo Sketches |
Composition inspired by variation and repetition + Readings |
3 | Text, Images, and Arrays | Week 3 Recorded Session Demo Sketches |
Typographic or Image composition + Readings |
4 | Grids + Transformation | Week 4 Recorded Session Demo Sketch Collection Pt.1 Sketch Collection Pt.2 |
Static or kinetic typography composition + Readings |
5 | Motion and Animation | Week 5 Recorded Session Sketch Collection |
Movement & Animation inspired composition |
6 | Glitch Art | Week 6 Recorded Session Sketch Collection |
Glitch Art-inspired composition + Readings |
7 | Sound, Texture, and Matter.js | Week 7 Recorded Session Sketch Collection |
Final Project Idea |
8 | Final Project Idea Share Session & Technical Q/A | Final Project Progress (Feel free to book office hours if you need) | |
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
- Language is Image, Paper, Code & Cloth by Francesca Capone excerpt
- First human computers
- Font as String
- Font as Image
- Font as Vector Coordinates
- How would we describe drawings to computers?
- Describe Vera Molnar piece
*~ Break ~*
- Drawing Things!
- The Execution Loop
- Mouse Interactivity
- Randomness
- Make a brush tool or other interactive piece.
- Code is Sourdough by Romello Goodman, 2020
- Computer Grass is Natural Grass
- Vera Molar Interview
Practical Javascript:
p5.js tutorials:
- Typewriter Art
- ASCII Art
- Concrete Poetry
- Nature-Inspired algorithms
- Fallacy of algorithms
- Conways' Game of Life
- MetaFont & Knuth
- Hershey Fonts
*~ break ~*
- Working with text and custom fonts
- Variation and tuning sketches, mapping values
- Repetition (for loops)
- (beginner) Composition inspired by variation and repetition
- (intermediate) ASCII/Typewriter Art piece
- (advanceed) Recreate the Game of Life
- 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
- The Concept of a Meta-Font by Donald Knuth
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 ~*
- Arrays
- Text as strings (lists of lines; words; characters)
- Loading Images
- Loading Sound
- Typographic or Image composition
- Grid-inspired composition
- e.g. typewriter art, ASCII art, video- or image-based art
- 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.
- 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
pt 1
- nested for loops, RGB grids and ASCII Art
- Video
pt 2
- Transformations (scaling, rotation, translation, shearing)
- Layouts (map)
- WebGL and 3D
- Grid-inspired composition
- e.g. typewriter art, ASCII art, video- or image-based art
- Static or Kinetic Transform-based composition
If you are still unsure about transformations, watch the excellent Coding Train series on Transformations:
Coding Train (Daniel Shiffman):
*~ break ~*
- Excerpt from Visual Grammar by Christian Leborg
- Excerpt from Flexible Visual Systems by Martin Lorenz
- Inspirational contemporary artists and designers
- Vectors and Kinetics
- Classes
Motion & Animation Inspired Sketches (& if you have never used classes before, try to use them!)
Coding Train:
- The Aesthetics of Failure
- John Cage, 4'33"
- Glitch Art as Style & Statement
- Typography inspired by Glitch
- DIY Photo Glitch Exercise
*~ 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.
- 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
- Everest Pipkin's Are.na Collection on Glitch Art
- databending and glitch art by stAllio
- The Art of PNG Glitch
- Glitchet Resources
- 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'
- p5.js sound library
- Using Textures Part 1
*~ break ~*
- Using Textures Part 2
- Matter.js
Come up with an idea for a project that you want to work on for the next two weeks. The scale of the project is totally up to you.
In the next class, each person will have about 10 minutes to share their idea and ask for visual/technical feedback. The format is flexible, you can share links, show paper sketches, walk the class through slides, etc.)
It will help if you can come to class with enough research/progress that you know what your challenges are, so everyone can help you out! :-)
- 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
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
Books
- Generative Design
- Flexible Visual Systems by Martin Lorenz
- Morphing: A Guide to Mathematical Transformations for architects and designers by Joseph Choma
- Teasing Typography by Juliane Nöst
- Shape Grammars by Jannis Maroscheck
- Sketchbooks by Hansje van Halem
- Typewriter Art: A Modern Anthology by Barrie Tullett
- My Way to Typography by Wolfgang Weingart