After I finished this project, I find an amazing example of using geolocation and data on 知乎 (Chinese Quora). It’s quite similar with my outcome but better than mine.

Screen Shot 2017-05-28 at 23.26.38

You can rotate the earth to hear the different sounds come from the different site around the world. And if you long press, it will locate the exact sound source.

Tools and Technical means:

Screen Shot 2017-05-28 at 23.47.52


threejs, glsl for building and rendering the sphere.

bump Map, specular Map for chartlet.

gui library in C++ for lighting





After the crit, Tobias advised me to delete some pages because my website only has one function which is to hear the ocean sound. I wanted to build it more professional before, but after that, I realised that simple is a good thing. I only did the UK part so there is no need to put anywhere else in the world. And the time could as the interface of my map page.Screen Shot 2017-05-26 at 13.45.02

(click to play, click again to stop)

loI create the icon myself. Looks like google marker and on the top of it looks like waves.

coding part:

Screen Shot 2017-05-26 at 14.00.27

⬆️ calculating closest marker and play the sound automatically.

Screen Shot 2017-05-26 at 14.00.43

⬆️calculating closest time.

Geo-based on TIME

Time would be a good element for archiving “up-to-date”. So users can hear the sound at this moment. Also data files I downloaded contain the time, which is convenient for me doing this project. For more computer readable, I change the format of time. For example 0 means 00:00, 15 means 00:15, 30 means 00:30, etc.

Screen Shot 2017-05-09 at 15.13.34

Screen Shot 2017-05-09 at 15.55.32

I was thought to divided the sea level data into four part and play different sounds. And represent the difference value with flocking. the bigger the number, the bigger the mul value, the bigger noise.

Screen Shot 2017-05-09 at 16.01.45


Then I testing again and I found the biggest difference value is over 10. For example, at 16:00, sea level data at that moment is 2, but the difference value over there is 10. Then it would sound like baffling. So I decided to associate flocking sounds (0/0.1/0.25/0.5) with each synthetic sounds.

In order to emphasise the importance of time, showing this project is built on the time. I made a new homepage to represent the current time. Try to make it more professional.

Screen Shot 2017-05-09 at 16.10.22



Geo-build the website

Screen Shot 2017-05-09 at 14.38.23Screen Shot 2017-05-09 at 14.43.40


World map which has landscape (national boundary lines) and ocean only, keeping the interface simple. There is a thumbnail on top right corner to show different countries’ location on the map. The little red stuff is UK.

Due to a large amount of working, I did the UK-based sound map at this phase.

Click [Locate] to jump to the UK map page.


UK map page:

Screen Shot 2017-05-09 at 14.49.16

I used styling wizard Google Maps to change the style of map, to emphasise the point of this project, which is the ocean. And makes it similar to the homepage. Uniform tones. But it looks like UK is a snow and ice land. Still working on it.



Screen Shot 2017-05-09 at 15.02.03

Writing 40 station coordinates manually and replace markers by my cute little houses. Then I did the first user testing. And my users pointed out that there is no obvious difference between every day’s sea level data. Why not I take the average data of a whole month and use that? 

Screen Shot 2017-05-09 at 15.35.15

So I downloaded data of May 01 and recorded the minimum and maximum value and the difference value.


Sound: and Adobe Audition to generate ocean sounds. to embed the environmental noise (pink noise).



Geo-proposal until 20/04


A website which created with Geolocation (Get current position and located) by JavaScript and synthetic tides sound by Processing. And of course HTML and CSS.



Audiences can hear the generative sound of waves/tides here by locating their position.

Audiences can click somewhere else to hear the sound closest to their friends’  location.


Target audiences:

The one who curious about nature and climate and environment and weather and tides.

The one who loves to listen to the purl for getting peaceful and cured and relax.

The one who interested in the synthesising and visualisation by the program.


The technical problems have been solved:

§ Get the data: Sea level station monitoring facility, which provides sea level data. And if I replace the “output=tab” by “output=asc” in the URL, then will get a tab file. Then change the suffix .tab to .csv. Then text to column to separate. Finally I got the data.

§ Import sound in processing:

Screen Shot 2017-04-19 at 16.11.43Screen Shot 2017-04-19 at 16.11.17

§ Geolocation and get current position.

§ World map


The technical problems to be solved:

Grab data up to date from over 50 html pages.

Synthetic pre-recorded.

Beautiful interface.

Geo-data recorded

I decided to collect some data of tides and ocean waves. Lat/Lng coordinates, sea level temperature, wave height and speed of tides.

I sent emails to NOAA/Sea level monitoring asked them if I can get a copy of data. But NOAA replied me that they only have data for the USA and sent me some other link which might be useful. National Oceanography Centre reply me patiently how to download their temperature and wave height data.



OSCAR (Ocean Surface Current Analyses Real-time) of Earth & Space Research

The best place to access OSCAR data is through the NASA Physical Oceanography Data Center, the PO.DAAC: The website also has an interactive data plotter which allows the user to overlay a variety of ocean properties on one map, including OSCAR. This is the State of the Ocean, providing a means to view ocean conditions over the last 30 days.

Open DAP from podaac:

all program stuff

Screen Shot 2017-03-30 at 13.06.28



Although they don’t have UK data, but I found the highest tides worldwide.

Screen Shot 2017-03-30 at 13.22.55


PSMSL (Permanent Service for Mean Sea Level)

Thousands of worldwide stations provide metadata of tide gauges, which I don’t understand.


Screen Shot 2017-03-30 at 13.33.01



The most convince web I found. There are 72/hundurds UK station and each of them has very comprehensive data of sea level and tide gauges, which I think would be my main data source of this project.

This slideshow requires JavaScript.



Geo-slightly change the direction

It would be nice if I do a different direction. Firstly I was focusing on data visualisation. But that’s all observation stations do. If you want to see the trend of water flow, you absolutely don’t need to watch these on my website. So I was wondering that if I can do something about sound. All relax/meditation website I researched are using pre-recorded audio. What I want to do is synthesising waves sound by myself, using data of sea level, temp, etc. But until now I still have no idea how to make it. I am trying to learn Processing and it has a library.