Несколько недель назад я увидел видео Лекса Фридмана, «Код на C в форме пончика, который генерирует вращающийся 3D-пончик», и мне стало любопытно, как это возможно в C? Оказывается, символы ASCII имеют разные значения освещенности, которые можно использовать для создания этого эффекта. Исходный код для donut.c был написан Энди Слоаном, он объяснил всю математику создания этого эффекта в своем блоге https://www.a1k0n.net. /2011/07/20/donut-math.html». К счастью, он также создал версию этого javascript.

Теперь наступает основная часть, как добавить это в ваш файл readme. Сначала я думал, что создам статический сайт с кодом js и буду использовать его с iframe внутри readme, но синтаксический анализатор уценки GitHub исключает теги iframe.

Далее я подумал записать тор и использовать его как гифку, но это будет слишком скучно. После некоторых исследований я нашел asciinema, это инструмент для записи вывода вашего терминала.

# https://asciinema.org/docs/installation
brew install asciinema

Пришло время записать ваш терминал. Я взял код Js от Энди и немного изменил его, чтобы он соответствовал моим потребностям.

# 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 создаст файл приведения, который содержит выходные данные терминала для каждой временной метки. Актерский состав можно загрузить на сайт asciinema и просмотреть в виде видео. Теперь нам просто нужно преобразовать временные метки в кадры анимации. Несколько поисков в Google привели меня к SVG-term, инструменту командной строки, который можно использовать для преобразования временных меток в кадры анимации CSS.

cat torus.cast | svg-term --from=9000 --to=26000 --no-cursor  --out record6.svg --height=26 --width=80 --padding-y=20

Я записал приведение на 28 секунд и не хотел, чтобы начальные команды появлялись в анимации, поэтому я корректирую это, начиная анимацию с 9 секунд и заканчивая на 26 секундах. Вы можете играть с различными вариантами в соответствии с вашими потребностями.

И это было все, SVG теперь можно использовать в файле readme, и он даст такое же ощущение, как терминал, вы даже можете выбрать содержимое тора.

Вы можете найти мой ридми GitHub здесь, где я использовал эту анимацию тора: https://github.com/shaiq-dev