本项目包含两部分：

1. 网页版排序可视化（HTML）
2. Manim 视频版排序可视化（6 个算法 + ASS 字幕）

• index.html：网页交互演示（步进、播放、快进、日志、统计）
• manim_sorts.py：Manim 渲染脚本（已配置 1080p/30fps，步长 0.2s）
• output/final_1080p30/：最终产物目录（6 个 MP4 + 6 个 ASS）

• 冒泡排序 Bubble Sort
• 选择排序 Selection Sort
• 插入排序 Insertion Sort
• 快速排序 Quick Sort
• 归并排序 Merge Sort
• 堆排序 Heap Sort

• Python 3.11+
• Manim 0.20+
• ffmpeg
• 中文字体：Noto Sans CJK（用于避免中文 tofu）

直接打开 index.html，或启动静态服务：

cd /workspace
node -e "const http=require('http');const fs=require('fs');const path=require('path');const root=process.cwd();const mime={'.html':'text/html; charset=utf-8','.js':'text/javascript; charset=utf-8','.css':'text/css; charset=utf-8','.json':'application/json; charset=utf-8'};http.createServer((req,res)=>{let p=req.url.split('?')[0];if(p==='/' )p='/index.html';const fp=path.join(root,p);fs.readFile(fp,(e,d)=>{if(e){res.writeHead(404);res.end('Not found');return;}res.writeHead(200,{'Content-Type':mime[path.extname(fp)]||'text/plain; charset=utf-8'});res.end(d);});}).listen(4173,()=>console.log('http://127.0.0.1:4173'));"

manim_sorts.py 中已设置全局参数：

• 分辨率：1920x1080
• 帧率：30 fps
• 步长：0.2 秒

cd /workspace
python3 manim_sorts.py --export-ass --out output/subtitles_1080p30 --step-time 0.2

cd /workspace
python3 -m manim manim_sorts.py BubbleSortScene --media_dir output/media_1080p30 -o bubble_sort.mp4
python3 -m manim manim_sorts.py SelectionSortScene --media_dir output/media_1080p30 -o selection_sort.mp4
python3 -m manim manim_sorts.py InsertionSortScene --media_dir output/media_1080p30 -o insertion_sort.mp4
python3 -m manim manim_sorts.py QuickSortScene --media_dir output/media_1080p30 -o quick_sort.mp4
python3 -m manim manim_sorts.py MergeSortScene --media_dir output/media_1080p30 -o merge_sort.mp4
python3 -m manim manim_sorts.py HeapSortScene --media_dir output/media_1080p30 -o heap_sort.mp4

渲染后视频默认位于：

• output/media_1080p30/videos/manim_sorts/1080p30/

当前最终文件位于：

• output/final_1080p30/

包含：

• 视频：bubble_sort.mp4、selection_sort.mp4、insertion_sort.mp4、quick_sort.mp4、merge_sort.mp4、heap_sort.mp4
• 字幕：bubble.ass、selection.ass、insertion.ass、quick.ass、merge.ass、heap.ass

例如为快速排序视频叠加硬字幕：

ffmpeg -i output/final_1080p30/quick_sort.mp4 -vf "ass=output/final_1080p30/quick.ass" -c:a copy output/final_1080p30/quick_sort_hardsub.mp4

如果播放器支持外部字幕，也可以将 .ass 与对应 .mp4 放在同目录并手动加载。