This project was about creating a web artefact using P5.js and live APIs.



We briefly talked about the project outline and looked up how APIs are working with Craig during multiple workshops. We also looked at some references from different artists using live Data.

I found the concept of using live data very interesting and I didn't want to limit myself to only a web artifact. The project was 2 weeks long which is rather short as I wanted to expand the concept to a physical output.


During two workshops we went over the basics of P5.js again as a refreshment. We then continued with how to get APIs to work in P5.js, clean and access the API data etc.
It was really interesting to see different types of data could be used as inputs in P5.js, we also looked at different APIs that existed, public ones or private ones with a key. At the time I didn't know what kind of data I wanted to use, so I started to scroll through the different types of APIs available here.


I remembered looking at APIs for the web fundamentals project in year 1. I wanted to work on the Spotify API. I think I wanted to do something new and don't limit myself to some old ideas I had at the time.
Looking through all the types of data I could use made me realize the project can have a very vague approach and outcomes. For some reason (probably the lack of sun during this period) I wanted to work on something related to light and sun. I started to look for weather API and the type of data I could use.
Most of them had the sunrise and sunset times which I thought were interesting, but they didn't have a lot of potential except a sort of exponential function.

But while looking at the API I found a very interesting set of data. The Norwegian Meteorological Institute (Meteorologisk Institutt) has an impressive range of weather data including aviation meteorological reports. Since I was a kid I was very interested in aviation and learned about METAR and TAF when I used to play some flight simulators. METAR and TAF are a special format of reporting weather information in aviation. It is composed of small strings of letters and numbers separated by spaces. Each combination of characters has a meaning and helps aviation professionals to have weather information in a very efficient way. It looks like that: LFPG 031630Z 19010KT 9999 VCSH BKN010 BKN016 12/10 Q1014 NOSIG

a rather complete explanation on how to read the data is available on Wikipedia here

I thought it would a great type of data to use for this project as it is something quite niched.
At the same time, I was still doing some research on this idea of working on lights. I quite rapidly abandoned the idea of sunrise/sunset times as it was maybe not that potentially interesting and I would probably end up using too literally.
Looking back at my open project small essays motivated me to look for another way of responding to the brief. I thought it could be very interesting to actually pair this METAR data input with a physical output.
In my creative process and practice, I'm a lot influenced by reflective materials, textures, relatively bright colours, and lights emission. Since this METAR data is so niched and unknown I thought this could be a great way to visually translate the strings of data into a potentially more visually interesting and fun way?


I presented this relatively vague idea of pairing METAR information and a physical light output to Jen during our tutorial on Friday. I showed some references by Ecal student Adrien Kaeser with his take on using weather data to influence music and his small visualization of this data with tiny graphics, and Jonny Niesche on his work with colour, reflective materials, and light.

Adrien Kaeser
Jonny Niesche

We then discussed multiple details of the idea, should it mean something or the data translation is purely abstract? How should I present this output? A mapping or a collection of screens? etc etc

It helped me a lot to think about the different steps I will have to go through for this project but also the actual concept and output. How can I successfully put together a physical piece using this data, how is it working and is there any interactions? Asking myself these questions over the second week really helped me figure out where I wanted to go with this concept at some crucial point of the projects.

After the tutorial, I did more research over the weekend for some potential references and paths I could potentially take for the output. I knew the technical chunk would be quite important as I have to pull specific data sets, translate it and create some visuals from this translated data, so I decided to divide it into different sketches and then bring them all together for the final one. This would allow me to see more clearly my progression and resolve issues faster.

More references involving colours and light I wanted to consider for the project.
Ikea lamp in bedroom
Nam June Paik
Elsa Bleda

The idea for the second week would be to pull some METAR data, clean it, translate it, map it to create some visual and eventually use this to create the final output.



I started the week by creating specific sketches for each step of my project.

First I made sure I was able to pull a METAR from the Meteorologisk Institutt but they didn't offer JSON type of data format, only XML. So I had to look up for a different API. I found the ICAO (The International Civil Aviation Organization) API which offers a huge range of data sets including METAR. Thankfully despite the fact you have to get an API key, it only takes a few minutes to be generated. The data could be requested via their website. They automatically generated the correct URL with my API key so I just had to copy it into my P5.js sketch. The API has to have an Icao airport code and a country code to pull successfully the data from the location.

