One line. Your face. Nothing else.

BioGlyph is an interactive web app that turns your face into a single continuous line — a personal signature drawn from your own features, not a filter.

Built in six hours for the ITP Spring Show 2026, it was tried by 150+ people who collectively archived 428 faces. Friends gathered around the screen, watched their portraits emerge from nothing, and took home something uniquely theirs.

You are welcome here. Open the live app, point your camera, and watch your one-line portrait appear. When you like it, press Add to Archive — your face joins the online gallery at the top of the archive, alongside the ITP Spring Show collection. Hover your portrait (marked with *) to delete it anytime.

Simple things still matter.

Try it live → · Explore the archive → · Read the story →

1. Capture — Point your webcam at the screen.
2. Extract — MediaPipe detects facial landmarks; image segmentation pulls out hair, ears, and contours.
3. Connect — Features are ordered to minimize line overlap and merged into one path.
4. Reveal — A Fourier-series animation progressively reconstructs the drawing, inspired by Mike Bostock's Fourier Series — Progressive.
5. Keep — Download PNG or SVG, replay the animation, or press Add to Archive to share your portrait online.
6. Browse — The archive lists community faces first, then 428 portraits from ITP Spring Show 2026.

Up to four faces can be detected at once — couples, friends, whole groups — each merged left to right into a shared one-line portrait.

BioGlyph explores facial features as a form of personal signature and identity through generative art. It asks a quiet question: after abstraction and sketching, what still makes a face yours?

The project grew out of earlier experiments — a Progressive Self Portrait using Fourier series, abandoned ideas around name-to-face procedural generation, and a digital penPal that never quite clicked. What worked was the simplest thing: point a camera, watch a line appear, feel something.

Webcam / image
      │
      ▼
┌─────────────────────────────────────┐
│  MediaPipe Face Landmarker          │  eyes, nose, lips, face oval
│  MediaPipe Image Segmenter          │  hair, ears (multiclass mask)
└─────────────────────────────────────┘
      │
      ▼
┌─────────────────────────────────────┐
│  Contour extraction + ordering      │  minimize overlaps, merge multi-face
│  buildOneLinePath()                 │  lips → nose → eyes → hair → jaw …
└─────────────────────────────────────┘
      │
      ▼
┌─────────────────────────────────────┐
│  Fourier progressive reconstruction │  epicycle animation on canvas
│  Export PNG / SVG · Add to Archive  │
└─────────────────────────────────────┘
      │
      ├─ Community ──► Supabase `faces` (browser ID, delete own)
      └─ Show archive ─► itp-spring-show-2026.json (428 portraits)

Face pipeline (src/facePipeline.js) — landmark-based feature outlines, segmentation-backed hair and ear contours, Ramer–Douglas–Peucker simplification, and greedy path ordering so the stroke reads cleanly as one line.

Animation (src/fourierOneLineAnimation.js) — resamples the path, computes DFT coefficients, and animates progressive reconstruction with adjustable epicycle count.

Archive (/archive, /face/:id) — Community portraits from Supabase (faces table, newest first), then ITP Spring Show 2026 from bundled JSON; each entry has a shareable URL and downloadable assets.

A companion Jupyter notebook (python/bio_glyph_face_pipeline.ipynb) mirrors the extraction logic for offline experimentation.

All face processing runs in the browser — no server-side vision, no API keys for MediaPipe.

Community archive uses the Supabase anon publishable key in the client (VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY). A stable bioglyph_browser_id in localStorage ties each submission to your device so you can delete only your own portraits.

Requirements: Node.js 18+

git clone https://github.com/pearmini/bio-glyph.git
cd bio-glyph
npm install
cp .env.example .env.local   # optional: enable Add to Archive
npm run dev

Open http://localhost:5173. Allow camera access when prompted.

1. Run supabase/faces.sql in the Supabase SQL Editor (bairui-studio).
2. Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY in .env.local and on Vercel (project bio-glyph).

npm run build    # production build
npm run preview  # preview production build locally
npm run lint     # ESLint

MediaPipe WASM and model files load from CDN on first use; a short delay on the first generation is normal.

bio-glyph/
├── src/
│   ├── App.jsx                 # Main capture + generation flow
│   ├── facePipeline.js         # MediaPipe extraction → one-line path
│   ├── fourierOneLineAnimation.js
│   ├── generationStorage.js    # Bundled archive data + SVG helpers
│   ├── lib/                    # Supabase client, faces API, validation
│   ├── ArchivePage.jsx         # Community + ITP 2026 gallery
│   ├── FacePage.jsx            # Individual portrait view
│   └── data/
│       └── itp-spring-show-2026.json
├── supabase/
│   └── faces.sql               # Schema + RLS for community faces
├── python/
│   └── bio_glyph_face_pipeline.ipynb
└── img/
    └── face.png

Created by Bairui Su — ITP, NYU

• Interaction design & visual prototyping with Jin
• Inspired by Mike Bostock's Fourier explorations and an earlier Progressive Self Portrait experiment
• Built with help from Cursor and prior face-line experiments

Show feedback that shaped the project:

• "Why do all the faces look so similar?" — landmark geometry is a known limit; contour-based extraction is the next step
• "Can multiple people try it together?" — added after day one; up to four faces merge into one path
• "It's nice to see face-detection used to create something, not just apply filters." — exactly the point

MIT © 2026 Bairui Su

bio.bairui.dev  ·  Source  ·  Blog

Simple things still matter.