Taming Project Footage: Saturday, February 10, 2024

Documented the ways I currently record video footage of my projects.

Sometimes I would like to record one of my projects in action in order to share and preserve its behavior. I want this to be as low-friction as possible. It may be rewarding, but it's also a documentation task. Documentation tasks can be hard to prioritize unless you make the activation energy low. Writing down my process here is a way for me to make it easier in the future.

Linux Mint Video Screencapture with FFmpeg for Processing

Screencapture

I'm currently using Linux Mint: Cinnamon Edition. When I press Ctrl + Alt + Shift + R, a little recording indicator shows up in the status panel, indicating that recording has started. Pressing this combination again ends the recording session.

The resultant videos show up in my ~/Videos directory as .webm files. The videos include the mouse cursor and capture the whole screen. I don't know how to configure output.

Cropping

I usually need to crop these raw output videos. I found this article on cropping videos with FFmpeg helpful for this task.

FFmpeg is powerful. It's popular enough that it's probably already installed on your computer for some dependency. Because of this, I would like to get more familiar with its CLI.

As explained in that article, we can preview a video crop without having to process the whole video.

ffplay -vf "crop=w:h:x:y" input.webm

Replace w:h:x:y with your values. To find these values, I just do a manual binary search, trying different values until I get the correct crop. This is a point where a simple GUI selector tool could be useful.

Once you've found your values, do the real crop.

ffmpeg -i input.webm -vf "crop=500:800:0:120" output.webm

The order of the arguments matters: the input flag and value must come before the video filter flag and value.

Conversion

FFmpeg makes format conversion very simple. (See the FFmpeg file format conversion documentation.)

ffmpeg -i input.webm output.gif

However simplicity comes with a price. I tested this with my 3D Glitter Jar project and the output gif was intensely dithered and much larger in file size than the original webm. It could be that the gif format just isn't suitable for this video due to the gradients and high detail, or it could be that customized compression settings might have helped.

For now, you'll have to settle for stills and a link to a video. A less dramatic conversion leap (from a modern video format to another modern video format) would probably fare much better. Gifs are weird and old.

Godot Screencapture

I have been playing with Godot 4 recently to learn how professionals organize larger projects. I'm still feeling a little of the friction that comes with using a new system, but I can tell that it will allow me to prototype ideas much quicker once I get comfortable.

One thing I really like about Godot is the built in screen capture functionality: movie maker mode. Movie maker mode is described as something fancy for making trailers and pre-recorded cutscenes, but I like that it's simple and built in. I use it for making a quick video when I've gotten something cool working and want to share with friends.

Custom Gif Program Output

Bitsy

Bitsy is a tiny game engine that restricts you to three colors per room, low resolution, and two-frame animations. The Bitsy editor has a built-in tool to record gifs.

Gifs respond well to a limited color palette and short, subtle animation. They are lossless and allow basic compression. These traits make it perfect for Bitsy and other low-res, low-color situations.

Bitsy can output both a gif recording and a gif "snapshot". A snapshot records a two-frame gif, which captures the idle behavior of a Bitsy room in a tiny, perfectly looping gif.

Pyx Rasterizer

John and I are currently working on making a perfectly looping custom gif exporter from scratch for our Pyx Rasterizer 16-color, low-res 3D rendering project in Pyxel, following the wonderfully readable description of the gif file format What's In a Gif. Our Pyx Rasterizer project is all about understanding things by building them from scratch, and this is a great continuation of that goal.