BioGlyph: Face to One-Line Drawing

I just had my last ITP Spring Show a few weeks ago. This time, I presented a project called BioGlyph, which is an interactive web application that creates a one-line drawing of your face.

BioGlyph explores the idea of using facial features as a personal signature and rethinking identity through generative art. This is a quick demo showing how it works:

What surprised me most was that I built this project just six hours before the show, yet more than 150 people tried it out and collectively archived over 400 faces. Here are some selected examples:

During this whole process, I caught up with old friends, made new friends, and enjoyed watching their reactions as their one-line portraits emerged from nothingness.

The most rewarding part was watching friends, family, and couples gather around the screen, creating and archiving their faces together. Here is one my friends created: Jin and Chloe.

Their happiness made me feel that everything was worth it.

Initially, I didn't plan to participate in the show because I was extremely busy at the time. However, I changed my mind after my professor said, "Don't miss the opportunity to be part of one of the most fun and popular shows in NYC." Beyond that, I also wanted to fulfill a promise I had made to my friends: to create a unique memory that everyone could take with them after graduation.

From Name to Face

At first, I wanted to create a project that procedurally generates your face from your name, inspired by a Chinese artist called Fangyuan Uncle. I even mocked up the idea by drawing it manually instead of generating it procedurally:

Unfortunately, I couldn't find a good way to generate it procedurally. The hardest part of this task is that the problem itself is difficult to define. For example, how do you measure the similarity between the input face and the generated face? Furthermore, after abstraction and sketching, is a character still the same character? What makes an A an A?

My initial approach was to map characters to different facial features, such as the nose, eyes, and mouth, and then use envelopes to shape the characters around those features. However, the results didn't look very convincing.

Digital penPal

Due to time constraints, I switched to another idea: creating a digital version of penPal, where people could draw anything they wanted using a moving stroke.

However, it turned out that it wasn't easy for participants to figure out what to draw or quickly understand the purpose of the project. After discussing it with my friend Sai, I eventually gave up on the idea.

Progressive Self Portrait

However, all these drawings reminded me of an experiment I did this January called Progressive Self Portrait, where I converted my face into a single line and progressively animated it using Fourier Series based on Mike Bostock's exploration.

So I thought, why not bring this experience to the audience?

Building BioGlyph

After making up my mind, I got to work. Compared to the earlier version, I used MediaPipe to detect different facial features and determine an ordering that minimized line overlaps, making the generated portrait as clean as possible. I also used additional image-processing techniques to extract the hair. I then worked with my friend Jin to quickly prototype the interaction flow and visual appearance of the website.

After people tried it, I received some interesting feedback:

1. Why do all the faces look so similar?
2. Can multiple people try it together?
3. Will you continue working on your original idea?
4. It's nice to see face-detection technology being used to create something, rather than just applying filters or effects to faces.

For the first one, I think it's a potential area for improvement. Right now, I use the points provided by MediaPipe to draw the facial features, so they tend to look similar because they are based on simple geometric shapes. A better approach would be to analyze the facial features using image-processing techniques and extract their actual contours.

For the second one, I implemented the improvement immediately after the first day of the show. On the second day, people were able to create group faces together!

As for the third one, probably. However, next time I'd like to combine it with computer vision techniques and revisit the original idea.

Generally speaking, I'm satisfied with this project. Although it's simple and was put together very quickly using Cursor and some of my previous code, it genuinely brought people joy. I think that's enough. Here's the one I liked the most: four people trying it together.

With the rapid adoption of AI, it's becoming increasingly easy to create complex things. What's becoming harder is creating simple things that still feel meaningful. In that sense, this project was also an experiment in seeing whether AI could help create something simple, personal, and worth sharing. In other words:

Simple things still matter.

Finally, here are two photos: one taken during the last few minutes of the show, and another with my friends afterward.

If you want to try BioGlyph, here is the link: https://bio.bairui.dev/ and the code is open-sourced as well: https://github.com/pearmini/bio-glyph