Skip to content

RECORDING_GUIDE.md

Latest commit

 

History

History
237 lines (187 loc) · 5.5 KB

RECORDING_GUIDE.md

File metadata and controls

237 lines (187 loc) · 5.5 KB

🎬 Recording Guide for Sorting Algorithm Visualizer

This guide explains how to record and create videos/GIFs from the sorting algorithm demonstrations.

🚀 Quick Start

Basic Recording

python demo.py --record

Recording with GIF Creation

python demo.py --record --gif

Help

python demo.py --help-recording

📋 Recording Options

Command Description
python demo.py Run demo without recording
python demo.py --record Record frames during demo
python demo.py --record --gif Record frames and create GIFs
python demo.py --help-recording Show detailed recording help

📁 Output Structure

When recording is enabled, the following structure is created:

recordings/
├── bubble_sort/
│   ├── frame_000001.png
│   ├── frame_000002.png
│   ├── frame_000003.png
│   └── ...
├── insertion_sort/
│   ├── frame_000001.png
│   └── ...
├── selection_sort/
├── merge_sort/
├── quick_sort/
├── heap_sort/
└── bubble_sort.gif (if --gif used)

🎥 Creating Videos

Prerequisites

Install ffmpeg:

  • macOS: brew install ffmpeg
  • Ubuntu: sudo apt install ffmpeg
  • Windows: Download from ffmpeg.org

Basic Video Creation

ffmpeg -framerate 30 -i recordings/bubble_sort/frame_%06d.png \
       -c:v libx264 -pix_fmt yuv420p bubble_sort.mp4

High Quality Video

ffmpeg -framerate 30 -i recordings/bubble_sort/frame_%06d.png \
       -c:v libx264 -crf 18 -pix_fmt yuv420p bubble_sort_hq.mp4

Batch Create All Videos

#!/bin/bash
for dir in recordings/*/; do
    if [ -d "$dir" ]; then
        name=$(basename "$dir")
        echo "Creating video for $name..."
        ffmpeg -framerate 30 -i "$dir/frame_%06d.png" \
               -c:v libx264 -pix_fmt yuv420p "${name}.mp4"
    fi
done

🖼️ Creating GIFs

Automatic GIF Creation

pip install Pillow
python demo.py --record --gif

Manual GIF Creation (with ffmpeg)

# Create optimized GIF
ffmpeg -i recordings/bubble_sort/frame_%06d.png \
       -vf "fps=10,scale=800:-1:flags=lanczos,palettegen" \
       palette.png

ffmpeg -i recordings/bubble_sort/frame_%06d.png -i palette.png \
       -vf "fps=10,scale=800:-1:flags=lanczos,paletteuse" \
       bubble_sort.gif

⚙️ Advanced Configuration

Custom Frame Rate

Modify the clock.tick(30) value in demo.py:

  • clock.tick(60) - Smooth but large files
  • clock.tick(30) - Balanced (default)
  • clock.tick(15) - Smaller files

Custom Resolution

Modify WINDOW_WIDTH and WINDOW_HEIGHT in demo.py:

WINDOW_WIDTH = 1920   # Full HD
WINDOW_HEIGHT = 1080

Recording Specific Algorithms

Modify the demo_algorithms list in demo.py:

demo_algorithms = [
    (quick_sort, "Quick Sort"),    # Record only Quick Sort
    (merge_sort, "Merge Sort"),    # Record only Merge Sort
]

📊 File Size Estimates

Algorithm Frames PNG Size MP4 Size GIF Size
Bubble Sort ~2000 ~100MB ~5MB ~15MB
Insertion Sort ~1500 ~75MB ~4MB ~12MB
Selection Sort ~1000 ~50MB ~3MB ~8MB
Merge Sort ~800 ~40MB ~2MB ~6MB
Quick Sort ~600 ~30MB ~2MB ~5MB
Heap Sort ~700 ~35MB ~2MB ~5MB

Total for all algorithms: ~330MB PNG, ~18MB MP4, ~51MB GIF

🎯 Best Practices

For Social Media

  • Use GIF format for quick sharing
  • Consider lower resolution (800x600)
  • Use every 3rd frame to reduce size

For Educational Use

  • Use MP4 format for presentations
  • Higher resolution (1200x800 or 1920x1080)
  • Include all frames for smooth animation

For Analysis

  • Keep PNG frames for frame-by-frame analysis
  • Use consistent settings across recordings
  • Document recording parameters

🔧 Troubleshooting

Common Issues

"PIL not found"

pip install Pillow

"ffmpeg not found"

  • Install ffmpeg (see Prerequisites above)
  • Ensure it's in your PATH

"Permission denied"

chmod +x demo.py

Large file sizes

  • Reduce frame rate in demo.py
  • Use lower resolution
  • Use ffmpeg compression

Performance Tips

  1. Disk Space: Each full demo requires ~330MB
  2. Memory: Large arrays use more RAM
  3. Processing: GIF creation is CPU intensive
  4. Storage: Use SSD for better performance

📱 Platform-Specific Notes

macOS

  • Use brew install ffmpeg pillow
  • PNG files work perfectly
  • Good performance with built-in Python

Linux

  • Use package manager: sudo apt install ffmpeg python3-pil
  • Excellent performance
  • May need display server for GUI

Windows

  • Download ffmpeg manually
  • Use pip install Pillow
  • May need admin rights for installation

🎬 Example Workflow

  1. Setup:

    pip install -r requirements.txt

  2. Record Demo:

    python demo.py --record --gif

  3. Create High-Quality Videos:

    for dir in recordings/*/; do
    name=$(basename "$dir")
    ffmpeg -framerate 30 -i "$dir/frame_%06d.png" \
           -c:v libx264 -crf 18 -pix_fmt yuv420p "${name}.mp4"
done

  4. Cleanup:

    # Keep only videos and GIFs, remove frame folders
rm -rf recordings/*/

This setup gives you professional-quality recordings of all sorting algorithms that you can use for presentations, educational content, or analysis!

Happy Recording! 🎥✨