Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create new standard face for Jarvis #1

Open
alexylem opened this issue Mar 16, 2017 · 50 comments
Open

Create new standard face for Jarvis #1

alexylem opened this issue Mar 16, 2017 · 50 comments
Assignees

Comments

@alexylem
Copy link
Owner

Today Jarvis ships with default images from Cortana:
preview
This was for testing / demo purposes and I want to change this as those great animations are not ours.
I'm looking for skilled people to advised how we could easily create new animations that will be the default face of Jarvis.
I would like to start simple and for example come up with 2 animated eyes like what Cozmo has:
image
The only way that I know to achieve this is to create a webpage with parameters to generate css3 animations for two rounded boxes and record the animations to GIFs.
This can be quite flexible to create any kind of animation / colors but as it may take quite some time to create, I'd like to check with you what do you think and if you have other ideas / options.

Alternatively, I was thinking on launching a contest via the website and the best face would win a Raspberry Pi or something equivalent (As Jarvis is free and open source, I can't offer more than this 😞 )

Thanks!

@alexylem
Copy link
Owner Author

Thanks @physicien for referencing the Cherry-Project repo:
https://github.com/Cherry-project/primitiveWS
I'll try to install and test it out if it cannot at least generate the animations we need.

@alexylem
Copy link
Owner Author

@tchoul, @tigre-bleu, @Jean-Bernard-Hallez, @Lusitanos67, @wikijm, @Takanato, @MulhollandDr
Worst case I have found this very nice online tool to create 4 frames led-matrix like animations:
http://walsh9.github.io/super-micro-paint/
You can export them as Gif, and it's open source!

Example of animation I quickly created for neutral state:
image
With other themes:
image
image
Even custom colors:
custom

If you guys are interested, we can all agree on:

  • a face baseline to build upon
  • a theme for consistency
    It's easy to share animations (just a link).

Here is the edit link for the face:
http://walsh9.github.io/super-micro-paint/#AD_-AAB39wAAY-MAAMABgADePYAAwAGAAd69wAFMmUABQIFAAMCBgABBgQAAQAIAACPEAAAQCAAACBA~AfgAA.AD_-AAB39wAAY-MAAMABgADePYAAwAGAAd69wAFMmUABQIFAAMCBgABBgQAAQAIAACPEAAAQCAAACBA~AfgAA.AD_-AAB39wAAY-MAAMABgADePYAAwAGAAd69wAFMmUABQIFAAMCBgABBgQAAQAIAACPEAAAQCAAACBA~AfgAA.AD_-AAB39wAAY-MAAMABgADePYAAwAGAAcCBwAFevUABQIFAAMCBgABBgQAAQAIAACPEAAAQCAAACBA~AfgAA
(for some reason the last line gets corrupted)

@alexylem
Copy link
Owner Author

Ahhh... et pour ceux qui ont construit leur raspberry pi case en lego...
lego

@alexylem alexylem self-assigned this Mar 16, 2017
@alexylem
Copy link
Owner Author

Speaking
my 20masterpiece 2

@MulhollandDr
Copy link
Contributor

Très sympa tout ça (et le lego 👍 ).

Pour ma part j'ai un peu changé mon fusil d'épaule :

  • J'ai généré mon perso 3D ici
  • J'ai récupéré des animations classiques ici en utilisant la version d'essai gratuite
  • Ensuite j'utilise Blender pour créer ma scène (camera/éclairages/décor éventuel/mouvements de caméra éventuels)
  • Et enfin je transforme le tout en GIF

Ca donne ça par exemple :

warrior resized

Prochaine étape :

  • Ajouter mes propres animations pour coller un peu plus aux besoins spécifiques

@Jean-Bernard-Hallez
Copy link

J'adore ce que vous faites tous !!!!!

@alexylem
Copy link
Owner Author

@MulhollandDr wouaaaaah! qd tu auras les animations minimum, tu pourras partager ton personnage avec un pull request sur le repo? (ou m'envoyer ton dossier si tu sais pas faire).
Je continue d'avancer sur mon visage basique.

@alexylem
Copy link
Owner Author

Je viens de committer un nouveau visage par défaut en attendant vos contributions. J'enlèverai cortana sous peu.

@Jean-Bernard-Hallez
Copy link

Merci @alexylem Cette denière mise à jour "fluorescent" et avec mon 3"5 fonctionne très bien... enfin !!!! YES !!!! et c'est beaucoup plus fluide... je supprime cortana...

@Jean-Bernard-Hallez
Copy link

Jean-Bernard-Hallez commented Mar 18, 2017

Il y a t-il une solution pour cacher la barre d'outils de l'interface graphique afin que le visage recouvre
100% de l'écran ?

@alexylem
Copy link
Owner Author

c'est beaucoup plus fluide

Oui car l'animation n'a que 4 images bien espacées.

Il y a t-il une solution pour cacher la barre d'outils de l'interface graphique afin que le visage recouvre 100% de l'écran ?

@Jean-Bernard-Hallez Une photos m'aiderait à comprendre ce que ca te donne en ce moment. Merci.

@MulhollandDr
Copy link
Contributor

@alexylem Bonjour, j'ai aucune idée de comment ouvrir un pull request proprement du coup je veux bien t'envoyer ce que j'ai pour le moment mais comment je te fais parvenir ça ?

@wikijm
Copy link
Contributor

wikijm commented Mar 18, 2017

@MulhollandDr Voici un lien qui pourrait t'aider pour utiliser GitHub : https://help.github.com/categories/collaborating-with-issues-and-pull-requests

@alexylem
Copy link
Owner Author

alexylem commented Mar 18, 2017

@MulhollandDr
Il me semble que depuis ton installation de Jarvis tu ne pourras pas.
Il te faut "Forker" le repo sur ton compte Github, rajouter les fichiers et faire un Pull Request.
En gros:

  • Depuis la page du Repo du plugin Jarvis-Face, clique sur le bouton Fork
    image
  • Clone ta version du repo sur ton ordi en utilisant le client GitHub
    image
  • Ajoute / modifie les fichiers sur ton ordi
  • Depuis le client, clique sur Pull Request en haut à droite
    image
  • Commente et envoie

@MulhollandDr
Copy link
Contributor

Bon j'ai tenté un truc ... si c'est pas ça fusillez moi :-)

@wikijm
Copy link
Contributor

wikijm commented Mar 18, 2017

Hélas @MulhollandDr, je ne pense pas que cela ai marché.
Si ça avait été le cas, on aurait ta pull request de visible ici.

@MulhollandDr
Copy link
Contributor

Bon après quelques essais, pour coller à l'idée d'une face à la Cozmo je peux proposer une série dans ce style :

wow

Pour le coup c'est du 100% fait maison donc tout est modifiable.

@alexylem
Copy link
Owner Author

@MulhollandDr C'est pas mal du tout :) ca serait possible de:

  • Avoir un fond vraiment noir, voir transparent (grace au GIF)
  • J'ai l'impression qu'on voit la forme 3D des cubes, on peut aplatir?
  • Les formes doivent rester cubiques? on peut faire des arrondis?

@MulhollandDr
Copy link
Contributor

Alors :

  • en fait le fond est noir et c'est l'effet néon qui le rend bleu. Je peux retirer l'effet pour un fond parfaitement noir pour la transparence il faut que j'étudie la question.
  • C'est effectivement des cubes, y a moyen de faire des carrés (si c'est totalement plat ça perdra en réverbération sur le fond automatiquement)
  • Y a moyen de faire des sphères, des disques, des ovales des ce qu'on veut ...

