- Type@Cooper Public Workshop Summer 2021
- 6:00–9:00pm EDT, 4 Mondays in June
- Instructors: Lynne Yun, Kevin Yeh
- Course Discussion: Slack
In our modern world, the ‘glitch’ can be found everywhere. The idea of the ‘glitch’ as art is ripe with history that has involved experimentation in a myriad of forms. Meanwhile, the proliferation of new tools and frameworks to aid in visual coding on the web has become easier than ever, opening the doors for creatives to explore the space of font structures and layouts in new and radical ways.
This area of experimentation seems ripe for creatives wanting to explore the concepts of glitch aesthetics and data bending. What if a letterform could be affected by sound? What happens when you manipulate the raw components of a font? What new ideas can we gain from breaking away from pixel-perfect intentionality?
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 | Hello Glitch! | Sketches (loops and grid) Live Class Examples Class Tutorial |
|
| 3 | Diving Deeper into p5.js | ||
| 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
Visual References:
- (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
- Create a sketch that's inspired by 'Glitch' (Recommend going through the readings below beforehand)
Watch these video series by Coding Train (Daniel Shiffman)
- Else & Else if
- Boolean Variables
- While and For Loops *highly recommend
- Nested For Loops *highly recommend
- (beginner): Create a sketch based off the demo sketch(es)
- (intermediate+): Create a sketch utilizing a dataset (recommend grabbing one from Corpora)
Watch these video series by Coding Train (Daniel Shiffman)
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.