Creating circular thumbnails in the terminal

Circular pictures (like the one to the right) has become increasingly popular on the web. We have, for example, included circular pictures in RITMO’s annual report, and we therefore also wanted to use circular pictures in a presentation at our upcoming LARGO conference. The question, then, is how to create such circular pictures?

The circular pictures in the annual report are made through a CSS overlay. So if you try to right-click and save one of those, you will get the original rectangular version. It is, of course, possible to add circular thumbnails in the presentation software, using the circular crop function in PowerPoint or add mask function in Keynote. The challenge with these, however, is that you may get into trouble if you move your presentation from one program to another. I often prefer to make presentations in Google Presentation, and there is no such feature there.

The most bullot-proof solution is therefore to create new circular images. This can be done in photo editing programs, such as the circle image function in GIMP. But for a centre of the size of RITMO (50+ people), and with many people coming and leaving all the time, I would rather prefer an automatic solution. I therefore decided to figure out how to do this in the terminal.

It turns out that Imagemagick comes to the rescue once again. Here is a one-liner for creating a circular PNG image from a JPG file:

convert alexander.jpg \( +clone -threshold -1 -negate -fill white -draw "circle 100,100 100,0" \) -alpha off -compose copy_opacity -composite alexander_circle.png

This will take a regular image like this:

and make it into a circular image like this:

Since the original was a 200x200px image, I used the code “circle 100,100 100,0” in the script to ensure that the circle would be in the centre of the image.

The next step was to extend the script to read all the JPG files in a folder and convert them into circular images. This can be done like this (at least on Ubuntu):

#!/bin/bash

for i in *.jpg;
do
  name=`echo $i | cut -d'.' -f1`;
  convert "$i" \
  \( +clone -threshold -1 -negate -fill white -draw "circle 100,100 100,0" \) \
  -alpha off -compose copy_opacity -composite $name.png;
done

Save the script as circle_image.sh (or whatever else you prefer), make it runable (chmod u+x circle_image.sh), and run it (sh circle_image.sh), and you get a bunch of circular images that you can be used in any program around. Scripting is fun!

Image size

While generating the videograms of Bergensbanen, I discovered that Max/Jitter cannot export images from matrices that are larger than 32767 pixels wide/tall. This is still fairly large, but if I was going to generate a videogram with one pixel stripe per frame in the video, I would need to create an image file that is 1 302 668 pixels wide.

This made me curious as to what type of limitations exist around images. A very quick run-through has told me this:

  • GraphicConverter: 32 000 pixels
  • Photoshop: 30 000 pixels
  • OSX Preview: 30 000 pixels

So it seems that approx. 30 000 pixels wide/tall is some kind of limit to how large digital pictures can be. I guess there is a memory/storage issue related to this, e.g. related to file sizes not exceeding 2GB. For now I have therefore decided to generate videograms that are maximum 32767 pixels wide, but may decide to make some with several separate videograms instead.