ASCII Art Canvas

An interactive ASCII art generator that converts 3D scenes into dynamic text-based visuals using Three.js and custom character mapping algorithms.

Overview

This project transforms traditional 3D rendering into ASCII art in real-time, creating a nostalgic bridge between modern web technologies and classic computer graphics aesthetics.

Key Features

Real-time 3D to ASCII Conversion

Live rendering of 3D scenes as ASCII characters
Dynamic character density mapping
Customizable character sets for different visual effects

Interactive Controls

Mouse/Touch: Orbit around 3D models
Keyboard Shortcuts:
- Z - Toggle animation
- R - Reset camera position
Responsive Design: Adapts to any screen size

Performance Optimization

Device-specific performance modes
Efficient character rendering
Frame rate optimization for smooth animation

Technical Implementation

Character Mapping Algorithm

const asciiChars = ' .:-=+*#%@';
// Each character represents different light intensity
// ' ' = darkest areas, '@' = brightest highlights

Three.js Integration

The project uses Three.js AsciiEffect to convert 3D rendering:

Scene setup with lighting and geometry
ASCII effect post-processing
Animation loop with performance monitoring

Responsive Grid System

const charSize = 12;
const cols = Math.floor(window.innerWidth / charSize);
const rows = Math.floor(window.innerHeight / charSize);

Use Cases

Portfolio Websites

Perfect for creative portfolios wanting a unique, retro-tech aesthetic that stands out from traditional designs.

Educational Demonstrations

Great for teaching concepts like:

3D rendering pipelines
Post-processing effects
Character encoding and mapping

Interactive Art Installations

Can be extended for:

Gallery installations
Live performance visuals
Interactive museum exhibits

Future Enhancements

WebGL Optimization: Hardware-accelerated ASCII rendering
Real-time Customization: Live character set editing
Audio Visualization: ASCII art reactive to music
VR Integration: ASCII effects in virtual reality

Getting Started

Clone the repository
Open index.html in a modern web browser
Interact with the 3D scene using mouse/touch
Press Z to toggle animation, R to reset view

The ASCII Art Canvas demonstrates how creative constraints can lead to innovative visual experiences, proving that sometimes the most striking effects come from the simplest building blocks.