Video to ASCII Art

For whatever reason, I'm fascinated with ASCII Art. I guess it's because it reminds me of old school computing and hacking.

I was curious today if I could create animated ASCII Art from a video. It turned out to be pretty easy.

Step 1: I took a very short and simple video of myself on my phone. I took a video selfie and emailed that to myself.

Step 2: I used Adobe Premier, to convert the .MOV file from my phone into a series of .jpg files. Each frame of the video is being converted to a still frame.

Step 3: Each frame of the video is converted from a .jpg file to an ASCII art .txt file. I used an awesome tool called jp2a to do the conversion. This is the actual command I used to do the conversion.

find . -type f | sort | xargs -I xxx jp2a --width=200 xxx --output=xxx.txt

Step 4: I then used cat to concatenate all of the text files and separate them with pre tags. At this point, I have a very simple html document with every frame of the animation inside of it.

Step 5: The last step here was to animate the frames.

The basic approach was to hide all but one of the pre tags. Then there is a timer that's running regularly to change which pre tag is showing.

You can see the final html document ./ascii-face.html.

Step 6: The last step here was to create a real gif. Since I don't know how to convert animated plain text into a gif, I just took a screen capture and rendered it as a gif. This is finale result: