Визуализация истории проекта с помощью Gource, просто и весело

январь 20 , 2018

История simpple.ru с помощью gource Весьма далек от темы видео, анимаций, 3D и прочих творческих штук, но смотреть такие вещи люблю. Поэтому когда случайно наткнулся на утилиту визуализации Gource, не утерпел и попробовал ее в действии. Для опытов взял историю git-a собственного проекта simpple.ru. Все оказалось проще, чем я думал, благо документация у утилиты хорошая, да и готовых примеров в сети долго искать не пришлось.
Ниже в статье получившееся видео и процесс его создания.


Утилита Gource, скачиваем, настраиваем, запускаем

Проходите по ссылке чуть выше и скачиваете версию под винду или линукс.

По слухам, так же есть версия для mac. А пруфов нет, инфу видел на каком-то форуме, но ссылку уже не найду. Впрочем, для мака стоит просто попробовать brew install gource

Я работал в Linux Mint, но параметры утилиты одинаковы для любой ОС. Заходите в папку своего проекта, находящегося под властью git-a, и в командной строке напишите следующее

    gource -1920x1080 -f --title "My super-puper video" --seconds-per-day 0.1 --auto-skip-seconds 0.1 --highlight-all-users --multi-sampling --hide mouse .git/

Прежде чем разбирать скучные параметры, давайте просто запустим эту команду и посмотрим, что получилось.
Видео короткое, всего 1 минута.

Как можно догадаться, бегающие человечки-юзеры создают и удаляют файлы в проекте, стреляют-коммитят в них и учиняют еще какие-то безобразия. Волшебство с постоянным хаосом, изменениями и преобразованиями полностью лежит на плечах Gource. Обратите внимание, сверху быстро меняется дата, шарики не просто так прыгают и бегают. Правда, музыка поверх наложена уже в редакторе ютуба, Gource так не умеет.

А теперь пробежимся по настройкам запуска, тем более для Вашего проекта они наверняка будут отличаться.

1. -1920x1080. Намек простой, это разрешение видео. x - английская, не русская и не умножить :-)
2. -f. Возможность переключения в полноэкранный режим
3. --title "My super-puper video". Заголовок, будет скромно отображаться в левом нижнем углу видео.
4. --seconds-per-day 0.1. Проекция времени, сколько реальных дней будет отображать 1 секунда видео. Опция --realtime установит это значение в 60*60*24 (столько секунд в одном дне). Но это будет хорошо для проекта с несколькими тысячами программистов, которые непрерывно что-то коммитят. Я, как человек ленивый, коммитил не то что не каждый день, а даже не каждую неделю :-( Поэтому скромно поставил 0.1 - то есть 1 секунда на 10 дней. Надеюсь, Вы сможете похвастаться большей активностью.
5. --auto-skip-seconds 0.1. Связано с предыдущей темой - активностью программистов в проекте. Параметр означает, через сколько секунд "простоя", когда нет ни одного коммита, перескакивать к следующему блоку коммитов. Если у Вас очень большой проект, то дефолтное значение в 3 секунды вполне подойдет. Я же малость уменьшу до 0.1, дабы не растягивать видео.
6. --highlight-all-users. В видео участвуют все пользователи-коммитчики.
7. --multi-sampling. Дополнительное сглаживание. Это какая-то хитрая штука, связанная с рендером видео, поэтому врать не буду.
8. --hide mouse. Не показывать курсор мыши. Также можно скрыть еще до фига чего, например, юзеров, имена файлов, директорий. Если заинтересует, все описано в документации Gource.
9. .git/ - а это папка с историей git-a

Есть еще целая куча разных настроек, довольно интересных, например, возможность оцифровать только часть истории, допустим, последнюю ее треть или самое начало. Все это найдете в документации Gource. А я пока расскажу про не самую интересную, но оказавшуюся для меня самой длительной частью создания видео ))


Как сохранить видео из Gource и выложить его на Ютуб?

Gource после запуска сразу открывает видео, но мне же нужно его сохранить. Делается это элементарно с помощью Gource --output-ppm-stream и конвертации вышеполученного файла в божеский mp4-формат с помощью утилиты ffmpeg. Сохранить видео в отдельный файл легко

    gource -1920x1080 -f --title "My super-puper video" --seconds-per-day 0.1 --auto-skip-seconds 0.1 --highlight-all-users --multi-sampling --hide mouse --output-ppm-stream gource.ppm .git/

Дописали к уже известной команде --output-ppm-stream gource.ppm и получили на выходе файл gource.ppm огромадных размеров. У меня, например, минутное видео системы 1920x1080 заняло аж 21 Гб. Вероятно, я что-то делал не так, но не парился по этому поводу, потому что место на жестком диске было, а желания разбираться в причинах размера файла не было :-)
Конечно, никто не запрещает выставить размер поменьше, 800x600, видео изрядно похудеет.

Дальше я начал конвертировать ppm-файл в обычный mp4 с помощью ffmpeg, и здесь меня постигло разочарование. Полученное видео на компьютере открывалось и смотрелось прекрасно, но при загрузке его в ВК или на ютуб здорово теряло в качестве. Погуглив немного, я узнал, что столкнулся не с великой уникальной, а вполне обычной проблемой.

Если Вы занимаетесь видео, то скорее всего знаете, как это делается. Я же после некоторых поисков и экспериментов пришел к такой комбинации параметров ffmpeg

    ffmpeg -y -r 60 -f image2pipe -vcodec ppm -i gource.ppm -vcodec libx264 -preset slow -pix_fmt yuv420p -crf 1 -threads 0 -bf 0 gource.mp4

Шаристые в рендере видео люди наверняка увидят в этом наборе символов осмысленную информацию. Для меня же главным итогом было то, что именно после этого ютуб перестал безбожно размывать видео, и это качество меня более-менее устроило. Осталось подобрать легкую музыку в менеджере видео ютуба, опубликовать и написать этот пост.

Если Вы не были знакомы с этой замечательной утилитой Gource, то вполне можете удивить коллег и начальство, потратив на это минимум времени. Только не забудьте убедиться, что Вы коммитите в проект не 2 раза в месяц, иначе может возникнуть неловкая ситуация :-)

На этом все, спасибо за просмотр видео и чтение статьи!

На заметку: Gource годится не только для визуализации истории git-a
Видел на ютубе очень симпатичные визуализации активностей в Google+ и статистику медалей разных стран в Олимпийских играх. Интересная анимация всегда веселее сухих графиков. Не скажу, что информативнее, но смотрится точно интереснее.
Найдется время, с интересом поразбираюсь как это делается, данные для визуализации найдутся. Если у Вас есть какой-то опыт в этом, возможно, в других инструментах, то делитесь в комментариях, буду очень признателен!

Все статьи о git

Заходите в группу в контакте - https://vk.com/webdevkin
Анонсы статей, обсуждения интернет-магазинов, vue, фронтенда, php, гита.
Истории из жизни айти и обсуждение кода.
Как Вам статья? Оцените!