Generative Typography is a graphic design course at the intersection of computation and typography. We will explore the possibilities of code as a creative medium and use programming to manipulate digital type. Through a series of workshops and hands-on exercises students will learn how to build compositions with code translating a number of design principles such as grids, color, and motion. We will explore various areas of thinking from basic form making to generating typographic systems that are dynamic and unique. By the end of the course students will be familiar with creating compositions using code. P5.js is the main programming library for the course, and no prior programming experience is needed.
The course was created by Romello Goodman and offered at Cooper Union and MICA.
- 1.2 Shapes and Color
- 1.3 Text
- 1.4 Custom Shape from an SVG
- 1.5 Window Resize
In this class we'll dive into using computation to create grid systems. Through the use repetition and conditionals we will begin to add more logic to our programs. header-2.png
- Create a letterform using p5.js shapes. The design doesn't need to resemble a latin letterform.
- Create a composition that uses at least one for loop.
In this class we will begin to add animation and motion to our compositions. Starting with basics shapes we will move to exploring different examples of Kinetic typography.
In this class we will dive deeper into Generative Typography. Using p5.js we will explore different ways to manipulate text using code.
- 4.1 Text Basics
- 4.2 Custom Fonts
- 4.3 Transformations
- 4.4 Text Transformations Shear
- 4.5 Text Transformations Rotate
- 4.6 Load Font via HTML
In this class we will use p5's textToPoints functionality to explore new ways of interacting with fonts using code.
- Create a composition that animates a transformation.
- Create a composition of a single letter using p5.textToPoints().
- 5.1 Javscript Arrays
- 5.2 Javscript Objects
- 5.3 p5.textToPoints
- 5.4 p5.textBounds
- 5.5 Text Points Map
- 5.6 Text Points Animation
- 5.7 Text Points Animation Layers
In this class we will explore Generative design systems through the use of sliders. By adding value ranges we will begin to think of our compositions as systems instead of a single output.
- Create a letter using p5.textToPoints()
- Revisit one of your previous compositions and add slider functionality to explore new forms
In this class we will apply all of our previous learnings to the 3D realm.
In this class we continue our exploration into Generative design systems. Exploring how concepts like randomness, noise and curation play a role in the design process.
- Create a sketch that uses p5's noLoop() and random() functions.
- Create a prototype of your final project.
- 8.1 Random Position
- 8.2 Random Position Setup
- 8.3 Noise Position
- 8.4 Noise Scale
- 8.5 Noise Textpoints
The objective of the main project will be to build a generative font/type tester.
Throughout the course we will have creative technologists, designers and artists come and speak to the class. The typical class agenda might be altered to accommodate the speaker. For each speaker we plan to do a work presentation followed by a Q+A session.
André Burnier, November 2022
Lynne Yun & Kyuha Shim (Q), April 2022
Asemica Team, April 2022
Asemica is a generative algorithm that creates typographic compositions. As traditional asemic writing is to handwriting, Asemica is to typography: it creates asemic writing by the hand of a machine. The team behind Asemica consists of Emily Edelman, Dima Ofman, & Andrew Badr.