Turn your webcam into living ASCII and Emoji art — with optional background removal, smooth controls, and a glassmorphism UI. Built with vanilla JS, Tailwind (CDN), and MediaPipe Selfie Segmentation.
Quick Start • Features • Usage • How it works • Performance • Deploy
- Real‑time webcam → ASCII renderer (selfie‑mirrored)
- Multiple palettes: Basic, Extended, Blocks, Emoji, plus a fully Custom palette
- Optional background removal using MediaPipe Selfie Segmentation
- Dark/Light theme toggle with polished glass UI and responsive layout
- Resolution slider with smooth transition for grid density
- Emoji mode rendered via canvas with per‑glyph caching for alignment and speed
- Crisp pixel aesthetics (image smoothing disabled everywhere)
- Zero build tools — open locally or serve as static files
This app uses the camera via getUserMedia, which requires a secure origin. Use one of these local options:
- Easiest: VS Code Live Server extension (right‑click
index.html→ "Open with Live Server"). - Python 3 (built‑in on many systems):
# Optional local server on Windows PowerShell
python -m http.server 5173
# Then open http://localhost:5173- Node.js (if installed):
npx serve .
# or
npx http-server -p 5173Then visit http://localhost:<port>, allow camera access, and you’re in.
Top control bar (mobile‑friendly):
- Palette: choose between Basic, Extended, Blocks, Emoji, or Custom
- Custom prompts you to enter characters ordered from light → dark
- Remove BG: toggles MediaPipe segmentation to keep only the foreground
- Res: controls grid density; higher = more characters, more detail
- Theme: toggles Dark/Light mode (UI adapts)
Display modes:
- ASCII text mode uses a
<pre>element, dynamically sizing fonts to fill the viewport - Emoji mode uses a
<canvas>grid to keep cells perfectly aligned and square
Footer contains creator links. UI uses a subtle animated gradient background with glassmorphism panels.
- Camera frames are sampled to an offscreen canvas at a dynamic grid size
- Per‑cell luminance is computed using perceptual luma:
0.2126R + 0.7152G + 0.0722B - Each cell maps brightness → a character from the active palette (light → dark)
- Background removal (optional) leverages MediaPipe Selfie Segmentation; mask is applied per cell
- Text mode updates a
<pre>string; Emoji mode draws cached glyph bitmaps into a canvas - Scale changes (resolution slider) are eased for smooth visual transitions
- All image smoothing is disabled to keep edges sharp and pixel‑crispy
- Vanilla JavaScript (no framework)
- Tailwind CSS via CDN
- MediaPipe Selfie Segmentation via CDN
- Emoji mode is heavier than plain text — reduce resolution on low‑power devices
- Keep the browser tab focused for a stable frame rate
- On laptops, plug in for better sustained performance
Static hosting works anywhere (GitHub Pages, Netlify, Vercel, etc.). For GitHub Pages:
- Push this repository to GitHub
- In Settings → Pages, choose the
mainbranch and/ (root) - Save — your site will be live at
https://<user>.github.io/<repo>
- All processing runs in your browser; video never leaves your device
- The page requests camera permission the first time you visit
- External libraries are loaded from trusted CDNs
- Save/share snapshots and short GIF captures
- Per‑palette brightness curves and dithering options
- Mobile optimizations and touch gestures
- Additional segmentation models and effects
- MediaPipe Selfie Segmentation — real‑time background masks
- Tailwind CSS — utility styling
- Emoji rendering relies on system emoji fonts
No license specified yet. Consider adding a LICENSE file (MIT is a popular choice for open web demos).
Made with ❤️ by Vasu‑Devs