Colour Monitor

ColourMon at richardwheeler.net

Image: Google Data Centers

Mood of an image is hard to measure... but with hue, saturation and luminance ("spectral shade", "colourfulness" and "brightness") you can get a good idea. I wrote a website that can analyse the colours present in any image you give it. You can try it out here.

So how about some simple examples? Lets try these images:

Blue, a wet car.

Green, a conifer frond.

Red, champagne bubbles.

These simple examples give a clear impression about how the plots work: in the middle is a circular histogram of the colours (spectral shades) in the image, and gives an idea of how much of each colour there is. Up the left is a histogram of image brightness (lightness of colour), and up the right is a histogram of colour saturation (vibrancy).

Together these three measures give an impression of the mood of an image: its key colours, how vibrant they are and how bright they are. The main colours of this image are easy to pick out:

ColourMon at richardwheeler.net

Image: Komplex Graphix Wall Art

While my site lets you explore the colours that make an image appear vibrant and interesting it also reveals one of the tragedies of modern cinema; the teal/orange colour grading madness.

Teal/Orange madness!

Screenshots from Transformers 2, Tron: Legacy, Hot Tub Time Machine, Iron Man and Wolfman.

So many blockbusters use orange and teal colour grading that a lot of modern films basically only have two colours: teal or orange. Bring back our other colours!

ColourMon at richardwheeler.net

Image: Boston Big Picture

Software used:

Paint.NET: screenshot management.

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.

Try it live here.

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:

View it live here.

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:

View it live here.

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.

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:

View it live here.

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 richardwheeler.net 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:

Notepad(!)

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!

Websites:
Dynamic word mapper at richardwheeler.net

Trendy and Elemental

You can explore the properties of the periodic table interactively here, and you each one of the periodic table images links to an interactive version showing the same data.

The periodic table is an amazingly elegant arrangement of the elements based on the electron configuration of the atoms... Its power lies in its predictive abilities; clusters of elements in the periodic table have similar properties and there are distinctive trends across the table. This inspired me to make a website where you can explore these trends interactively.

Some of the classic trends are:
Atomic radius (darker colours indicate smaller atoms)
Thermal conductivity (darker colours more conductive, this reflects metallic character)Ionisation energy (darker colours indicate less energy is required to remove an electron)These are just the boring "classic" trends though... You can look at lots of other properties of the elements. The stability of the nucleus (linked with radioactivity) also gives some interesting patterns:
Radioactive decay half life (darker colours indicate more unstable elements, greyed out elements are not radioactive)
There is a clear pattern, only elements with a large number of protons are radioactive, with two exceptions; Tc (Technetium) and Pm (Promethium) which fall out of this sequence... What causes this? We can work it out by looking at the number of stable isotopes for each element, i.e. the number configurations of neutron number for an element which are not radioactive.

Number of stable isotopes (darker colours indicate less stable isotopes, light colours indicate more stable isotopes)The number of stable isotopes shows a distincive striped pattern where alternating columns have either few or many stable isotopes... Notably Tc (Technetium) and Pm (Promethium) fall in columns where the elements have few stable isotopes. These patterns show how an even numbers of protons makes the nucleus more stable, and odd numbers make it less stable. The effect of this can be extreme; Sn (Tin) with 50 protons (an even number) has 10 stable isotopes with 62, 64, 65, 66, 67, 68, 69, 70, 72 or 74 neutrons. Tc (Technetium) with 43 protons (an odd number) has no stable isotopes.

In turn the stability of the nucleus influences how abundant an element is in the universe...
Abundance in the universe (darker colours indicate more rare, light colours indicate more common)Only non-radioactive elements are common in the universe, radioactive heavy elements quickly decay after they are produced (by nucleosynthesis). There is also an obvious general trend that elements with smaller nuclei are more common.

If you look closely at the abundance of columns of elements you can, however, see trends which mirror the number of stable isotopes; elements like Cu (Copper, 29 protons), Ag (Silver, 47 protons) and Au (Gold, 79 protons) are more rare than elements like Ni (Nickel, 28 protons), Pd (Palladium, 26 protons) and Pt (Platinum, 78 protons)... Elements with more stable nuclei are more likely to be formed in supernovae.

There are always exeptions to the rule though, Li (Lithium), Be (Beryllium) and B (Boron) are much less abundant than you might expect from the "smaller nuclei are more common" trend... Turns out these are not produced in large quantities by stars, unlike carbon, oxygen and nitrogen, and were instead produced by cosmic ray spallation, but that's another story...

If you have enjoyed exploring the properties of the periodic table you can carry on, interactively, here. This is an example screenshot showing the heat capacity of the elements (in the colour hue), atomic radius (in colour saturation) and melting point (in colour brightness):
Software used:
HTML5 (canvas) & Javascript