Overview

Greenpeace turned 50 in September 2021 and wanted to give their supporters the recognition they deserve. They wanted to create a “photo mosaic” – a large image composed of smaller images in which supporters could contribute messages and photos to. The brief was that at least 7,000 supporters should be able to contribute, that the tool needed to be embedded on their website, and that it needed to be ready in just under two months.

Outcome

Supporters contributed nearly 20,000 messages and nearly 9,000 of their own images to the wall – far surpassing initial expectations. Feedback from users, supporters and staff was very positive and we’re now exploring ways to make the technology part of more campaigns and an ongoing offering for supporters. Building and displaying the mosaic walls – each of which ended up containing fifty gigapixels (50,000,000,000 pixels) was challenging (in a good way) and the site launched on time and performed well even under heavier than expected user numbers.

We all really enjoyed working on the project and the people at Greenpeace said they enjoyed it too. One of – possibly the main – thing that made the process work and meant we ended up with something everyone could be really proud of is that everyone took ownership of the project and worked on it as collaborators – no one was telling anyone else what to do: we were just all using our skills and expertise as best as we could to reach our common goal. It felt great and we are very, very thankful to the Greenpeace team for their part in that – we recognise it takes great trust as a client to take that step back.

Our approach

As with all our technically challenging projects, we started by clarifying the desired impact of the project and then carried out and in-depth investigation of the technical challenges before settling on an approach for the build.

As time and budget were limited, and because the Greenpeace team already had a clear and sensible product idea we kept initial concept exploration fairly narrow (e.g. we didn’t try to reinvent the wheel or sell them a camel when they wanted a car). We ran a theory of change session for the project with the Outlandish team and the main Greenpeace stakeholders – the fabulous Tom Micklewright and Deborah McLean.

We ended up with a project goal of “Create a tool/experience that builds loyalty with Greenpeace’s supporters by celebrating their achievements over the last 50 years putting their personal messages and experiences front and centre of the future discussion of climate crisis”. It was really useful to clarify the balance of celebrating the past 50 years with the “future discussion of climate crisis” and made a lot of the design decisions later much simpler

The simplified theory of change ‘outcomes pyramid’ helped us to make decisions quickly later in the project

Initial technical investigation

With any technical area you don’t do day-in, day-out it’s important to start by investigating the parameters of the project. I tend to think of it as “how many of what things do we have and what do we need to do with them”.

We started by looking at some existing photo-mosaic tools including commercial services such as https://mosaically.com/ as well as open-source or publically available code such as this python photo mosaic generator by uvipen, this PHP version by eflorit, and this one which uses machine-learning techniques.

Trying out these different version with different sets of images and parameters taught us a lot:

Some approaches worked better than others:

different photo mosaics

Rainbow warrior made up just of a few hundred faces didn’t look right:

In the end we identified some key issues that none of the libraries we found overcame:

All these turned out to be quite complicated problems to crack!

How many pixels you need to render an image so it’s recognisable depends a lot of how perfect the pixels are

Technical solutions

Colour matching

If your target image is made of 50,000 pixels/tiles and that you need to find the best candidate from your user-supplied image library for each tile it’s quite complicated to do the matching.

First you need to know the difference in colour between each “tile” from the original image and each candidate. That’s 50,000 x 50,000 – or 2.5 billion – differences to calculate which is quite a lot and even with a modern computer you need to make sure you do each comparison in a very efficient way or you’ll have a problem. If calculating each difference took one second it would take just under 80 years to calculate them all. To make maters worse, if you wanted to find which of the combinations of those differences is best you have another ‘NP-complete’ combinatorial optimization problem on your hand – there’s something like 6,250,000,000,000,000,000 combinations to assess for 50,000 tiles.

In the end we:

Colour tinting

Because the colour of the submitted images was not a perfect (or even vaguely close) match to the image we wanted to create we needed to do some sort of colour tinting. Commercial service Mosaically essentially overlays a transparent image of the target main image over the grid of submitted images. This is quite effective but seems like a bit of a cheat. We tried various systems of colour shifting, highlighting and tinting and, in the end, we:

Very Large Image

If you want to make a big image out of 50,000 images, and each of those images needs to be 1000 pixels square you are trying to generate an image with 50,000,000,000 pixels. This is over 4,000 times more pixels than a full resolution image from an iPhone 12 Pro, and nearly 12 times the size of the maximum possible jpg image (which only supports 65,535 pixels square). Even if you could put an image this large on the web, no one would be able to see it because it would be several gigabytes of data, and no browser would be able to render it.

To get round this we:

Next steps

The whole team really loved this project. It was stressful at times but we’re really looking forward to doing more things like it. We’re talking to Greenpeace about how they can use this and similar tools in other campaigns and we’re all buzzing with ideas about how to make fractal image galleries that no one can tear themselves away from.

I personally want to make search engine that displays a whole organisation as if someone had taken all their documents and people and laid them out on a giant field, like a mega Art Attack-come-mind-map/rostrum camera of god. I probably need to do a bit more thinking about how to explain that one, let alone build it.

art attack image of giant person made from clothes

Do you want your search engine to look like a giant art-attack-meets-the-rostrum-camera-of-god? If so, get in touch. Or if you have a more sensible idea feel free to email hello@outlandish.com.