Monday, 3 December 2012

Cell Picture Show

One of my scanning electron microscope images from my research into the division of Leishmania parasites is currently featured in the Cell journal picture show on parasites and vectors. You can check it out (image number 11) here.

"Leishmania mexicana promastigotes, which normally inhabit the gut of the sand fly vector, are shown at different stages of the cell cycle. Cells are arranged by cell-cycle progression, increasing in a clockwise direction. L. mexicana mainly causes a mild form of cutaneous leishmaniasis, forming ulcers at the bite site of an infected sand fly."

Software used:
ImageJ: Micrograph processing

Sunday, 25 November 2012

Flippy Clocks

I have always loved the classic flip clock style, and it makes an interesting test for my HTML5/canvas programming skills. This little clock project uses no images, instead it uses 60 hidden canvases to draw the top and bottom halves of the flip cards. These are then assembled into the final clock which appears live on screen.

Wednesday, 14 November 2012

Live Earthquake Monitor - WebGL

Earthquakes, while devastating, are an amazing natural phenomenon. When, where and how deep under the Earth's surface tell us a huge amount about the way the Earth works...

About 18 months ago I made an interactive, live and very informative website mapping recent earthquakes:

This was my first ever interactive website of this type of complexity and I am still very proud of the result! Still, styles change, my programming ability improves and, most importantly, new technology becomes available. This is the all-new updated result:

This new version makes use of WebGL which is a new way of displaying 3D graphics in your browser. This technology is not available in all web browsers yet (it is available in recent versions of Firefox and Chrome) but allows fast, smooth, full 3D graphics. In short it looks beautiful, try it out!

Software used:
Three.js: Excellent javascript library to simplify using WebGL.

Tuesday, 9 October 2012

Astronomical Clock

The Prague astronomical clock is a work of beauty.

Image linked from Wikipedia

This clock, if you know how to read it, tells you the time, the date, the position of the sun in the sky, the position and phase of the moon, the current time of sunrise and sunset. Quite impressive for a clock installed in 1410!

Now you can enjoy the confusing complexity right here on your desktop:

This clock shows similar information, it tells you the time, the date, the position of the sun in the sky, the current time of sunrise and sunset and the precise time difference between when the sun is highest in the sky and 12 noon. It is a challenge to read, but there are some hints on the website (click on [show/hide] in the help box). This pdf may help too...

Unlike the Prague astronomical clock which is only accurate in Prague my one at works perfectly no matter where you are in the world by using HTML5 geolocation to find your location and then recalculating the clock display.

