DEV Community

Cover image for 🎨 From waiting time metrics to Generative art
adriens for opt-nc

Posted on

🎨 From waiting time metrics to Generative art

❔ Context

Recenlty we have published an API dedicated to waiting time in our (Post)-offices.

👉 See previous episode of the series.

To put in evidence the potential of that API we created an original P5*js based artwork datavizualization experience around that API.

In this post you'll discover what we could achieve... and if you like it to run it by yourself.

🎫 Core real world data display

In our agencies, here is how we display the data to customers :

⌨️ Install artwork

The install process is really straight forward :

First, clone the repo :

git clone https://github.com/opt-nc/generative-art-temps-attente.git
cd generative-art-temps-attente
Enter fullscreen mode Exit fullscreen mode

Then boot the solution :

docker-compose up -d
docker-compose ps
Enter fullscreen mode Exit fullscreen mode

That's it : you can now enjoy the datavisualization.

🎨 Enjoy artworks

Many kind of visualizations have been created. See below to discover them.

🌌 Orbit

First the default one.

Notice that rotation speed is based on the waiting time.

firefox http://localhost
Enter fullscreen mode Exit fullscreen mode

🌌 Orbit light version

Then a lightest version of the previous one :

firefox http://localhost/orbit.min.html
Enter fullscreen mode Exit fullscreen mode

⛹️ Jumpers

In this visualization each ball is a Post-Office, and the higher a ball is bouncing, the higher waiting queue are important.

firefox http://localhost/jumpers.html
Enter fullscreen mode Exit fullscreen mode

🕳️ Gravity

Then this one where interactions are driven by gravity and speed.
Notice that each ball's mass is relying on the waiting time :

firefox http://localhost/gravity.html
Enter fullscreen mode Exit fullscreen mode

🍿 Live demo

Below a live demo from scratch :

🙏 Acknowledgements

All that work would have not been possible without talents and highly engaged team members :

🔖 Resources

🤓 Source code

GitHub logo opt-nc / generative-art-temps-attente

Des projets d'art génératif web autour des temps d'attente des agences

semantic-release Test, Release Docker Image Docker Pulls Docker Image Size (latest by date) Docker Stars Docker Image Version (latest by date)

Art Génératif (p5.js)

💬 Temps d'attente dans les différentes agences de l'OPT NC

Projet autour de la visualisation des données recueillies par les différentes agences de l'OPT NC.

👉 Tous les détails sur ce post dédié.

La visualisation est réalisée grâce à la librairie Javascript p5.js.

Ce projet utilise l'API REST des temps d'attente en agence OPT.nc.

🚀 Lancer les visualisations

⚙️ Ou localement

git clone https://github.com/opt-nc/generative-art-temps-attente.git
cd generative-art-temps-attente
docker-compose up -d
docker-compose ps
Enter fullscreen mode Exit fullscreen mode

🎆 Pour accéder aux visualisations

🔖 Ressources

🛍️ API on RapidAPI.com

Image description

Top comments (8)

Collapse
 
adriens profile image
adriens

Collapse
 
adriens profile image
adriens

Collapse
 
adriens profile image
adriens

Live show at the office and sharing dataviz with collaborators :

Collapse
 
adriens profile image
adriens • Edited

Collapse
 
adriens profile image
adriens • Edited

Collapse
 
adriens profile image
adriens

Collapse
 
adriens profile image
adriens

Now just wait for the next 3 episodes 😎

Collapse
 
adriens profile image
adriens