🎨 From waiting time metrics to Generative art

adriens - Jun 30 '22 - - Dev Community

❔ 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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .