-
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 !
