A few weeks back I saw a video of Lex Fridman, “Donut-shaped C code that generates a 3D spinning donut” and it made me curious, how is it possible in C? Turns out that ASCII characters have different illumination values, which can be used to create this effect. The original code for donut.c was written by Andy Sloane, he has explained all the math behind creating this effect in his blog https://www.a1k0n.net/2011/07/20/donut-math.html. Gladly he created a javascript version of this too.
Now comes the main part, how to add this to your readme. At first, I thought I would create a static site with the js code and use it with an iframe inside the readme, but GitHub’s markdown parser eliminates iframe tags.
Next, I thought of recording the torus and using it as a gif, but that will be too boring. After some research I found asciinema, it’s a tool to record your terminal output.
# https://asciinema.org/docs/installation
brew install asciinemaIt’s time to record your terminal now. I took the Js code from Andy and modified it a bit to match my needs.
# Start recording
asciinema rec torus.cast# Start the script and let it run for 15 - 20 sec
# and then `Ctrl + C` to exit the program.
node Torus.js# Stop the recording
`Ctrl + D`
Asciinema will create a cast file that contains the terminal output at each timestamp. The cast can be uploaded to the asciinema website and viewed as a video. Now we just have to convert the timestamps into animation frames. A few Google searches landed me on SVG-term, a CLI tool that can be used to convert the timestamps into CSS animation frames.
cat torus.cast | svg-term --from=9000 --to=26000 --no-cursor --out record6.svg --height=26 --width=80 --padding-y=20I recorded a cast of 28 sec and didn’t want the initial commands to appear in the animation, so I adjust this by starting the animation at 9 seconds and ending at 26 seconds. You can play with different options to match your needs.
And that was it, the SVG can now be used in the readme file and it will give the same terminal-like feel, you can even select the contents of the torus.
You can find my GitHub readme here, where I have used this torus animation: https://github.com/shaiq-dev
