Currently supported languages for files:
- C / C++
- Java (and thus Processing)
Given the generality of the project, and the limited testing that was done, there will be bugs! If you find one, let me know in a comment below explaining how to reproduce it.
The original idea was a little more grandiose and involved animating the commits over time. It was a little more geared towards the code-growth aspect of this project.
I started off playing with the GitHub API to make sure that the project was feasible The API is still young, so it does have some restrictions. Realizing that only 60 requests could be made without authentication was a bummer, but results like the image above which showed me retrieving code from a commit gave me hope.
I then found that GitHub had several libraries, including one in Java. I decided that Processing would be the way to go.
At this point I split my problem into 2: data and visualization. I quickly coded the above visual as a simple test: given a syntax highlighter library and some code stored locally, visualize it abstractly. I liked the retro-ness and simplicity of the rectangles and stuck with them.
As far as data goes, I tried very hard to use the Java library recommended by GitHub. The problem was that the library was not extremely well documented, and the examples it provided didn’t help much. I spent a lot of time on this, but I was getting nowhere.
At this point in the process I really solidified what information I wanted displayed in my visualization. The commit data I received had a ton of meta data: the author, the dates, the type of syntax, etc. were all available. I decided here to look more into programmatic style and focus on these principles:
- Indentation (or leading white space)
- General code structure
Displaying the first two principles was straight-forward. To display code structure I decided to highlight areas of text and emphasize any syntax matches that weren’t comments. I tested against a friend showing him the rectangles. He was able to guess that they were code.
Here are some pictures towards the end of the process:
Then End Result
To improve the experience I added dragging and zooming capabilities with the cursor. I removed the click to zoom buttons in response. These are somewhat buggy features and are slow. I used code borrowed from external sources for these, so it’s possible that I am not integrating it perfectly.
Scroll to the top of this post to see how to gitStyle yourself.
This project still needs a ton of work. I really want to turn it into the best code visualizer ever. Here are some things I need to work on (in no order):
- Add modularity support
- Improve zoom/drag features (this is buggy when resizing)
- Migrate canvas code to a canvas-based library to help with interactions
- Support more languages (find a better syntax highlighter)
- Integrate Google’s style guidelines
- Better colors?