Better than that it can also show you what an astronomical clock would look like if you were at the same latitude and longitude, but on a different planet! This is a bit buggy (it doesn't accurately calculate the time of the year) but gives a little insight into how astronomical clocks would appear on other planets. Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune, Pluto.

In these extraterrestrial versions of the clock the hour hand still moves once around a 24 hr dial or twice around a 12 hr dial per day on that planet. The second hand still moves once per second, but the different length of the day means may move more or less than 1 step on the dial. This is particularly strange for Mercury where the year is 88 Earth days, but it takes 176 Earth days from sunrise to sunrise (a Mercury day); the day is longer than the year.

The dial with the zodiac symbols also has big changes between planets. This is because its eccentricity (the distance it is offset from the centre of the clock) depends on the axial tilt of that planet. Uranus is particularly strange because its axial tilt is near 90 degrees; it spins on its side.

Software used:

Wednesday, 3 October 2012

Dynamic word mapping

Word maps or word clouds are a great way of mapping out the important words in a paragraph of text. Words that appear more often (excluding very common words) appear larger, concisely summarising the paragraph.

This dynamic word map:
Is the word map from this paragraph of text (from Wikipedia):
A mind map is a diagram used to represent words, ideas, tasks, or other items linked to and arranged around a central key word or idea. Especially in British English, the terms spidergram and spidergraph are more common, but they can cause confusion with the term spider diagram used in mathematics and logic. Mind maps are used to generate, visualize, structure, and classify ideas, and as an aid to studying and organizing information, solving problems, making decisions, and writing.The elements of a given mind map are arranged intuitively according to the importance of the concepts, and are classified into groupings, branches, or areas, with the goal of representing semantic or other connections between portions of information. Mind maps may also aid recall of existing memories.By presenting ideas in a radial, graphical, non-linear manner, mind maps encourage a brainstorming approach to planning and organizational tasks. Though the branches of a mindmap represent hierarchical tree structures, their radial arrangement disrupts the prioritizing of concepts typically associated with hierarchies presented with more linear visual cues. This orientation towards brainstorming encourages users to enumerate and connect concepts without a tendency to begin within a particular conceptual framework.The mind map can be contrasted with the similar idea of concept mapping. The former is based on radial hierarchies and tree structures denoting relationships with a central governing concept, whereas concept maps are based on connections between concepts in more diverse patterns. However, either can be part of a larger personal knowledge base system.

There are some very cool online tools, like Wordle, for making word maps like these, but they are not "dynamic". I wanted one where it constantly updates as you type the words in... so I made one! Try it out here.

The logic for making the word map is quite simple. Imagine making a word map based on each word that appears in this sentence, what would that word map look like?

  1. Take the input: "Imagine making a word map based on each word that appears in this sentence, what would that word map look like?"
  2. Filter out the 100 most common words and all capital letters and punctuation. This leaves: imagine, making, map, based, appears, sentence, map
  3. Count the number of times each of these words occurs: imagine (1), making (1), map (2), based (1), appears (1), sentence (1)
  4. Starting with the most common word add them to the mind map. For each word start in the middle and spiral outwards, placing each word at the first place where there is a big enough space for it (based on its bounding box):
This is a really simple way to summarise text in a surprisingly accurate way, this is the word map of the abstract from my PhD thesis:
I think it summarises what I worked on very well!

Dynamic word mapper at

Wednesday, 26 September 2012

Book Scanning

I have an old book which I am mining data from... The problem is paper is a pain; there is no Ctrl+F function and unless the index includes the terms you are after (which, in this case, it doesn't) then searching turns into a real pain.

The solution? Scan it.
The problem? How to scan it.

Unlike printed, typed or even many handwritten documents it's not easy to pull apart a book and scan the pages with an automatic machine, especially when the book is old, out of print and quite valuable. Most book scanners (including Google's) use cameras instead. This is my setup:

A very high-tech setup.

It's all very simple; a camera, a tripod to hold the camera still, remote shutter button to snap the pictures, lots of lamps for even illumination and a data connection to the computer so I didn't fill up the memory card too fast.

It was a pretty chunky book (801 pages) and it took a total of 489 shots (including reshoots of slightly out-of-focus pages) to capture all of it. That took nearly 1.5 hours, or about 10 seconds per photo. So what does a whole book look like?

With some magic semi-automated processing these images are all that is needed for a perfect scan. Using ImageJ I converted them to black and white, subtracted the background and cropped/rotated the pages. These are some samples:

These processed images can simply be fed into Adobe Acrobat or other similar optical character recognition (OCR) software to translate the image of the text into machine-understandable, fully-searchable text. Exactly what I need!

Software used:
ImageJ: Automated image processing

Tuesday, 17 July 2012

The Problem with Figures

One problem with normal scientific writing is the separation of data (in figures) 
technical details (in figure legends and methods sections) and the scientific conclusions (in the 
main text). But don't worry! Edward Tufte has the answer through sparklines.

Software used:
Microsoft Office - Graph and text production
Gentium Plus (main text)
Titillium Text (headings)

Monday, 2 July 2012

QR Time - the least useful clock ever

QR time - click to visit the site.

Probably the least useful clock ever, requiring a barcode reader to read the time!

Saturday, 26 May 2012


Emart in Korea just came up with something amazing; a sundial-like sculpture where the shadows make, between 12 and 1, a QR code you can scan to get info about special offers. I had to have a go myself!
This is a 3D rendering of a 3D shape which, when the light is from the right angle, makes a QR code which encodes a link to this blog. You can see a bigger version here.

QR codes are the leading 2D barcode method for encoding information and can be scanned by many phones. A simple grid of black and white squares encodes the data:
This is the QR code that encodes a link to this blog:
To work out the 3D shape that would make shadows which look like the QR code is actually quite simple. By following three rules each square in the QR code can be converted from black/white to a 3D height which will give the right shadowing effect:
  1. If a square in the QR code is white that square should have a height of zero.
  2. If a square in the QR code is black and also has a black square directly above it then it should have a height of zero.
  3. If a square is black and the square directly above it is white then it should have a height greater than zero. Starting from that square work downwards counting the number of black squares before you get to a white square. The number of black squares is the height that square should be, e.g. if a black square has two black squares below it then a white one then the square should have a height of 3.
This can be automated easily; this is the ImageJ macro code which does this calculation:
run("Add Slice");
for (x=0; x
for (y=1; y
v=getPixel(x, y);
if (v==255) {
} else if (v==0) {
if (getPixel(x, y-1)==0) {
} else {
while(getPixel(x, y2)==0) {
setPixel(x, y, w);

This picture shows the heights I calculated for each square in the QR code, black corresponds to a height of zero and each brighter shade of grey corresponds to a height of 1, 2, 3, etc:
I made a 3D model of this in Blender:
It doesn't look like much... but if you look at it from the right angle, with the right direction of lighting, the QR code pops out:
All in all pretty cool!

Software used:
ImageJ: QR code analysis
Blender: 3D modelling and rendering

Monday, 21 May 2012

Light vs. Microscopists

Light vs. Microscopists, my research comics feature in OUBS Phenotype, trinity term 2012. Everything you wanted to know about superresolution light microscopy in one fun package. Including a cute kitten. Check out the full issue here.

Software used
Inkscape: Document design and layout.
ImageJ: Micrograph simulation.

Thursday, 17 May 2012

Diatomaceous Anaglyphs

I was trying to work out what the least friendly, most jargon rich blog title I could possibly write something interesting about... I think "Diatomaceous Anaglyphs" is a pretty good effort!

Diatomaceous means "of diatoms"; a type of single celled organism which grows beautiful shells made of silica. In this case these are the shells of dead diatoms from millions of years ago which settled out of the sea, made beds of diatom shells then got compressed into a soft rock. This rock is mined and processed for use in various areas of industry and is called diatomaceous earth.

Anaglyphs are the name of the red/blue 3D images you get which can be looked at using some glasses with coloured celophane instead of lenses. With the surge in 3D films at the cinema you can find more and more 3D stuff online using anaglyphs.

When I combined the I made diatomaceous anaglyphs, which are just plain beautiful (you can also view the whole album on my Flickr):

For those of you not geeky enough to have red/blue 3D glasses this is an animated version:

Software used:
ImageJ: Image alignment and processing

Sunday, 13 May 2012


FatFonts are a great new concept by Miguel Nacenta, Uta Hinrichs, and Sheelagh Carpendale for presenting numerical data in an easy to understand way, but while leaving the numbers readable.

The idea is that numbers with a large value appear fatter and darker than numbers with a small value which appear thinner and lighter. This means that if you want to plot something like a height map, where each pixel has a value equal to its height, you can just write out the numbers and they build the image for you. The really clever bit is that if you have a multiple digit number, like 8242, the 8 (8 thousand) appears biggest, the first 2 (2 hundred) appears a bit smaller, the 4 (4 tens) appears even smaller and the last 2 (2 units) appears tiny.

It is always easier to explain concepts like this with a picture, so here is some data:

It is hard to look at this and see the shape of the data, but if you use a FatFonts presentation (this font is called Miguta):

You can now actually see the shape of the data, where the bigger numbers are and where the smaller numbers are. This example is of the number 8242 I mentioned above:

The 8 is biggest (8 thousands), the 2 is nested inside it (2 hundreds), then the 4 (4 tens) and finally the last 2 (2 units) is too small to see.

I have coded a couple of fonts (Miguta and 7 Segments) for Miguel Nacenta to make this technique really easy to use. Check out the FatFonts 'how to use' guide for more information.

Update: 17/05/2012
And here is an example of my FatFonts 7 Segments design in action;

Software used:
Inkscape: Managing Miguel's glyph designs
Fontforge: Font preparation and contextual alternates coding

Monday, 12 March 2012

Diatomaceous Zoom

I posted a video before about the magnification range of a scanning electron microscope... This is the update with a slightly more interesting sample! Last time I was using 10 micron beads to confirm the calibration of the scope, this time it is fossilised diatoms; tiny single celled plankton with beautiful shells.

The video starts at 25x magnification, the whole field of view is about 2mm across.

And it starts zooming in...

And in...

And in...

Until it gets to 200000x magnification, nearly 1000x greater than at the start of the video. Now the whole field of view is only about 2um across. That is 100 times narrower than a human hair.

Then it zooms back out again so you can see what you were looking at!

Software used:
ImageJ - Generating zoom series, converting individual images to a video.

Wednesday, 22 February 2012

Sublime - video

Sublime is a video combining music with science. Awesome.

The story of this video is the phase of matter and how it changes. You will know the common phase changes of water; boiling, condensing, freezing and melting. These phase changes all involve a liquid step, and in this video liquids are not involved at any stage.

The phase changes here just involve solids and gases, either deposition (changing from gas directly to a solid) or sublimation (changing from a solid directly into a gas). The actual substances in the video are common, just dry ice (solid carbon dioxide) and water frost, the reason no liquids are involved comes down to the temperature and pressure. At normal atmospheric pressure dry ice does not melt, liquid carbon dioxide is not stable, so it changes directly into a gas. Dry ice is also very cold (-78°C/-108°F) meaning water vapour (a gas) in the air coming into contact with the dry ice directly deposits to form frost. In some places it also hits the cold carbon dioxide gas and solidifies from the air to form tiny snow particles.

The frost looks black and the dry ice looks white because of the way the sample was illuminated. It was lit up from the back and frost (which has lots of tiny crystals) scatters the light away from the lens, making it darker. Dry ice scattered the light less, i.e. light got transmitted straight through to the lens, so appeared lighter.

Over time the carbon dioxide gradually sublimates and the water frost gradually forms. Because the surface the frost is trying to grow on is constantly disappearing the frost constantly moves. As the carbon dioxide sublimates it also increases greatly in volume, blowing the frost about!

This video is of a microscopically small sample. The region the video shows is only about 1mm across, depending on the size of your screen you are seeing the frost and dry ice at 100× to 1000× its actual size. This high magnification lets us see individual ice crystals growing as the frost spreads. Initially the crystals in the frost are very small (5μm or so). Gradually as the dry ice sublimates the temperature increases and the water vapour in the air can take longer to deposit onto the growing ice crystals. Slower crystal growth leads to bigger crystals (up to 100μm).

Ice crystal shapes also vary depending on temperature and environment, in this video you can see both needle-shaped and flat ice crystals.

The frost grows and the dry ice sublimates quite quickly. All the clips in the video are at 4× real life, if you imagine everything happening at a quarter of the speed that is how fast the frost was growing and changing.

Software used:
ImageJ: Image editing, alignment, cropping and video making,
Audacity: Audio editing.
Windows Live Movie Maker: Final sequencing, adding captions.

Monday, 30 January 2012

Things Never Change...

There has grown up in the minds of certain groups in this country the notion that because a man or corporation has made a profit out of the public for a number of years, the government and the courts are charged with the duty of guaranteeing such profit in the future, even in the face of changing circumstances and contrary to public interest. This strange doctrine is not supported by statute or common law. Neither individuals nor corporations have any right to come into court and ask that the clock of history be stopped, or turned back.
Robert A. Heinlein: Life-Line (1939)

Tuesday, 17 January 2012

Treatise - my first professional font!

It was about time I started to try and make some money from my plethora of hobbies... Today my first professional standard font goes on sale! You can take a look at the interactive previews at

Treatise is serif (with the sticky-out-bits (: ) font with some fun quirks. It has very big round terminals on the top of letters like r, c, k and s and a big blob in the top of the o. These all work together to make it look a bit more handwritten. It also uses the single storey a and g (i.e. like you write them, not like you type them) which also helps maintain the handwriting feel. Treatise uses some fancy Opentype features which let you adjust the way letters appear depending on what neighbours them. I have used this to make the long tail on the capital R and Q nestle neatly around curved letters like u, e, a, etc. It also means that letter combinations like ff and fl where the f can crash into the top of the next letter are replaced with a nicer looking character combination.

While it has some cheeky little design features which make it very unlike most serif fonts it is still subtle enough to sit happily in a paragraph of text. Having said that it also has enough character to make a title interesting. All in all I am pretty happy with it as a design!

The software used to design and code this font was entirely free and open source:
Sketching - Gimp
Outline design - Inkscape
Glyph coding and font generation - FontForge