Code visualization with Gource

Writing code has its perks for sure and for me one of these is the satisfaction of being able to think of something and then just write the code to bring it to life.

After all the writing, testing, debugging and adding and removing lines and lines of code it’s nice to be able to look back and visualize all the hard work that you have put into creating your pet project.

If you haven’t come across it yet Gource (https://gource.io/) is a 3D visualization tool. The way it works is really simple and the only requirement is that you have used some sort of version control software (like Git, SVN, Mercurial or Bazaar) to keep track of your code changes.

Once you have installed it on your system you can navigate to the root folder of your repository and run the gource command line tool.

The tool offers a number of options and controls as to how you would like your visualization to look like but my favorite options are the following:

  • -a Skip to next entry if nothing happens for a number of seconds
  • -s Speed of simulation in seconds per day
  • -i Time in seconds files remain idle before they are removed or 0 for no limit

Also there is a really nice page that explains how you can actually generate the Gource visualization and then convert it into a video that you can then upload to YouTube for example 😉. The video below is the code visualization of one of my projects (https://index.conferencesites.eu) that I moved to Git back in 2014.

3D code for https://index.conferencesites.eu

The full command I used to generate the above video is below – where I made some trade offs to reduce the size of the video which is it’s original HD 720p resolution took up 4.6G.

$ gource -640x480 -o gource.ppm
$ ffmpeg -y -r 60 -f image2pipe -vcodec ppm -i gource.ppm -vcodec libx264 -preset medium -pix_fmt yuv420p -crf 1 -threads 0 -bf 0 gource.mp4

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s