DARVA – L'assistant d'événement

DARVA est un robot animé mignon qui nous aidera lors d'événements, en discutant avec les gens afin que nous n'ayons pas à nous répéter trop.

Présentation

• Vidéo de présentation et de présentation
• Robot analogique
• Robot numérisé
• Assistant virtuel
• Framboise Pi 4
• DARVA

Vidéo d'introduction et de présentation

DARVA est un robot animé mignon qui nous aidera lors d'événements, en discutant avec les gens afin que nous n'ayons pas à nous répéter trop.

Anecdote :DARVA est l'acronyme de « D déclenché A nalog R obot V irtuel A assistant ».

Robot analogique

La première étape consiste à créer un robot analogique, ou tout ce que vous avez envie d'animer, à partir de feutre. J'ai esquissé un robot et fabriqué des pièces en papier. Une fois que j'étais satisfait de l'apparence générale, j'ai tout découpé dans du feutre.

Astuce :prenez des photos des morceaux de feutre intacts avant de commencer à découper, vous pouvez les utiliser comme arrière-plan pour vos animations !

Bon, passons maintenant à la partie la plus chronophage :la couture ! J'ai cousu le long de tous les bords pour donner à DARVA cet aspect et cette sensation faits à la main. Certaines pièces sont une double couche de feutre, pour le rendre un peu plus résistant. Assurez-vous de séparer toutes les parties que vous souhaitez animer, cela vous facilitera la vie plus tard !

Robot numérisé

Il est temps de numériser la chose analogique que vous venez de faire ! Étalez toutes les parties sur un fond distinctif, car cela facilitera le découpage de tout en parties. Il est préférable de prendre une photo avec tous les éléments dedans, afin que l'échelle des pièces reste la même.

Astuce :faites pivoter toutes les parties de la manière dont vous les organiseriez dans l'animation, car cela gardera l'angle d'éclairage le même sur toutes les parties et le rassemblera vraiment dans la version finale.

Chargez l'image dans le logiciel de retouche photo de votre choix et découpez toutes les parties. Enregistrez-les individuellement avec un arrière-plan transparent dans un format de fichier qui prend en charge la transparence, comme PNG.

Pour découper les pièces, j'ai utilisé l'outil de sélection rapide dans Photoshop. Les résultats étaient en fait meilleurs que ce à quoi je m'attendais, et je n'ai eu qu'à effacer manuellement des éléments dans une poignée d'images.

Vous avez maintenant un objet analogique numérisé prêt à être animé !

Assistant virtuel

Pour donner vie à DARVA, j'ai créé une page Web avec un canevas HTML et JavaScript, car cela fonctionnera sur n'importe quelle plate-forme. En téléchargeant toutes les bibliothèques, cela fonctionnera également hors ligne, ce qui est important car les événements sont notoirement mauvais pour fournir une connexion Internet fiable…

En bref :avec l'élément HTML canvas, vous pouvez ajouter des graphiques comme des images, des formes et des textes à une page Web en utilisant JavaScript. Pour faciliter ce processus et ajouter des animations fluides, j'ai utilisé les bibliothèques Create.js et Tween.js que vous pouvez trouver ici.

Le code est ajouté en pièce jointe et effectue les opérations suivantes :

• Charger les images
• Redimensionnez-les et faites-les pivoter
• Attribuer une coordonnée X et Y sur la page
• Animer toutes les choses

Certaines animations contiennent un peu d'aléatoire, pour rendre DARVA plus réaliste. Eh bien, aussi réaliste qu'un robot peut l'être, bien sûr. La jauge tourne dans une position aléatoire par exemple, et les yeux regardent au hasard à gauche ou à droite pendant une durée aléatoire.

D'autres animations sont plus calculées, comme le texte dans la bulle de dialogue qui change toutes les 5 secondes.

Enfin, certaines animations sont activées en cliquant ou en touchant des parties de l'écran, en l'occurrence la tête et le ventre de DARVA.

Raspberry Pi 4

Enfin, exécutons DARVA sur le Raspberry Pi 4 ! Pourquoi? Eh bien pourquoi pas? C'est génial que quelque chose d'aussi petit puisse gérer ce genre d'animations !

Pour afficher DARVA, nous avons utilisé un écran tactile en mode portrait. Bien que vous puissiez facilement régler la rotation de l'écran sur le Raspberry Pi, l'écran tactile fonctionnait toujours à l'envers… Après de nombreux essais et erreurs, nous avons décidé de laisser le Pi fonctionner en mode paysage et de simplement faire pivoter toutes les animations.

Faire pivoter et repositionner toutes les images et refaire les animations était un cauchemar, il est donc préférable de comprendre cette partie avant de commencer à programmer.

En dehors de cela, l'exécution de la page Web dans Chromium a eu des effets trippants au début. Quand tout a été fait, nous avons réessayé et le problème a été résolu d'une manière ou d'une autre ??? La magie de la programmation..?

Alors que les animations sont les plus fluides dans Chromium, cela fonctionne également bien dans Firefox, c'est juste un peu plus lent.

DARVA

Tadaaa ! Et voilà, DARVA, un mignon petit robot animé qui va nous aider lors d'événements !

Source :DARVA - L'assistant d'événement