Code et couleurs

Aujourd’hui, exceptionnellement, je ne vous raconterai pas la suite de mes aventures en Nouvelle-Zélande. Non que j’aie été inactif ces dernières semaines : j’ai notamment commencé à travailler en tant que tuteur dans un centre donnant des cours de programmation aux enfants (et oui, il faut bien mettre un petit peu d’argent de côté pour les vacances d’été, et avec un peu de chance pouvoir s’acheter une ou deux courgettes à 16,99$ le kg). Mais surtout, cela fait près d’un mois que je travaille sur un projet personnel dont je tenais à vous parler aujourd’hui : Film Palette.

L’idée m’est venue à l’occasion d’un exercice dans mon cours de cinéma. Nous travaillions sur le gothique néo-zélandais et l’esthétique qui lui est associée, et nous devions analyser la palette de couleurs de Vigil (1984). Comme ce film, de nombreuses œuvres cinématographiques utilisent en effet les couleurs pour mettre en place une atmosphère ou transmettre des émotions. Je me suis alors lancé dans la réalisation d’un site web permettant de visualiser graphiquement les palettes de couleurs utilisées dans différents films, et comment celles-ci participent à l’esthétique mise en place par le réalisateur.

Dans Vigil, l’esthétique gothique se manifeste par une photographie très froide et désaturée

J’ai fait le choix de représenter chaque film de ma sélection par une grille de 20 pixels sur 20 pixels. La première étape est donc d’extraire pour chaque œuvre 400 plans pris à intervalles réguliers (entre 15 et 25 secondes selon la durée du film). Pour cela, je commence par supprimer les éléments inutiles (les éventuels crédits au début du film et le générique de fin), puis j’exécute un script en ligne de commande pour sauvegarder les 400 images en question.

L’étape suivante consiste à déterminer la couleur moyenne de chacun de ces plans. Pour cela, j’ai écrit un petit programme en JavaScript, dont le fonctionnement est très simple : il s’agit pour chaque image de parcourir l’ensemble de ses pixels (jusqu’à plus de deux millions si le fichier vidéo d’origine est en haute définition) et d’en calculer la moyenne, ou plus précisément la moyenne de la quantité de bleu, de vert et de rouge. Une tâche fastidieuse pour n’importe quel humain, mais qu’un ordinateur est capable d’effectuer en moins d’une minute. A la fin du processus, j’obtiens un tableau contenant la couleur moyenne de chacun des 400 plans sélectionnés, sous forme hexadécimale (où #000000 représente le noir absolu, et #FFFFFF le blanc immaculé). Je peux alors générer ce genre d’images :

Quel est le film correspondant à cette image ? La réponse est sur le site 😉

Néanmoins je ne me suis pas arrêté là. En effet, je souhaitais donner la possibilité aux utilisateurs (et donc à vous, chers lecteurs) de naviguer à travers les films et de voir à quel plan correspond chacune des couleurs de la grille ; j’ai alors commencé à coder une application en ligne. Il s’agit de mon troisième projet d’envergure en programmation web, après deux travaux effectués à Sciences Po : ScienceSpot (une application permettant de connaître son quartier idéal à Paris, réalisée avec mon ami Gilles dans le cadre d’un cours d’économie) et une étude de controverse sur le théorème des quatre couleurs, fruit de plusieurs mois de recherche avec mes camarades Scubes Chloé, Laure-Lou, Amjad et Gilles (encore lui !)

Dans la mesure où le site est amené à évoluer au fur et à mesure que j’y ajouterai des films, j’ai fait le choix de générer dynamiquement le contenu des pages. Pour les novices en programmation web, sachez juste que celle-ci utilise trois langages principaux : le HTML, qui gère le contenu brut du site ; le CSS, qui définit le style (couleurs, polices, tailles…) ; et le JavaScript, qui peut interagir avec les deux autres. Ainsi, le code HTML de ma page d’accueil est ici généré directement par le JavaScript à partir d’un fichier JSON (un format de stockage de données) comportant la liste des films. De la même manière, la page plus détaillée sur chaque film (permettant de naviguer dans la grille) est générée à partir du tableau de couleurs précédemment obtenu. Une image valant mieux que mille mots, voici un schéma [simplifié] de l’architecture du site :

Le code source est disponible ici pour les plus curieux d’entre vous

Malgré les difficultés que j’ai pu rencontrer au cours de la réalisation de ce projet, le résultat final est à la hauteur de mes attentes. Ce travail en deux temps – l’analyse des films, puis la réalisation du site internet – m’a énormément plu, dans la mesure où les tâches sont variées et (presque) jamais répétitives. Bien sûr, ce n’est pas fini : Film Palette est destiné à s’enrichir dans les prochains mois avec de nouveaux films.

J’espère que cet article un peu inhabituel vous aura intéressés, et j’attends vos suggestions de films avec impatience !

---

Pour en savoir plus sur moi et mon aventure néo-zélandaise, consultez la page A propos. Vous pouvez également me retrouver sur Twitter et Instagram, ainsi que sur GitHub où je partage mes projets personnels en informatique.