Created by Studio Puckey & Moniker, Radio Garden is a research project that places radio research within contemporary discussions about migration, cultural identities, encounters and memories by generating new knowledge about the meaning of radio and listening in the age of globalisation and digitisation.
The team were approached by the Netherlands Institute for Sound and Vision with an open brief to design an installation for a research project called Transnational Radio Encounters. They couldn’t think of a better way to represent the idea that radio knows no borders than to pinpoint radio sources on a globe. Instead of using maps, they used satellite imagery to underline how radio signals have always had the power to cross borders. Because radio is a living thing, they decided to allow visitors to tune into streaming radio from around the world.
The first output of this project is radio.garden, which allows visitors to tune into thousands of live radio stations across the world by rotating a 3D globe.
For the globe they used Cesium, an open-source WebGL globe. Even though Cesium has all kinds of fancy support for 3D models and time-dynamic visualizations, they were mainly drawn by how well it performs and how it was able to smoothly draw however many thousands of markers they threw at it. The satellite imagery is generously provided by Microsoft Bing.
There were a few limitations which they had to workaround. For example, right by default Cesium redraws itself sixty times a second, even if the globe has not moved. When you are tuning into live radio and have the browser in the background, you want the CPU and GPU to be idling as much as possible. Luckily the developers of TerriaJS, a library for building geospatial data explorers, had implemented a way to block the render loop and only have it redraw when the globe actually moves.
In order to find the closest marker to your current position, they started out with a simple algorithm that would loop through all the marker on the globe in order to find the one closest one. As their radio station list grew, this quickly turned out to not be performant enough. Browsing through NPM they found an open-source module by the developers of Dark Sky (a weather API for the web) that provides fast nearest-neighbor lookups on a sphere using k-d trees.
The interface on top of the globe uses Facebook’s React library. This is the third project they have done using React and they couldn’t be happier. “Gone are the days of managing listeners and dom fragments. Now, our interface is just a function of our state.”
They also felt it would be nice to know the time of day of the radio stations visitors were tuning into, so they used Google’s Time Zone API in order to request the time zone for each of the thousands of cities and towns in their database. They found it actually makes a very nice experience, seeing the time change as you travel over the globe – “It could have been a project in itself”.
For the backend, which their editors use to add fragments and radio streams, they decided to go with Kirby. Kirby is a file based CMS, which is normally used for simple websites. They have been using Kirby for years now and keep coming back to it for their content management needs. It is the only file based CMS with a stellar backend user interface. It is one of the few proprietary software products they use in their web projects. They are always happy to support Kirby by purchasing licenses, knowing it will keep their small team of developers focusing on the development of such a niche product. This is the first time they used Kirby as an API server, outputting JSON for out front-end application. They were happy to be able to make use of their new Content Representations feature that allows you to output content in other types like JSON and XML aside from the standard HTML.
In order to allow their editors to easily add markers to the map, they used a little plugin called kirby-location-field that turns a latitude longitude value into a Google Map with a draggable marker. They rewrote the plugin and submitted a pull request with their changes.
The project can be seen at http://radio.garden