Klanglandschaft (Beta)
Klanglandschaft is a an interactive 3D map of Lake Lucerne created in collaboration with rnaisa. Using a node editor, you can create a soundscape that reacts to changes in the landscape as you navigate the map.
This prototype was developed during a course at the Digital Ideation programme at Lucerne University of Applied Sciences. You will experience bugs.
Development
The source code is available on Github. I did the data processing, the 3D map view and programming the sound editor logic.
Data Processing
The project uses various datasets from Swisstopo. A script downloads the required datasets and then converts the relevant data into one square kilometre large tile maps.
![Buildings tile map](https://dorianzgraggen.b-cdn.net/projects/klanglandschaft/tiles/2668-1203-buildings.png)
![Forests tile map](https://dorianzgraggen.b-cdn.net/projects/klanglandschaft/tiles/2668-1203-forest.png)
![Elevation tile map](https://dorianzgraggen.b-cdn.net/projects/klanglandschaft/tiles/2668-1203-height.png)
![Railway tile map](https://dorianzgraggen.b-cdn.net/projects/klanglandschaft/tiles/2668-1203-railway.png)
![Satellite tile map](https://dorianzgraggen.b-cdn.net/projects/klanglandschaft/tiles/2668-1203-satellite.jpg)
![Traffic Noise tile map](https://dorianzgraggen.b-cdn.net/projects/klanglandschaft/tiles/2668-1203-strassenlaerm.png)
![Bodies of water tile map](https://dorianzgraggen.b-cdn.net/projects/klanglandschaft/tiles/2668-1203-water.png)
![Wind Speed tile map](https://dorianzgraggen.b-cdn.net/projects/klanglandschaft/tiles/2668-1203-wind.png)
3D Map View
The 3D map is made out of tiles. Only the tiles close to the user are being loaded.
![](https://dorianzgraggen.b-cdn.net/projects/klanglandschaft/tiles.jpg?width=956)
Sound Editor Logic
The sound editor is built using Rete.js (for the nodes) and Tone.js (for the audio effects).
To pass the data of the section of the map the user is currently viewing, it is being rendered twice with shaders that display the various data sets.
![](https://dorianzgraggen.b-cdn.net/projects/klanglandschaft/datalayer0.jpg?width=956)
![](https://dorianzgraggen.b-cdn.net/projects/klanglandschaft/datalayer1.jpg?width=956)