Live Examples

Interactive demonstrations of ts-ascii-engine capabilities

Image Converter

Upload any image and convert it to ASCII art with customizable settings.

Upload an image to see the result

View Source Code 
import { AsciiGenerator, CharsetPreset } from 'ts-ascii-engine';

const generator = new AsciiGenerator({
  charset: CharsetPreset.BLOCK,
  width: 100,
  colored: true
});

const input = document.getElementById('imageInput');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = (event) => {
    const img = new Image();
    img.onload = () => {
      const result = generator.convertImage(img);
      document.getElementById('output').innerHTML = result.html;
    };
    img.src = event.target.result;
  };

  reader.readAsDataURL(file);
});

Real-time Video Stream

Convert webcam feed to ASCII art in real-time at 30+ FPS.

Click "Start Webcam" to begin

Tip: Lower width values provide higher FPS. Try width 40-60 for smoothest performance.
View Source Code 
import { AsciiGenerator, CharsetPreset } from 'ts-ascii-engine';

const generator = new AsciiGenerator({
  charset: CharsetPreset.BLOCK,
  width: 80,
  colored: false
});

const video = document.getElementById('webcam');
const output = document.getElementById('output');

// Start webcam
async function startWebcam() {
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { width: 640, height: 480 }
  });
  video.srcObject = stream;
  video.play();
  renderLoop();
}

// Render loop
function renderLoop() {
  const result = generator.convertImage(video);
  output.innerHTML = result.html;
  requestAnimationFrame(renderLoop);
}

startWebcam();

Text to ASCII Banner

Convert text into ASCII art using any system font.

View Source Code 
import { AsciiGenerator, CharsetPreset } from 'ts-ascii-engine';

const generator = new AsciiGenerator({
  charset: CharsetPreset.STANDARD,
  width: 0 // Auto width
});

const result = generator.convertText('HELLO', {
  font: 'Impact',
  fontSize: 72,
  fontWeight: 'bold',
  fontStyle: 'normal'
});

console.log(result.text);

Colored ASCII Art

Preserve original image colors for vibrant ASCII art.

Feature: Colored mode maintains the original image colors while converting to ASCII characters.

Click the button to see colored ASCII art

View Source Code 
import { AsciiGenerator, CharsetPreset } from 'ts-ascii-engine';

const generator = new AsciiGenerator({
  charset: CharsetPreset.BLOCK,
  width: 100,
  colored: true  // Enable colored mode
});

const result = generator.convertImage(img);
document.getElementById('output').innerHTML = result.html;

Character Set Comparison

Compare different character sets and their effects.

BLOCK

██▓▒░

Modern look with high contrast. Great for bold images.

STANDARD

@%#*+=-:.

Classic ASCII art style. Most versatile option.

MINIMAL

@+.

Simple and fast. Best for high-performance needs.

EXTENDED

70+ characters

Maximum detail with gradual shading.

Retro Game Graphics

Use ASCII art for retro-style game graphics and UI elements.

Example: Animated Sprite

Use Cases: Roguelikes, terminal games, retro aesthetics, loading screens, decorative elements.

Animated ASCII

Create smooth animations by updating ASCII art in real-time.

Animation will appear here

View Source Code 
import { AsciiGenerator, CharsetPreset } from 'ts-ascii-engine';

const generator = new AsciiGenerator({
  charset: CharsetPreset.STANDARD,
  width: 60
});

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 400;

let frame = 0;

function animate() {
  // Draw animated content
  ctx.clearRect(0, 0, 400, 400);
  ctx.fillStyle = `hsl(${frame}, 70%, 50%)`;
  ctx.beginPath();
  ctx.arc(200 + Math.sin(frame * 0.05) * 100, 200, 80, 0, Math.PI * 2);
  ctx.fill();

  // Convert to ASCII
  const result = generator.convertImage(canvas);
  document.getElementById('output').innerHTML = result.html;

  frame++;
  requestAnimationFrame(animate);
}

animate();

Performance Optimization

Best Practices

  • Use lower width values (40-80) for real-time video
  • Disable colors for maximum performance
  • Reuse generator instances
  • Use MINIMAL charset for fastest processing
  • Consider Web Workers for heavy processing
Configuration Processing Time Video FPS
Width 40, MINIMAL, no color ~5ms 60+ FPS
Width 80, STANDARD, no color ~12ms 40-60 FPS
Width 100, BLOCK, colored ~25ms 30-40 FPS
Width 150, EXTENDED, colored ~45ms 20-25 FPS

Want to Build Something Amazing?

Check out the full API documentation and start creating!