index
making playful web-based experiences && drawing with code.


+ email
+ github
+ are.na
+ instagram
+ sketch
+ teaching
+ x/twitter
face paint
web, sketch


p5.js, ml5.js
faces paint is a series of interactive web sketches where faces and body movment serve as a paint brush on the canvas. Each sketch explores the opportunities of making ourselves into a pattern part o the sketch, answering if we were playing and drawing with ourselves or the machine.

the first sketch, trace and displacement, intends to show the path where the face leaves or gets pulled apart from the body to the users who are in the frame in the beginning of the sketch after they move, making the users feel the displacement and disassembling of the face and body, and the loss and disappearing of the correct position or path where the face should be placed.

the second version, frames and breaks, involves the idea of breaking the pattern using a grid where a face is printed every frame. instead of stopping the grid when there is no face detected, a blank space will be filled into the grid until a face is detected again, presenting as the randomness in the grid.


finally, time and movement, divides users movement into segments on a grid. as a segment of the video is not shown until a period of time is reached, each segment obtains latency compared with users’ current movement. ideally, the users should move. if the user changes the movement as each segment is shown, the sketch will be formed as a series of video records of their movement during different periods. if the user make a consistent movement during the whole gird, the sketch will be formed as a series of delayed and previous movements.







index  next
scroll to top