🖥️ ASCII.CAM — Live Webcam to ASCII Converter

A retro-modern terminal-style web application that converts your live webcam feed into gorgeous, high-density ASCII art portraits in real time. Crafted with a dark, atmospheric CRT monitor aesthetic, interactive terminal gateways, and a clean macOS-inspired Photos app clone to manage your captures.

Live Demo: https://ascii-art-sage.vercel.app/

---

🎨 Visual Preview & Concept

ASCII.CAM is designed with a strict monochrome palette (#0a0a0a & #f0f0f0) highlighted by a single blinking neon-green cursor (#39ff14). The layout features:

• CRT Scanline Filters: CSS-based repeating gradients to simulate hardware scanlines.
• Film Grain Texturing: High-performance SVG noise overlay filtering to introduce analogue weathering.
• Matrix Rain Canvas: Procedural falling ASCII characters animating in the background of the landing view.
• macOS Window Controls: Native title bar dots with hover state markers (×, −, +) for window navigation.

---

🚀 Key Features

1. Retro Gateway (index.html)

• Interactive typing intros that load automatically.
• Smooth scroll reveals and viewport-targeted transition animations.
• Fake terminal mock-ups with high-density pre-rendered face art.

2. Interactive Verification Command Line (terminal.html)

• Simulated UNIX-style system boot sequences.
• Web Audio API click feedback synthesized dynamically per keystroke.
• Interactive command shell with support for:
  • help — Lists available system instructions.
  • whoami — Runs biometric checks identifying the user as HUMAN.
  • launch — Grants permission and boots the webcam interface.
  • gallery — Opens the captured portrait collection.
  • clear — Wipes console history logs.

3. Real-Time ASCII Engine (camera.html)

• Connects to video streams via getUserMedia.
• Horizontal selfie-mode mirroring.
• 1:1 square-character pixel grid rendering (prevents tall character stretching).
• Fine-tune image processing settings in real time:
  • Brightness (-50 to +50) & Contrast (0.5 to 3.0) sliders.
  • Density / Resolution (60 to 160 characters wide).
  • Invert Toggle to flip light/dark thresholds.
  • Presets: Choose between DENSE (heavy density), CLASSIC (detailed gradient), or MINIMAL (sharp strokes).
• Capture snapshots locally and save them instantly to the browser's gallery database.

4. Portrayal Gallery (gallery.html)

• A pixel-perfect, light-themed macOS Photos app replica.
• Interactive left sidebar with categories: All Photos, Favourites, and Recently Deleted (warning banner included).
• Automatic sorting that groups snapshots by date (with relative Today and Yesterday headers).
• Live search input filtering snapshots by capture dates.
• Interactive Lightbox slide viewer supporting arrow-key navigation, favourites toggle, and single-click disk downloads.

---

📂 File Architecture

This is a zero-dependency, vanilla HTML5/CSS3/JavaScript project:

├── index.html        # Landing Home Screen (typewriter effects, CSS matrix canvas)
├── terminal.html     # Interactive CLI Gateway (Web Audio keystrokes, UNIX commands)
├── camera.html       # Real-Time Webcam ASCII Processor & Controls Console
├── gallery.html      # macOS Photos clone (data synchronization, Lighbox, search)
└── README.md         # Documentation

• Data Layer: Captures are rendered on an offscreen high-definition canvas, converted to base64 data URLs, and written to localStorage under the key ascii_gallery (up to a limit of 50 captures).

---

🛠️ Local Setup

Since ASCII.CAM is built purely on vanilla web standards, you do not need to install any bundlers or compilers.

1. Clone this repository:

   git clone https://github.com/lakshitasethia/ASCII-Art.git
   cd ASCII-Art

2. Run a local development server (webcam access via getUserMedia requires a secure context such as localhost or https in modern browsers):

   npx serve .
   # or
   python3 -m http.server 8000

3. Open http://localhost:3000 (or http://localhost:8000) in your browser.

---

📱 Mobile Responsiveness

The interfaces adapt dynamically:

• Monospace font sizes scale responsively.
• The sidebar collapses on mobile grids.
• Sliders and panels shift to bottom action drawers on smaller screen sizes.

---

ASCII.CAM — Crafted in monospace.