- 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
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.
- 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 a language
- 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
- Make a brush tool or other interactive piece.
- A Note on the Type by Dexter Sinister, 2010
- Letter & Spirit by Dexter Sinister, 2012
- Computer Grass is Natural Grass
- Vera Molar Interview
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.
- Typewriter Art
- ASCII Art
- Concrete Poetry
- Nature-Inspired algorithms
- Fallacy of algorithms
- Conways' Game of Life
- 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 inspired piece
- 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
- 7 Billion Humans Game
- Gratifying Generatives - Vera Molnár by cozy coding
- Flow Fields by Tyler Hobbs, 2020 (Advanced)
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)
- Layouts (map)
- WebGL and 3D
Make a static or kinetic typographic piece.
- 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
- 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
- Representing Independent Data (Objects)
- Fonts as Vectors (Arrays of Objects)
- Case Study; Point-based Slit-Scanning
- Case Study: Image-based Slit-Scanning
Create a Glitch-Aesthetic inspired piece.
- 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)
- 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
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
- Generative Art Theory
- The Recode Project: An Active Archive of Computer Art
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.
- 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
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!
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