Finding the average colour of my town

Wilbert Tabone, PhD
CyberCoffee
Published in
4 min readSep 24, 2018

This story was originally published in Maltese for a local publication.

In a previous story I had gone through the technicalities of finding the average colour in a digital image. Following that article, I had thought it cool to try an experiment in my own hometown for one of its own local annual publications.

Meet Kirkop, a small village in Malta

Kirkop (Maltese: Ħal Kirkop) is a village in the Southern Region of Malta. It is found near the Malta International Airport, and has been inhabited since pre-history.

Population (2014) — c. 2,191.

Source: Wikipedia

Data Collection

The small scale of the village made it quite easy to capture data and conduct the experiment in a relatively short amount of time.

A slightly overcast day was selected for photo shooting in order to have neutral lighting on the entire street and urban infrastructure.

I went around the village, taking a particular route that covered the majority of streets and took photos of building façades, streetscapes and rural regions. Here are some of the pictures I took:

The Experiment

As a proof-of-concept, I took the first 100 captured images into consideration. These were placed into a data directory and labelled as imgN.jpg, where N = [0, 100), ie: 0 ≤ N < 100.

Every image was batch (one after the other) imported into a dynamic list (ArrayList object) and the average colour of every image was found and placed into another list.

So now we have a list of 100 colours, each significantly representative of particular areas and structures in the village. In order to find the overall average colour of these signifying colours, I decided to produce a mosaic equally featuring every colour and subsequently processing this mosiac through the same average colour finding algorithm.

The dimensions of the mosaic grid and each cell size were calculated as so:

int numberOfImages = averageColorList.size();
int roundedGridNum = ceil(sqrt(numberOfImages));
int ts = SZ/roundedGridNum; //tileSize, where const SZ = 800

Where, the square root of the list is found to the nearest upper rounded number to give the grid dimensions. In this case, with a 100 images, the result was a precise 10 (no need for rounding). Hence, a 10 * 10 grid was produced with each square cell dimension of SZ/roundedGridNum = 800/10 = 80px.

The generated mosaic image.

Result

The mosaic structure, which was drawn using rectangles, was saved to disk and reloaded on screen as an image. Upon clicking the mouse, the application processed the input image on screen (ie: the mosaic) and found its average colour, subsequently filling the entire viewport of the application with it. This colour is therefore the ‘overall average colour’ of the village. It was found to be: #A2998E (RGB: 162,153,142).

Source: https://www.color-hex.com/color/a2998e

This image subset was comprehensive enough to offer a good indication of where the average colour palette is derived from. The resultant colour #A2998E is quite acceptable as a result, due to the stone colour tone and the amount of asphalt in the roads. Looking at the selection of input images provided above, one can easily deduce the greyish colour tones present in each image just by observation.

=> Psst … I put myself to the task of uploading the code to Github. Enjoy :D

I hope you have enjoyed the contents of the story, and perhaps you will be inspired to conduct a similar experiment in your own town :) If you have any feedback on how this could be improved, or any other general feedback — please do not hesitate to comment below.

In the meantime, have a great day/night/anything in between.

--

--

Wilbert Tabone, PhD
CyberCoffee

Postdoc working on Brain-Computer interfaces for Human-Robot Interaction. Background in AI and a passion for culture and art. #VR #AR #AI #UX #HCI #LLM