Close search
Hoa

Awecode, l'aventure derrière le projet

Written the .

Ce billet raconte awecode vu des coulisses. Mais avant de commencer, nous aimerions personnellement vous remercier pour l'accueil plus qu'incroyable fait à awecode. Cela nous touche particulièrement et nous encourage dans la voie que nous avons choisie pour Hoa et son apprentissage. Merci !

Plus qu'un projet, une aventure. Elle a commencé il y a un an déjà. Le projet Popcorn.js de Mozilla, permettant d'exécuter des actions en fonction de marqueurs placés sur une vidéo, devenait mature et a été rendu public. Nous avons tout de suite eu cette idée. Le premier proof-of-concept a été esquissé en une après-midi et le résultat était prometteur. Mais que fallait-il pour un résultat final ? Il fallait une suite d'outils capable d'automatiser la création des awecodes de manière impeccable. Nous allons détailler cette « chaîne de production » et tout le travail qu'il y a eu autour.

Des particules et de la physique

Un awecode commence par une vidéo d'introduction ; la voici :

11 secondes de vidéo et une bonne centaine d'heures de travail.

Nous voyons un ensemble de particules qui s'agitent de manière libre dans l'espace, puis viennent se concentrer au centre pour former le logo Hoa. Nous pouvons faire l'analogie avec les bibliothèques, les multiples projets et la communauté de Hoa : chaque particule est libre, elle interagit avec les autres, et toutes ces particules constituent Hoa ; aucune n'est en trop, elles ont toutes leur place.

Réaliser cette introduction a été un véritable challenge technique, relevé par un ami de longue date et designer historique de Hoa : Baptiste Fedi. Dans le civil, il est doctorant en Chimie, dans un laboratoire deux étages plus bas que le laboratoire de Ivan Enderlin, mais dans le monde numérique, c'est un passionné et talentueux designer et animateur. Son arme : Blender, un logiciel de création 3D. Ses multiples compétences en Chimie et en Physique ont été nécessaires : plus de 250 000 particules s'agitent suivant plusieurs forces mécaniques précises !

Le résultat est en réalité l'animation jouée à l'envers, ce qui a introduit une difficulté supplémentaire pour le timing et tous les calculs autour des particules.

Après des mois et un nombre incalculable de nuits passées sur le réglage du moteur physique, des forces et du mouvement des particules, de la caméra, du compositing, et des heures de calcul de rendu, il était temps de passer à la musique.

Quelques notes, une mélodie

Un autre challenge a été la musique. Hoa est un projet qui ne connaît pas de frontière, pas de langue, pas de culture. C'est un projet libre et open-source, par et pour tous. La teinte de la musique devait refléter cet état d'esprit. Ce défi a été relevé par Amine Mraihi, un ami musicien de talent. Avec son frère, Hamza, tous deux médecins dans le civil, ils parcourent inlassablement le monde et le font vibrer au son de leurs instruments.

C'est en studio, encore après une longue soirée, que le son a été trouvé. Une note, une simple note, jouée sur un saz.

Une mélodie se dessine. Plusieurs pistes sont enregistrées, des dizaines et des dizaines de prises. La technique doit être impeccable. Il ne reste que la voix. Encore des dizaines de prises, des arrangements, des essais avec la vidéo, nous tenons le bon bout.

Au final, trois pistes pour l'instrument et trois pistes pour la voix. Nous tenons notre vidéo d'introduction ! Mais il reste encore énormément de travail …

Screencast

Après l'introduction, nous avons le screencast. Un mélange entre VLC et ffmpeg afin d'automatiser l'enregistrement de l'écran sur toutes les plateformes. Plusieurs scripts pour préparer les navigateurs, les terminaux, placer les fenêtres, mettre en place des thèmes (polices, couleurs, tailles…), des environnements, des raccourcis, des scripts tiers etc. Des détails à en perdre la tête mais nécessaires pour ne pas troubler le spectateur et lui proposer une immersion complète.

Assemblage et publication

L'assemblage vidéo et son se fait à l'aide de Blender et de ffmpeg, toujours à l'aide de scripts. Des thèmes Blender permettent de créer des transitions, comme des titres, des crédits etc., que nous modifions à l'aide d'informations contenues dans des fichiers XML ou JSON (pas encore présent sur le premier awecode à cause d'un problème de dernière minute, mais les scripts fonctionnent). Le résultat est publié sur Vimeo, sur la chaîne awecode, via Dropbox. Les vidéos sont bien sûr accessibles en haute-définition, tout comme le son.

Les vidéos sont ensuite intégrées sur le site de Hoa avec la deuxième partie d'un awecode : le code.

Quand le code prenait vie

Avant d'enregistrer un awecode, le code est versionné dans un dépôt, où chaque commit représente une étape clé. Lors de l'enregistrement du screencast, nous travaillons sur ce dépôt pour faire évoluer le code de manière transparente et automatique. Après l'enregistrement, nous rejouons la vidéo et un script nous aide à lire les logs du dépôt pour nous préparer la description de la partie code d'un awecode.

Cette description est au format JSON, pour être manipulée plus facilement par notre bibliothèque Javascript Hoa.Awecode.js. Elle contient la liste des fichiers, tous les patches à appliquer à certaines keyframes. D'autres informations sont ajoutées dynamiquement.

Sur le site de Hoa, quand la vidéo est lue, les patches s'appliquent sur le code. Le tout prend la forme d'un plugin pour Popcorn.js.

Final

Au final, ce sont des heures de travail, des dizaines de scripts et une communauté qui ont permi de donner vie à ce projet. Excepté pour la musique de la vidéo d'introduction, le projet a été réalisé uniquement avec des logiciels libres, et la création d'un awecode aujourd'hui ne demande que des logiciels libres. Tout ce travail a été abattu par des bénévoles, sur leur temps libre, très souvent durant de bien longues nuits. Un immense merci en particulier à Baptiste et Amine, mais aussi à toute la communauté pour ses retours, ses encouragements et son soutien.

Nous continuons à rendre les scripts plus matures et des contributions sont d'ores et déjà en cours ! Nous savons que awecode et ses outils intéressent le monde de l'enseignement par exemple, n'hésitez pas à nous contacter et à contribuer !

Nous espérons que ce projet vous permettra de plus facilement découvrir les richesses de Hoa et que vous saurez apprécier tout ce travail. Déjà plusieurs autres awecodes sont en préparation, mais n'hésitez pas à nous soumettre vos idées, vos remarques ou vos critiques.

Comments

menu