Nous voici de nouveau avec Winston. Nous pouvons contrôler sa position grâce aux variables X et Y.
Donc on peut maintenant le déplacer de haut en bas et le faire danser...
Super ! Regardons un peu le code avant de continuer.
On a ces 2 variables X et Y qui contiennent la position du centre du visage de Winston.
On les utilise, ici, quand on dessine l'ellipse pour son visage.
Et aussi pour positionner ses yeux "relativement" au centre du visage.
Donc on ajoute ou soustrait des nombres à X et Y pour que les yeux soit à 50 pixels ou à 100 pixels du centre.
Par exemple, la bouche est 50 pixels à droite du centre du visage...
et 40 pixels plus bas que le centre du visage.
Bon. Continuons et regardons ce qu'on peut créer comme autres variables.
Pour ça, on va regarder chaque ligne et repérer ce qu'on appèle les nombres "hard codés".
Les nombres "hard codés" sont les nombres fixes utilisés. Ce n'est pas les variables.
Regardons un peu. Pour notre première ellipse, ici, on a 300 et 300 pour la largeur et la hauteur.
Donc on peut créer une variable pour ça, on l'appèle "faceSize" ("tailleDuVisage" en anglais).
"faceSize" contient 300. On utilise la variable ici... Et, pour l'instant, la valeur est de 300.
Cool. ça fonctionne bien !
Tout ce qui est là, utilise X, Y ou "eyeSize", mais pour la bouche, on a encore 150 et 150 pour sa taille.
Donc on peut créer une variable pour ça. On l'appèle "mouthSize" (tailleDeLaBouche) = 150.
Et on l'utilise ici... La valeur est pour l'instant de 150.
Donc maintenant, on peut facilement modifier la taille du visage... ici !
Et aussi modifier la taille de la bouche... ici.
On peut toujours modifier la taille des yeux...
OK. C'est pas mal ! Mais il y a un truc qui ne me plait pas.
En fait, j'aimerais que, quand on change la taille du visage, tout le reste change en fonction.
Car, si je réduit la taille du visage comme ça... je veux que les yeux et la bouche se rétrécissent aussi !
Si je divise par 2 la taille du visage, il faut que les yeux et la bouche soit aussi...
d'une taille divisée par 2. Sinon, il sera moche !
Car ses yeux et sa bouche seront bien trop grands
Et ils ne sont pas positionnés correctement non plus !
Donc, je veux que ces 2 variables mouthSize et eyeSize...
soient dépendent de la valeur de "faceSize".
On va les remettre avec leurs valeurs du départ.
Bon. Pour faire ça, on veut que ces valeurs soient basées sur la taille du visage.
On peut dire que la taille de la bouche est égal à la taille du visage divisée par 2.
Donc on indique que la bouche est calculée comme étant la moitié du celle du visage.
Si vous avez besoin d'un rappel sur les divisions ou les fractions...
regardez les vidéos de la Khan Academy.
OK. La taille des yeux est environ... la taille du visage divisé par 4.
C'est pas exactement ça, mais bon... C'est pas trop mal. Houps, non, plutôt par 7...
... oui, c'est bien mieux.
Si vous n'avez pas la bonne fraction du premier coup, vous pouvez le changer plus tard.
Et faites des essais, jusqu'à ce que cela ressemble à ce que vous voulez.
OK. Bon, maintenant, si on change la taille du visage, regardez la taille des yeux et de la bouche !
C'est pas mal !
Mais il y a encore quelque chose qui ne va pas.
Les yeux et la bouche se retrouvent en dehors du visage quand il est très petit.
Leurs tailles sont OK. Le problème c'est leur position.
Ce qui se passe...ici, quand on positionne les ellipses...
on utilise X-50 et Y-50 puis, X+100 et Y-60
Donc, même si la taille du visage est de 50 pixels, on place toujours l'oeil à 50 pixels du centre du visage.
Ce qui le place en dehors du visage.
Donc on doit remplacer, ici, les valeurs 50, 100 et 60...
par des fractions de la taille du visage. Ainsi, quand la taille du visage change...
Les positions des yeux et de la bouche vont changer aussi.
OK. Je vais vous montrer ça.
X moins 50. C'est X moins 50 pixels.
Cela veut dire que c'est à 50 pixels à gauche du centre du visage.
Bon. On va utiliser une fraction pour régler notre problème.
Essayons avec la taille du visage divisé par 6.
Donc, 1/6ième de la taille du visage.
OK. on a aussi, 50 va être la taille du visage divisé par 6.
Donc, maintenant, si on modifie la taille du visage, l'oeil est positionné parfaitement !
... Yahouuu !...
Il faut traiter l'autre oeil aussi !
Aller. 100 va devenir la taille du visage divisé par 3. Donc 1/3 de la taille du visage.
Et 60 va devenir 1/5 de la taille du visage, donc, la taille du visage divisé par 5.
Génial ! Essayons... superbe !
Il nous reste le problème de la bouche.
Donc on va sur la ligne de code... ici.
Ici, on va mettre la taille du visage divisé par 6.
et, ici... la taille du visage divisé par 7.
Donc, maintenant, tout est proportionnel. Voyons ce que cela donne.
Wouhouuu ! On peut rétrécir Winston au maximum
mais ses yeux et sa bouche restent dans le visage !
Je suis sûr qu'il préfère ça !
OK. Bon.
Faisons un petit résumé.
Tout en haut, on a nos variables.
Et on commence par y mettre seulement les nombres (comme 200).
Puis, on calcul les tailles de la bouche et des yeux en fonction de ce nombre...
... c'est une fraction de ce nombre. ainsi, si la taille du visage est 200...
... la taille de la bouche est 100.
Puis, si la taille du visage passe à 300, du coup, la taille de la bouche sera de 150.
Donc, cela change "proportionnellement".
Ensuite... ici... quand on calcul les positions, on utilise aussi des fractions.
Car on veut que le décalage dépende aussi de la taille du visage "proportionnellement".
En fait, on veut que tout le reste soit calculé en fonction de la taille du visage (variable "faceSize").
Et on peut faire ça avec les variables et les expressions avec des variables.
Bon. Maintenant qu'on a compris comment rendre les variables dépendantes d'autres variables...
... on peut faire beaucoup plus de chose dans nos programmes.
On va fêter ça en AGRANDISSANT notre Winston
Allez Winston, continue, continue... aller... encore !
Ne t'arrête pas ! aller... encore ! Gnaaaaaaaa !