@MulhollandDr
Copy link
Contributor

MulhollandDr commented Mar 21, 2017

Donc avec plus d'arrondis, moins de réverbération et moins de 3D ça donne ça pour le moment :

angry

Je trouve que cette version est bien meilleure que la première donc hésites surtout pas à proposer d'autres trucs.

@physicien
Copy link

Je suis curieux, avec quoi fais-tu ces animations?

@MulhollandDr
Copy link
Contributor

J'utilise Blender pour créer la scène et animer. J'utilise GIMP pour faire le gif.

@alexylem
Copy link
Owner Author

@MulhollandDr génial comme ca! Juste je trouve dommage qu'il y ait un halo, pas seulement d'un point de vue esthétique mais aussi pour le poids final du GIF. C'est possible de l'enlever complètement?

@wikijm
Copy link
Contributor

wikijm commented Mar 22, 2017

Est ce que l'on pourrait définir la liste des expressions faciales, émotions et animations à créer ?
Ainsi, chacun pourra faire sa propre version tout en étant sûr de pouvoir l'intégrer dans le plugin.

@wikijm
Copy link
Contributor

wikijm commented Mar 22, 2017

Une piste à explorer pour créer des animations : Création d'animations avec des logiciels libres

@MulhollandDr
Copy link
Contributor