The data from Glasgow (EGPF)

I then tried to request the data on P5.js sadly the JSON structure (the path structure) wasn't exactly the same as the one we studied during the workshops. Craig helped me to get the right path structure to access the data.

I thought a good way to translate this data rather simply first would be to create a gradient-based on the data. So get two HEX codes for example out of the METAR string. I added a fixed gradient (with two non-variable HEX codes) to the sketch pulling the METAR data

gradient prototype sketch here

After pulling successfully the METAR data I tried in another sketch to pickup some characters from the a METAR string and translate it (mapping all the letters to a hexadecimal range from A to F).

I looked up different possibilities and the function 'replace' in P5.js seemed to be the one that worked best.
I tried to replace only some letters at first and then successfully managed to replace all the letters that weren't part of the hexadecimal range with the following bit of code. I stored in a string 6digit that will become my HEX code. The original "FPG281" is converted to "FCA281".

Here's the above sketch picking the characters and mapping them on a hexadecimal range.

There was no particular reflection though on the actual mapping of the letter to be converted into hexadecimal. I followed an instinctive thought and went for a rather logical way.

After successfully picking certain letters from the string I had to clean the string from anything that couldn't be part of the hexadecimal range such as special characters ( "/", "-" and spaces). I added another translation function to get 2 hexadecimal code and then added an airport to pull some METAR data.

Having the METAR data then gave me a string of characters from which I carefully selected special characters to get 2 hexadecimal codes.

The first one is grabbing the ICAO airport code (eg EGLL for London Heathrow) and the start of the date. The second is grabbing the cloud conditions as it is usually a six-digit string. (Cloud reporting format here)

Here's the result for Tokyo Narita Airport on the 31st of January.
Here's the above working sketch


Having successfully prototyped my concept I could start to focus on the output. I started with experimenting with different of digital light sources (screen and projector).

experiment with a screen

experiment with a projector

After I experimented with all these different possibilities I had a moment of reflection. The light emitted by the screen and the projector was very interesting but I wasn't happy with the idea of just using one screen or a projector.


I rapidly understood that I won't be able to deliver a work that I was happy with, involving a physical light artifact. I don't have yet the tools and resources for the concept I wanted to develop. The screen and projector were a nice start but it was maybe too simple and the staging wouldn't be very interesting. And even if I wanted to go with the idea I think it would be rushed and I wouldn't be happy with it.

So I decided to reflect on the concept idea to figure what I wanted to do for the project.
As it was clear that I couldn't finish the first idea, but I still wanted to work on it. The most logical way was to take this idea as a proposal as I have a good amount of experiments and research for it and create web-based works for the submission based on the same research.
I will explain the 2 parts of the project down bellow.


Because I still wanted to finish this concept I decided to keep this idea as a proposal for the future and most probably for Open Share. This reflection really relieved me and re-motivated me to work harder on the concept. As I focused on a single physical out from a multiple data source input I thought it could be very interesting to have a collection of light artifacts. I sketched different potential physical lights were the Metar data gradient is apparent and acts as a source of light.

Different propositions from my sketchbook

Some references I considered for the proposal

Transparent & reflective materials
Nicolas Turki Duchesnay
Jonny Niesche
Coloured light
Ikea lamp in bedroom
Nam June Paik
Reflective coloured light by Elsa Bleda


So I would like to create a collection of different lights that are emitting different types of lights. Each one of them will be based on the METAR data from their location. I really liked the idea of creating something physical for this project and thought it would a shame to not pursue this idea. Plus it will force me to work a lot more and improve this project, which is exciting and will probably bring more ideas and concept outcomes. (Maybe for an exhibition, I will base them on different locations for showing sakes.)


As I decided to take the physical light idea as a proposal I still had to create and work on something else for the submission. For this, I wanted to still base my idea on METAR data and colours.

As I had to work on these ideas quite fast I couldn't take the time to sketch any prototype. Instead I used the prototypes I did for my original idea.

During a short discussion with Craig about some technical issues, I explained to him my first concept and as I talked to him, hearing his feedback on my idea made me think of another idea I could potentially do. Instead of focusing my colour gradient light on only one location I could maybe do a sort of timeline between two airports. A kind of colour visualization of a flight. So I decided to adapt my existing prototype sketch to this idea which was fairly simple.

