Workshop at MICA February 23–25 Yehwan Song & Vera van de Seyp

Introduction

Duration 2 days and a short intro Where Maryland Institute College of Art (MICA) What Creating an interactive typographic work With HTML + Javascript Requirement Laptop with webcam Structure Groups of 2–3 people Tutors Yehwan Song & Vera van de Seyp

"Speaking with your hands" combines design principles, ideas with a little bit of creative coding, and real-time interaction between the physical body and digital typography through gestures. The goal of this workshop is to explore creative ways in which typography can be manipulated and animated in response to human movement, captured via webcam and processed with the MediaPipe framework, focusing on the idea behind the interaction.

This workshop offers an introduction to programming for design. However, we want to focus on the ideas behind the interaction, rather than just the programming. Because this can be quite content-heavy, we make groups of 2–3 people so we can focus on the ideas more.

To participate in this workshop, you'll need:

A laptop with internet connection and a working webcam
Visual Studio Code with Live Server

Day 1: Saturday February 24

10 am Creative coding set up 12:30 pm Break 1 pm Working on ideas + sketches 4 pm Present ideas

The first day, we will do a coding introduction and explain the examples that we will work from.

After a break, we will break up in groups and start working on ideas. Sketch your ideas with your favorite medium (paper/software both allowed). It's okay if the ideas still shift a little, but these visual sketches will help us as a guide while we are programming.

Some things to consider:

What do you want to communicate?
How can you make a conversation between two people?
Which example can you work from?
How and where do you want to record your interaction?

Collect your favorite sketch. At the end of the day, present and discuss the ideas in the group.

Day 2: Sunday February 25

10 am Working on projects 12:30 pm Break 1 pm Working on projects 3 pm Wrapping up 4 pm Presentations

This day, we are going to take our ideas and work on the code part. Also think of the typography. Try to divide the work: one person can try to debug while the other does the interaction.

Around 3, record your work and convert it to mp4 web format. Ideal format is landscape 1920 x 1080 px, portrait 1080 x 1920 px or square 1080 x 1080 px. Make sure the video is less than 50 MB per group. If you need to format it, we can recommend Handbrake to compress it.

Upload the final work here.

Resources

Code examples

Tutorial slides

Since programming is largely searching, especially in the beginning — but really, always a little — here are some resources that you could probably use. Some are obvious, but they are essential if you don't know them yet!

Mediapipe
p5.js reference page
The Coding Train: super fun tutorials on p5.js

Other links:
Visual Code Studio text editor
Fontstruct: A free type creation interface

Some open type foundries:
League of Moveable type
Velvetyne
Open Foundry
Google Fonts
Font Fabric
Type Type

All final work
Upload a recording of the final work here.

1920×1080 px or 1080×1920 px or 1080×1080 px
< 50 MB per video
Max 1 minute per video

We can recommend Handbrake to compress videos.