/generative-typography-SP22

Class repository for Generative Typography workshop (Type@Cooper Spring 2022)

Generative Typography

  • Type@Cooper Public Workshop Spring 2022
  • 6:30–9:30pm Tuesdays Feb 1st to Apr 5th
  • 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.

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 🎉

Topic Sections

Section 0: Before the First Week

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
  • 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

  • How would we describe drawings to computers?
  • Describe Vera Molnar piece

*~ Break ~*

8:15pm 👨🏻‍💻 Technical Demo

Anatomy of a P5.js Sketch

  • Drawing Things!
  • The Execution Loop
  • Mouse Interactivity
  • Randomness

✏️ Week 1 Homework

Assignment

  • Make a brush tool or other interactive piece.

Readings

📚 Technical Resources

Practical Javascript:

p5.js tutorials:

Section 2: Variation and Repetition

6:30pm ✏️ Discuss Homework

7:15pm 📖 Class Reading Discussion

7:45pm 👩🏻‍💻 Early Generative Mediums & Artists

Teaching Computers

Generative Type Designers

*~ break ~*

8:30pm 👨🏻‍💻 Technical Demo

  • Working with text and custom fonts
  • Variation and tuning sketches, mapping values
  • Repetition (for loops)

✏️ Week 2 Homework

Suggested Assignments

  • (beginner) Composition inspired by variation and repetition
  • (intermediate) ASCII/Typewriter Art piece
  • (advanceed) Recreate the Game of Life

Readings

(Optional Readings)

Section 3: Text, Images, and Arrays

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

  • Manfred Mohr

Web Poetry

*~ break ~*

8:30pm 👨🏻‍💻 Technical Demo

  • Arrays
  • Text as strings (lists of lines; words; characters)
  • Loading Images
  • Loading Sound

Week 3 Homework

Suggested Assignments

  • Typographic or Image composition
  • Grid-inspired composition
    • e.g. typewriter art, ASCII art, video- or image-based art

Readings

(Optional Readings)

Section 4: Grids and Transformations

6:30pm ✏️ Discuss Homework

7:15pm 📖 Class Reading Discussion

7:45pm 👨🏻‍💻 Technical Demo

pt 1

  • nested for loops, RGB grids and ASCII Art
  • Video

pt 2

  • Transformations (scaling, rotation, translation, shearing)
  • Layouts (map)
  • WebGL and 3D

Week 4 Homework

Suggested Assignments

  • Grid-inspired composition
    • e.g. typewriter art, ASCII art, video- or image-based art
  • Static or Kinetic Transform-based composition

(optional) Tutorial Videos

If you are still unsure about transformations, watch the excellent Coding Train series on Transformations:

Coding Train (Daniel Shiffman):

Section 5: Motion and Animation

6:30pm ✏️ Discuss Homework

7:00pm 👨🏻‍💻 Tech Q/A Session

*~ break ~*

8:30pm 👩🏻‍💻 Inspirational Artists

  • Excerpt from Visual Grammar by Christian Leborg
  • Excerpt from Flexible Visual Systems by Martin Lorenz
  • Inspirational contemporary artists and designers

9:00pm 👨🏻‍💻 Technical Demo

  • Vectors and Kinetics
  • Classes

✏️ Week 5 Homework

Motion & Animation Inspired Sketches (& if you have never used classes before, try to use them!)

📚 Technical Resources

Coding Train:

Section 6: 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
  • Typography inspired by Glitch
  • DIY Photo Glitch Exercise

*~ break ~*

8:30pm 👨🏻‍💻 Technical Demo

  • Breaking data down into components
  • Objects and Agents
  • Fonts as Vectors (Arrays of Objects)
  • Case Study; Point-based Manipulation
  • Case Study: Image-based Copy

✏️ Week 6 Homework

Create a Glitch-Aesthetic inspired piece.

Readings

If you want to read more...

Even More References

Section 7: Sound, Texture, and Matter.js

6:30pm ✏️ Discuss Homework

7:00pm 👨🏻‍💻 Technical Demo

  • p5.js sound library
  • Using Textures Part 1

*~ break ~*

  • Using Textures Part 2
  • Matter.js

✏️ Week 7 Homework

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! :-)


General Resources

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

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

Other Frameworks & Libraries

Shaders

Online Courses (at least due to COVID-19)

Conferences

Books