- Type@Cooper Public Workshop Summer 2021
- 6:00–9:00pm EDT, 4 Wednesdays in June
- Instructors: Lynne Yun, Kevin Yeh
- Course Discussion: Slack
Every day on our screens, we interact with type in a digital format. Although it may initially seem as static and inaccessible as print, with the aid of programming we can transform, animate, and interact with letterforms on the web. This creates new opportunities for our letters to be shaped by anyone on the web, only limited by creative imagination. Letters can interact with the viewers, be affected by sound effects, or even evolve by itself depending on the time of day!
P5.js will be the main programming library for the course, a beginner-friendly Javascript framework. 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 on the browser.
During the course of four evenings, there will be weekly lectures and demonstrations on different algorithmic concepts. Students will be expected to complete weekly assignments to solidify their understanding and create typographic projects of a computational nature.
| Week | Topic | Sketch Links | Assignments |
|---|---|---|---|
| 1 | Introductions, Overview, and Conceptualizing Programs | Sketches Class Tutorial |
Interactive piece + Video Tutorials |
| 2 | Math & Animation | ||
| 3 | TBD | ||
| 4 | Mini Project Presentation + TBD |
- Make an account for the P5.js Web Editor
- Join the Generative Type Slack
Class materials: Grid paper
- 👋 Roundtable Intros & Housekeeping
- "Talking to Machines" Lecture
- Type as Machine-Readable Data Thought Exercise
*~ Break ~*
- What is a Program?
- How Do I JavaScript?
- Anatomy of a p5.js sketch
- (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.
- Shapes & Drawing by Coding Train
- Color by Coding Train
- Variables in p5.js(mouseX, mouseY) by Coding Train
- The random() Function by Coding Train
- Assignment Show & Share / Q&A
- "Kinetic Typography Sample Kit" Lecture
- Vectors
*~ Break ~*
- Classes as Templates
- Bringing in a Font File to p5.js
Create a piece that has moving typography!
- (beginner) Take demo sketches and modify them (for example: Can you swap out the 'circles' from class demo and replace them with different shapes/colors? )
- (intermediate+) Utilize classes to create an animated kinetic type sketch (if you're out of ideas, try to recreate an existing piece by someone as a learning experience!)
- Transformations Pt.1 (Translate, Rotate, Push/Pop) by Coding Train
- Transformations Pt.2 (Scale) by Coding Train
- What is a Vector? by Coding Train
- Vector Math by Coding Train by Coding Train
- Classes in Javascript with ES6 by Coding Train
- Create a sketch utilizing the textToPoints function in p5
- (beginners) Try to modify the sketches! modify text, color, shapes, etc.
- (intermediate+) Apply a way to apply motion to textToPoints. Think of possible user input (mic volume, mouse), or it could be generated on its own (such as sin waves)
- if you are still confused by (let i=0; i<100; i++) watch Incrementation Operators by Coding Train
- if you want to utilize more random() functions watch The Random() Function by Coding Train
- Steering Behaviors by Coding Train
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.