The way I used the METAR data was really interesting because on the color theory it meant that the closer the distance is between the location the more identical the colours would look like. This is because the weather wouldn't be very different as it is close, and the airport code is based on countries and regions.
EG is the country combination for the UK, LF for France, LB for Belgium.
I did some experimentation with this and tried a timeline between Glasgow and London which is a domestic "flight" and Glasgow and Bordeaux which is a bit farther.

Glasgow to London (the difference is very very subtle)

Glasgow to Bordeaux

Working sketch available here.

After having this working piece I still wanted to do more for the submission. I think I wanted to create something a bit more abstract and graphic. I started to experiment so random layout and created some assets from the data I had (coloured shapes, text, etc) almost like a poster design.
This lead me to an idea when looking at some of my personal work. I'm currently designing my website + business card. I thought it could be interesting to create little ID cards for the location (airports). I think this is just more like a contemplative piece than anything else. It shows how very simply we can represent places with colors based on live weather data. What is interesting though is how the piece evolves every hour and is basically never the same.

Research prototype

Multiple prototypes adding features (1. mouse click, 2. rotation, 3. colours)

final outcome

Potential visual outcomes

Working sketch available here.


The only big problem I encountered was some issue with the API path in P5.js. It was very quickly resolved thanks to Craig. I then found out during prototyping that too many queries of the API block it. So I sometimes had to wait 10min in order for it to be cleared except that the project went surprisingly well. P5.js was more stable this time and didn't crash like last year.


I really enjoyed reflecting on this concept as it questioned very different types of notions. It involves translation, communication, identity, and feelings.

This project was right after our formative assessment. This year I really wanted to improve my way of working so I listed down everything that might help me to do that. One of the things I noted was the positive feedback on my Open Project assignment which was two very small essays about my project ideas and brief responses. In those two essays I explained that I reflected a lot on the way I wanted to create my project and the potential future direction I wanted to take.

Last year and the beginning of this one were really focused on me, my feelings, emotions etc. That's something I want to change today. I want to create meaningful pieces that aren't focused on myself.
I think I realized why I started to do this. It was probably a way of affirming my style, my identity, and my creativity. Through myself, I thought my work would have more meaning. I think today I want to create things that interest me and that have an emotional value for me. Thanks to all the previous project I started to realize that I had a special way of working and creating my aesthetic environment, therefore my creative "style". The way I produce the work is how I affirm my identity.

I reflected a lot during the whole project, it really helped me to take decisions and find solutions to some issues quite fast. Why am I focusing on such a niche topic? Is it interesting? Is light a good output for this? Is one light relevant or should we have multiples? How can I translate METAR information? Why like this? Is a gradient worth it? why?
The huge reflection I did was when I realized I couldn't finish my initial idea by the deadline. Thankfully I quickly decided to create a "substitute" work for the submission based on my research and submit my first idea as a proposal for later (probably open-share).

I think I enjoy more and more to look at briefs like this. The project isn't based on me at all, but the way I'm doing it slightly represents me mostly by my choice of aesthetics which I feel is the same for a lot of people. Projects are less and less selfish therefore more open to interpretations which are a really interesting thing to do. I remember control being very abstract, this project was a bit less as people understood quite fast what it was about even though METAR is a niche thing.


As I said, there will be future improvements. Most probably this will only involve the proposal (collection of lights). But I think it would be very interesting to add some automatic location system for the gradient sketch. The sketch would then be automatically showing its location Metar Data, therefore, it's visualization. It could also be animated in the future. I think it's a very versatile prototype as of today, that I can use in a lot of different ways.
The airport color IDs sketch though might not be that versatile.


I really enjoyed the project because of its amazing potential and the way it was taught. I was happy with the submission and the proposal I did. I'm actually very excited to continue this project and improve it!
It was really nice to learn a new piece of web technology and to have both Craig & Jen to help us with any issues.

I thought the presentation format was interesting as we used Mentimeter but maybe needed some improvements. I think the questions could be more elaborate and adapted to each piece. I don't know. The initiative is really exciting though, the engagement was really good and it's a great way of having feedback from everyone.

An overall great project that I really enjoyed working on!


Currently designing some content for my Instagram account. I'll probably wait for the improvement to be done to share it.