xkcd Font And The Fine Art of Kerning

I am huge fan of the webcomic xkcd not only because of its intelligent take on many scientific, mathematical and physical phenomenon in a subtly humorous manner, but also due to it’s simple style where all the characters are stick figures. This helps one focus on the the message of the comic as well as helping its creator, the totally awesome Randall Munroe, publish new strips very frequently, satiating our need to not only procrastinate, but also not feel too bad about it. Also, if you don’t know who Randall Munroe is, google him right now. I mean now! Yes, stop reading and go google him and come back.

Back from our digression, I’ve noticed that the font used in xkcd is very curious. After some simple searching around, I found out that the font is Randall’s very own handwriting. What is cool about this font is the kerning involved. Kerning is nothing but the spacing between characters in text and this matters more than you would think. For example, take a look at the below strip, courtesy of Mr. Munroe:

kerning

Being a perfectionist is the worst thing on this planet, since after I discovered kerning, I now see it everywhere. Moreover, the fact that Randall’s handwriting follows very good kerning on the webcomic is a minor miracle, in my humble opinion.

Of course, the xkcd font was enticing enough that I started to have very strong desires to use this font on my system, and lo and behold, the font was actually available online on the ipython repository. So, now I shall describe to you how to use this amazing font on your own system to use with everything you wish to. The process below is specifically for Linux, though I imagine it should be far easier to install the font on Windows and macOS since they have much better font managers.

First things first, get the font! You can simply go to the repository and either download the single font xkcd-Regular.otf or download the whole repo in a zip file and extract that file. The other file xkcd.otf isn’t important so you can just leave it be.

The next step is to create a directory .fonts in your home folder. Thus the location of the directory is ~/.fonts. You want to now copy over the font file to this directory since Linux is aware of this directory as a possible source of fonts even though it may not have existed on your system a couple of minutes ago. Oh well.

Now the final step is to let Linux know that you want this font to be available system-wide. So we run fc-cache -fv to rebuild the entire font cache and make the xkcd font available to every application on your system. To confirm the font is installed, you can open up Font Viewer and check to see if the font is installed. The nice thing about the name xkcd is that it is unique and it will mostly be the last font on your system.

Time for an application. Let’s make VS Code super cool by making xkcd the default font. If you don’t use VS Code, you are seriously missing out on one of the best cross-platform editors available right now. Open up the settings page on VS Code and add this line to your user settings section

"editor.fontFamily": "xkcd, 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",

As you can see, xkcd is the first font in the list, so if it is correctly installed, VS Code will use it. Save the file and voila! Your text should now look like this

xkcd

Pretty cool, huh? Hopefully you enjoy your fancy new font and read more of xkcd.

Eviva!

Data Visualization For Greater Good

I’ve always been interested in understanding images. From how images are formed to how we can get machines to understand images in similar manner to the average human being. It is helpful that our visual world is rich and that images can capture so much information due to their high dimensionality.

The key word here is “visual”. Human beings are visual creatures. We rely on our eyes more than we would like to acknowledge for multiple tasks (as seen via various sight related idioms). As I delve into more areas of Computer Science, the use of data to accomplish superhuman feats is ever growing. Deep Learning for one is a new field that has tremendously tapped into these enormous collections of data to produce computational models with astounding capabilities. However, to better understand what models can be trained, many researchers recommend visualizing the data, again iterating the first line of this paragraph. Thus to marry the two above ideas, I decided to make my life easier by exploring some data visualization and explain why fundamental data viz is a highly useful and rewarding skill to have.

For my tooling, I use the well-designed and utilitarian Data Driven Documents or D3 library. Of course, I could have used other libraries such as Bokeh (Python), but D3 has a lot of great features that overshadow the fact that it is written in Javascript (ughh). For one, D3 directly renders to HTML rather than generating intermediate JS or images, making the visualizations super interactive. Moreover, D3’s idiomatic approach is what won me over. Loading, filtering and manipulating the data is done asynchronously in a systematic and declarative fashion, saving me a lot of headache. Finally, D3 has the amazing bl.ocks.org, maintained by D3 creator Mike Bostock (who has a PhD in Data Visualization from Stanford, by the way) and Mr. Bostock also write fantastic tutorials which use D3 and explain its capabilities.

Now for the actual goodness. Since we have more readily accessible datasets, visualizing them helps us to leverage our “visual creatures” persona to better understand them and leverage their latent information. For example, I created this amazing word cloud using D3, reading in the text of Andrej Karpathy’s excellent article on what it means to get a PhD:

wordcloud

All of a sudden, you understand the key themes of his article even though you may not have read it, not to mention this looks super cool! This is the power of data visualization and a key proponent of my belief that data viz is a useful and rewarding skill. You can take a look at the code on my block, or fork it and add your own text corpus.

I did mention interactivity didn’t I? That word cloud may not be interactive, but this plot sure is. That is nothing but a plot of the 1024 dimensional vectors generated from a Convolutional Neural Network on a Geolocation dataset, where the idea is to train a model to predict the location where the image was taken by having the model look only at the image. If you’re confused about how I managed to plot a 1024-D vector in 2-D space, then I would recommend taking a look at the fabulous t-SNE algorithm and the open source implementation of the faster Barnes Hut t-SNE algorithm available from the inventor himself (if you look closely, you may see my name in the list of contributors 😉 ).

