💾 Archived View for jfh.me › posts › 2019-02-23-ascii-face.gmi captured on 2021-12-05 at 23:47:19. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

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.

jp2a

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.

(function() {
    var pres = document.querySelectorAll("#images pre");
    var len = pres.length;
    for(var i = 0; i < pres.length; i = i + 1) {
        pres[i].style.display = 'none';
    }
    var a = 0;
    window.setInterval(function() {
        pres[a].style.display = 'none';
        pres[(a + 1)%len].style.display = 'block';
        a = (a + 1) % len;
    }, 40);
}());

Link to Gist

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:

The Final Gif