The Sound Of Commits

Well, all I can say is that I’ve been busy. How busy you ask? Let this post answer it for you.

I had come across the Github API a while back and ever since I have been contemplating ways to use the data provided by the API in a meaningful way. After weeks of brain-wracking, I finally hit upon the idea that why not render the commits for a year long period as musical notes? If you have a Github account, you might have noticed in your “Repositories” tab there is a wonderful little visualizer that has blocks of varying green colorations, showing your Github activity over the past 1 year. Why not audiolize it?

So first things first, I head over to Github’s API docs. Now the beauty of Github’s API is that it to read user and public repository a.k.a. repo information, I don’t need to sign in. That enabled me to write the whole thing in client side Javascript and not worry about Cross Origin Resource Sharing (CORS) since the audiolization would be hosted on my website. This made my task much, much easier (and more hassle-free for the user). Some quick jQuery setup and custom wrappers to the AJAX calls had me pulling the data in a jiffy.

The next step was preparing the data, i.e. getting the commits from the last one year for a user across repos and grouping them by date. Github allowed me to limit the data returned to the past 1 year, but grouping it was still an issue. That is where moment.js comes in. This intuitive and feature-rich library gave me all that I needed to manipulate and compare the date-time signatures on each commit as well as taught me the standard for representing dates and times. Couple this with a few articles on Javascript promises and closures (Lisp throwback!!) and I have my data ready to be audiolized.

A small digression: For all my difficulty with JS and its weak-typing model, the fact that Lisp has inspired JS and that JS allows me to come from a functional programming school of thought, made my code really clean and easy to work with. I was strictly against creating a global variable to store and work on the final data in the JS file since side effects from functions could mess up the data and be really hard to track down and fix. Functional programming, which by design avoids side affects on your data, really helped me out and JS’ closures really sold me to the language.

Now for the music. Musical Instrument Digital Interface or MIDI is the de facto standard for rendering music and this is no different on the web. Here is where I found this amazing project called MIDI.js on, you guessed it, Github! I forked the repo so I had my own version to play around with, and after some digging around since the documentation was substandard, I had attached MIDI musical notes to my commit data.

After some quick HTML and CSS where I set up the web page, I finally published it to the web. Sharing with people via Facebook and Twitter helped get some good feedback on it. You can find it here. Be sure to try it out, especially if you have a Github account. Seeing all my Github activity rendered as music was a joy like no other and I was glad to be able to help others see that joy as well.

Let me play you a song of your commits. If you have any suggestions, do feel free to comment.

 

Advertisements

Watermarking – Truly Transparent Text

Well, I just finished writing up a new software project. It wasn’t something really difficult, just a tool to help people watermark multiple images at once, made at the behest of some photographer friends of mine due to the lack of such a tool on the net. While the tool was pretty straightforward (and a great exercise in Software Engineering), what was really interesting was the way to create the watermark, which required me to make the text transparent to a certain degree. Ofcourse, I had to search for the right way to do it, but again nothing straightforward cropped up (this is becoming really common now) and while I did find some useful code snippets, they did not do exactly what I wanted. Thankfully, on reading the code, I was able to gather enough information about how to construct a basic watermarking algorithm works as well as how to manipulate the alpha value of images to achieve the transparency.

First some Image basics. Every image you see in the digital form is represented by pixels (picture elements in short), and each pixel has 4 values: 3 values which specify how much or Red, Green and Blue should be present in that pixel, and the 4th value is the alpha value, which determines the Opacity/Transparency of that pixel. RGBA in total. Now the alpha value is key here, and once I understood how the alpha value is manipulated, creating the Image Processing module was a cinch. For this example, I used the PIL library of Python.

What I first did was declare the colour and transparency of the text which would be used as the watermark. This was as simple as specifying the tuple (0, 0, 0, trans), where trans is my transparency value. Next, I create a completely transparent white image the same size as my input image. By specifying the RGB values as 255 each, the image was a plain white image, but by specifying alpha as 0, the image was truly transparent. Now comes the fun part: PIL has something called an ImageDraw module which allows one to draw text or other shape onto an image using an instance of a Draw object on the image. So I just use this Draw object on my transparent image,  using the .text method to draw the specified text at a particular position. This gives me a transparent image (or a canvas if you may), with just some text on it and nothing else seen. Remember, the image is transparent so you should not see any white or any other colour, but the text is as transparent as specified by the trans variable. But there is a slight problem, as the program ignores the alpha value  when displaying and manipulating the image. This is easily solved by using something called masking as described in the next chapter. However, we can still assume our image to be truly transparent.

Finally, I use the .paste method of my original image to paste my transparent image onto my input image. In the paste method, the most important thing is the 3rd argument which is the mask. The mask simply specifies which parts of the image being pasted should be actually pasted. The .paste method uses the alpha channel of an image to determine the mask, and since everything but the text has an alpha value of 0, only the text is pasted onto my input image. This results in simply my input image having some text on it, without a whitish blur that ruins your hard taken photo. Since both the images are of the same size, it means that the location you put your watermark will be preserved on pasting it.

Here’s the code:


from PIL import Image, ImageFont, ImageDraw

def watermark(img_file, text, wfont, text_pos, trans):

    """
    Watermarks the specified image with the text in the specified font and on the specified point.
    """

    # Open the image file
    img = Image.open(img_file)

    # The Text to be written will be black with trans as the alpha value
    t_color = (0, 0, 0, trans)

    # Specify alpha as 0 to get transparent image on which to write
    watermark = Image.new("RGBA", img.size, (255, 255, 255, 0))

    # Get a Draw object on my transparent image from the ImageDraw module
    waterdraw = ImageDraw.Draw(watermark, "RGBA")

    # Draw the text onto the transparent image
    waterdraw.text(text_pos, text, fill=t_color, font=wfont)

    # Paste the watermark image onto the input image img, using watermark image as the mask
    img.paste(watermark, None, watermark)

    return img

So you can see that the code is fairly straightforward. Now remember, this is just a demo to give you a basic idea of how to achieve watermarking. There will be similar libraries that allow you to do the same thing in almost every programming language, so all you have to do is apply the concepts. And then you too can get an amazing watermark like this:

Watermarked Image

An image that I watermarked using my own program.

Using the above ideas and techniques, I was able to code up my Watermarking tool in about 14 days, with a fun GUI and efficient processing. I have open sourced it on GitHub and hopefully I can expect you to be a contributor on it.

Eviva!