Another cool example is that of choropleth’s or heat maps as they are commonly known. Mike Bostock has some amazing visualizations using choropleth’s on a simple statistic such as census data which I highly recommend taking a look at, amidst his other gorgeous visualizations. I personally plan to use choropleths to visualize some of the geolocation datasets I am playing around with.

Some visualizations you might start off with if data viz is new to you is stock market prediction. You can pick up the data from Yahoo Finance and then with the power of D3, you could quickly just see how a particular stock has been performing over weeks, months, or even years. Kind of nice, compared to staring at all those floating point numbers without too much trouble either.

Overall, I hope via these simple examples, I have demonstrated the inherent power and usefulness of data visualization and how it can help tackle some of more challenging problems which our society faces. Now go out there and visualize some greater good!

Semester V of Computer Science

Ah. Another semester gone by and another treasure trove of knowledge discovered and assimilated.
This was semester V and what a semester it was. We finally dove right into core Computer Science and Engineering with the following awesome sujects:

  • Algorithm Analysis and Design
  • Microprocessor Interfacing Techniques
  • Principles of Programming Languages
  • Computer Networks
  • Computer Graphics

Truly great subjects for a Computer Science major to undertake. So let’s dissect them and see what it meant to study these topics.

1. Principles Of Programming Languages
A subject which involves the study of various programming paradigms so that one understands what are the benefits of the multitude of features being introduced in Programming Languages on a daily basis, so that we can understand the motivation behind it as well as better use it in our program design. Sadly, marred by not-so-good teachers who decided they would teach us C++ and Prolog programming rather than cool concepts like the Liskov Substitution Principle.

2. Microprocessor Interfacing Techniques
A fundamental and challenging subject, it made us truly think about the Simplicity vs. Efficiency Model of programming. Learning about the underlying hardware that controls our machines and lets you see this text here, was simply great. Read about the PS3 Cell Broadband Engine after taking this course and found that I was really able to understand all the hardware jargon on the page. All in all, 8085 and 8086 coding was FUN!

3. Computer Networks
A genuine rote subject made interesting by the fervour and enthusiasm of the faculty, this subject stands as a fine example of how great education can be undertaken provided the teacher has the motivation for it. Initially not a fan of Computer Networks due to the mugging tendency of the subject, was thrilled to see how succinctly all the various protocols and their algorithms were presented in a manner that was perfectly logical. Doubts were effortlessly quelled and the various abstractions used just made the learning curve gentler. Coupled with some great laboratory sessions (the teacher actually wanted to do a lot more), this subject became one of my learning high-points this semester.

4. Computer Graphics
A subject with a bad reputation for having outdated curriculum, I took it because the faculty in charge of it was going to revamp the topics and introduce us to OpenGL. Started great, awesome practical submissions and fun classes. Got a little drab in the middle because of redundant topics like Matrices and Vector Geometry as these had already been taught in High-School Maths. In the end, it was a good introductory class to the magical world of Computer Graphics.

5. Algorithm Analysis and Design
Saved the best for the last. My favourite subject of the semester as it coupled pure Computer Science and Mathematics to form a foundation for Computing everywhere. I already had good algorithm skills thanks to all those hours poured in Project Euler and UVa Toolkit, but this course really cleared my head and gave me the tools to really understand just what the heck I was coming up with. Intuitive solutions were given names and ideas were presented as theorems. Various problem-solving approaches helped me understand how to better analyze and tackle problems and applications were given as much importance as the concepts themselves. Someone once famously sayed, “To be a great coder, you can either write codes for ten years or take a semester-worth course on Algorithms”. Guess I saved myself 9 years of pain. 😛

Thus, great semester, lots of nice topics, finally got some Computer Science and Engineering done. Let’s hope the new semester is as much enthralling as this one.

Eviva!

OpenGL Polygon Stipple

Well, OpenGL programming has well and truly started, and man, it has some truly mind-blowing features!!

Take for example Polygon-Stippling patterns where you can define a pattern that will repeat itself in the specified polygon – Makes for really good 2D art! 🙂

Here is one for example:

Hope you liked it!!

Install OpenGL on Linux

Ok, I am posting after a really long time. Had been busy with some stuff (not limited to the ACM chapter Chairmanship).

Also college has resumed and I have started 3rd year with Computer Graphics as my elective subject. Now the issue of installing OpenGL, the best 3D graphics API out there, on linux arrives.

Well here’s the good news: OpenGL ships with most Linux distros, and Ubuntu is one of them. The Bad news: Getting glut for the X-Window system.
 

Here’s the solution: You can either go get freeglut and follow the install instructions, which is a very good idea, with a few modifications:

  1. Use ‘tar’ directly instead of bzip as specified on the site.
  2. Go to your package manager and be sure to install the “libxi-dev” package. You’ll need it to get the makefile.
  3. Continue with the normal installation process.

Else, you can run this command in a terminal window:

 sudo apt-get install libglut3-dev 

That should install glut (or freeglut, as is the case) and get you ready to write some deadly graphics code. Just compile and build with

 g++ -lglut -lGLU yourProgram.cpp -o yourProgram 

to get the executable and enjoy the show.