@wikijm C'est effectivement Blender que j'utilise pour l'animation (il est dans la liste). C'est un outil que je connais et que j'utilise de temps en temps. Le gros avantage c'est qu'il permet de créer une animation sans passer par du frame par frame et permet donc un gain de temps considérable. Pour exemple sur le gif ci dessous il y a une soixantaine de frames. J'aurais pu les faire une par une avec un logiciel de dessin mais c'est long, peu précis et il faut être bon dessinateur. Avec Blender je n'ai qu'à régler 8 positions pour obtenir la même animation. Blender se charge ensuite du découpage frame par frame.

@alexylem Voici le résultat sans halo (c'était juste un problème de background à éloigner en fait). Pour ce qui est du poids, j'ai pas touché aux dimensions du gif pour le moment. Je ne sais pas quelle taille serait optimale, mais si c'est plus petit ça fera toujours ça de moins.

angry

@physicien
Copy link

@wikijm Pour ce qui est des émotions, il faudrait peut-être penser à comment choisir celle à exprimer. Actuellement, Jarvis utilise des hooks afin de choisir, mais si on veut rendre la chose plus intéressante, l'implantation d'un agent émotionnel serait approprié. Après, je pense que cet ajout devrait se faire non dans le plug-in, mais dans le core de Jarvis, car il peut être utile pour les évolutions futures d'avoir un accès au choix des émotions pour tout Jarvis, que ce soit pour l'interaction avec différents utilisateurs ou pour ajouter un peu de "personnalité" à Jarvis.

@alexylem
Copy link
Owner Author

alexylem commented Mar 22, 2017

@MulhollandDr il y a toujours un halo, un genre de cercle qu'on voit au début et à la fin. Pas moyen de l'enlever complètement? Sinon c'est une super piste!

@wikijm @physicien la liste des animations/émotions est potentiellement infinie. Le plugin utilises les animations pour les hooks standards mais n'importe qui peut en créer / appeler de nouvelles depuis les commandes / autres plugins grâce à la fonction:

pg_face_state "<animation folder name>" &

Voici la liste des animations de base (pas toutes utilisées), mais je pourrai en rajouter:
image

L'implémentation d'un agent émotionnel serait intéressant, mais uniquement utile si derrière le visage est généré dynamiquement par rapport à ces paramètres. L'approche actuelle est plus simple et se base sur des simples GIF, ce qui permet d'afficher des animations qui n'ont pas de rapport avec l'émotion, comme des actions par exemple:

  • Entrée
  • Sortie
  • Ecouter
  • Réfléchir
  • Attendre
  • Danser la salsa
  • Toute autre animation complètement inutile 😄

@MulhollandDr
Copy link
Contributor

@alexylem Effectivement en regardant de plus près je le vois aussi. Je corrigerai demain.

En fait, pour expliquer un peu, ce sont les yeux qui émettent de la lumière, le halo vient de la réflexion sur le fond. Si les yeux n'émettaient pas de lumière, l'image serait entièrement noire on ne verrait rien. (Blender fonctionne comme une pièce sans fenêtre ni porte, si tu ne places pas de sources de lumière tu ne peux rien voir). Si j'ajoute une source de lumière externe, le fond noir devient plus clair là où il est illuminé et je ne pense pas que ça soit l'effet recherché ici.

@MulhollandDr
Copy link
Contributor

Normalement là ça devrait le faire.

Je me suis rendu compte de deux choses :

  • J'ai pas vu le halo hier matin parce qu'en plein jour j'ai trop de lumière dans mon bureau pour le distinguer...
  • Si là c'est bon, en fait il suffisait juste de décocher une case.

angry

Si tout est bon j'essaierai de proposer une série d'animations en reprenant l'architecture actuelle du dossier.

@alexylem
Copy link
Owner Author

C'est parfait!
Peut-être que tu pourrais proposer une couleur un peu différente de celle utilisée par Cozmo?
Je te conseille aussi de faire des GIF plus petits, pas les yeux, mais surtout moins de contours car on peut le centrer sur l'écran avec la config du plugin.
Merci pour ton boulot j'ai hâte de voir le résultat!! 👍

@physicien
Copy link

@alexylem Je vais regarder ce que je peux faire et au pire, je ferai un fork avec agent émotionnel (juste à avoir des états de transitions serait probablement assez à mon avis). Bref, je reviens avec ça si ça fonctionne (et quand j'aurai le temps).

@MulhollandDr Possible d'avoir le fichier d'animation de Blender? On pourrais ainsi aider à générer des animations et, dans mon cas, apprendre comment bien utiliser Blender sur le tas.

@MulhollandDr
Copy link
Contributor

@alexylem Pour la taille si tu veux une tête carrée ça peut donner ça :

0056

Sinon on reste sur du rectangle en réduisant un peu les marges sur les côtés.

Pour la couleur, absolument toutes les couleurs et nuances sont possibles alors je peux proposer quelques essais persos mais si vous avez des suggestions je prends.

@physicien Bien sûr. Je laisserai un fichier Blender propre une fois qu'on sera bien fixé sur les dimensions/positions/couleurs, comme ça tout le monde pourra animer à partir d'une base commune. Ca te conviendrait comme ça ? (Et si tu veux commencer à te familiariser avec blender voilà le fichier actuel)

jarvisc.blend1.zip

@physicien
Copy link

@MulhollandDr Merci, ça me convient parfaitement. Je vais voir comment faire des animations et essayer des choses.

@MulhollandDr
Copy link
Contributor

Quelques essais couleurs :

blue0001 resized
green0001 resized
pink0001 resized
purple0001 resized
red0001 resized
white0001 resized

(Les images ne sont pas centrées mais ça sera corrigé par la suite.)

@alexylem
Copy link
Owner Author

J'aime bien le blanc, simple et efficace.
Sinon pourquoi pas la couleur rouge du logo Raspberry:
image

@MulhollandDr
Copy link
Contributor

MulhollandDr commented Mar 24, 2017 via email

@MulhollandDr
Copy link
Contributor

Donc voici la shortlist : blanc ou raspberry ?

white0001
rasp0001

@wikijm
Copy link
Contributor

wikijm commented Apr 3, 2017

Ou alors encore plus fou (Animer un personnage 2D avec facial tracking) :
https://helpx.adobe.com/fr/adobe-character-animator/how-to/adobe-character-animator.html

Inconvénient : Utilisation d'un logiciel propriétaire (Adobe) qui deviendra certainement payant par la suite (actuellement en Beta).

@MulhollandDr
Copy link
Contributor

@wikijm J'en pense que c'est la même méthode que pour animer deux yeux mais c'est appliqué à des LEGOs (donc pas vraiment ce qu'on cherche ici). Evidemment on pourrait utiliser la même méthode pour animer notre propre visage mais ça pose toujours le même problème : celui du dessin. Si quelqu'un ici sait dessiner et peut proposer des dessins originaux l'animation n'est pas un problème.

Pour ce qui est de l'animation d'un petit perso en 2D c'est la même méthode que celle utilisée pour le perso 3D que j'avais montré :

fallingtoroll

En gros tu poses un squelette plus ou moins complexe sur ton perso et tu animes. C'est pas très compliqué a mettre en place surtout sur un perso 2D mais on en revient toujours au même problème de départ à savoir : je ne sais pas dessiner. Donc si quelqu'un sait dessiner y'aura pas de problème pour l'animer.

Pour la méthode Adobe Character Animator c'est une alternative si quelqu'un possède les outils Adobe qui vont avec. Et encore une fois, le talent pour dessiner le visage.

(pour ce qui est de l'animation des "yeux", je n'ai pas laissé tomber, j'ai simplement un peu plus de boulot en ce moment et donc moins de temps à consacrer à tout ça. Mais les premières animations ne devrait pas trop tarder à arriver.)

@wikijm
Copy link
Contributor

wikijm commented Apr 3, 2017

Merci pour ce retour.
Je vais essayer de travailler les yeux+bouches LEGO directement en GIF.

@alexylem
Copy link
Owner Author

alexylem commented Apr 3, 2017

@MulhollandDr pour en revenir à tes propositions, je n'arrive pas à me décider. J'aime bien les blancs ca fait simple, mais aussi peu de personnalité... toi tu en penses quoi?

@wikijm
Copy link
Contributor

wikijm commented Apr 3, 2017

Quelques exemples en LEGO-style fait avec http://gifcreator.me/ :

Start_noloop
start_noloop
Exit_noloop
exit_noloop
Neutral
neutral
Speaking
speaking
Thinking
thinking

Pull request liée : #9

@MulhollandDr
Copy link
Contributor

@alexylem Assez d'accord avec toi sur le manque de personnalité du blanc ... mais aussi d'accord pour dire que les autres couleurs ne me parlent pas d'avantage. Je vais avancer sur les animations avec le blanc (on pourra modifier après). Pour l'aspect, je vais voir si on peut pas obtenir un peu plus de cachet en jouant sur des textures ou quelque chose comme ça.

@MulhollandDr
Copy link
Contributor

start
speaking
listening
neutral
exit

@alexylem
Copy link
Owner Author

@wikijm mes enfants ont adoré ton visage lego, je te dis pas l'hystérie!! Par contre ca a crashé car il n'y a pas d'image pour le dossier neutral/ qui est d'ailleurs inexistant pour le moment. Tu pourrais le rajouter dans un PR?
J'ai aussi viré un fichier système Thumb qui faisait planter Jarvis car pas une image gif.
Merci!

@wikijm
Copy link
Contributor

wikijm commented Apr 30, 2017

@alexylem Je ferais attention à ne pas remettre le "Thumbs.db" au prochain PR 😓
Une préférence particulière pour la création du neutral ?

EDIT : C'est fait (voir #10) 😄
Si intéressé, je peux fournir les sources (.PSD entre autre).

@alexylem
Copy link
Owner Author

merged, merci 👍

@satana888
Copy link

Plugin parfait! J'ai juste une question a poser? Quand le Cron se met en route le visage reste en mode " speaking"... même après que le message dit dans le Cron soit fini...... il passe en speaking en continu... Que peut on faire ou rajouter dans Cron pour qu'il revienne sur le mode "neutral"? Ou si jamais, j'ai l'intention de passer tout mes Cron sur lecture de fichier .sh.... y'aurai t'il une commande a insèrer dans le fichier .sh pour qu'il retombe chaque fois sur le mode "neutral"? merci d'avance Cordialement

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants