Mask Generator

Generativemasks. Made in p5.js by Shunsuke Takawo.

Introduction

‍I write code as though I’m improvising with a musical instrument — for me, sketching has become like humming a melody.

- Shunsuke Takawo, Right Click Save

In parameterized design, you are a conductor, not just one musician. Instead of creating a single design by drawing every detail step-by-step, you use code to set up rules (called parameters) that can create many different versions of a design.

Kabuki theater in Japan uses expressive masks to show different roles in society. For this topic, you will reflect on your own background and design a “mask generator” using customized variables and the random() feature.

The generator will use mouse or keyboard interactions to create different versions of your mask. Test it, make changes, and pay close attention to the details as you improve your design.

Premise

Build a simple generator that makes multiple variations of the same mask.

Learning Objectives

Grade 6~8

• Create clearly named variables that store data, and perform operations on their contents.
• Test and analyze the effects of changing variables while using computational models.
• Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
• Discuss issues of bias and accessibility in the design of existing technologies.
• Hands-on experience with variable scope.

Grade 9~12

• Study, discuss, and think critically about the potential impacts and implications of emerging technologies on larger social, economic, and political structures, with evidence from credible sources.
• Compare levels of abstraction and interactions between application software, system software, and hardware.

Technical Terms & p5.js Elements

Grade 6~8

• System Variables vs. User-Defined Variables
• mouseX, mouseY
• width, height
• Data types
• Global vs. local variables
• random()
• mousePressed(), keyPressed()
• console.log()

Grade 9~12

• Iterative design

References & Artworks for Discussion

• Weird Faces, Matthias Dörfelt
• Stranger Vision, Heather Dewey-Hagborg
• Screen Queen Face Fail, Harris Kornstein

Timeline

This project will take approximately four 45-minute sessions:

1. Discussing art references and warm-up cxercise.
2. Designing the mask generator.
3. Coding the mask generator in p5.js.
4. Making iterations as needed. Sharing out.

Warm-Up Exercises

Planning your Mask Generator Project

1. Draw Your Grid
   • Use your paper and pencil to draw a large square (around 4x4 inches).
   • Divide the square into a 20 x 20 grid with a ruler.
   • This will help you keep things lined up and make variations easier to compare.
2. Create Two Key Expressions
   • Using the Wheel of Emotions as a reference and select two types of emotional expressions.
   • In the first square, draw a mask showing Expression 1 (e.g., inspired, courageous, respected).
   • In the second square, draw the same face showing Expression 2 (e.g., worried, overwhelmed, alienated).
3. Keep the features the same, but change features like:
   • Eyes: big, small, squinted
   • Mouth: smiling, frowning, open, closed
   • Eyebrows: raised, tilted, flat
4. Design the In-Between Faces
   • Now, imagine how the mask moves from the first expression to the second.
   • On a new piece of paper, draw 2–3 versions that mix parts of each expression. For example: a mask that’s just starting to frown, or eyes that are half-closed.
5. Observe & Reflect
   • Compare your key expressions:
     • What changes the most between expressions?
     • Which parts stay mostly the same?
     • What combinations feel natural or interesting?