On est de retour avec Winston.
Nous avons à présent une variable X et une Y pour
la position de Winston.
Donc nous pouvons bouger sur les côtés
en haut et en bas, woo!
Vraiment bien.
Maintenant, réinitialisons ces variables
avec 200 et 200
et voyons comment fonctionne ce programme.
Alors commençons ici, nous avons la variable eyeSize.
C'est utilisé pour contrôler le dimension des yeux,
parce que les yeux ont tous une largeur de 40 pixels
et une hauteur de 40 pixels.
Et puis nous avons les variables X et Y,
et elles définissent le centre du visage.
Et vous les voyez utilisés
dans cette commande ellipse ici,
qui dessine ce grand cercle jaune.
Et ici en bas,
pour les yeux,
le X et le Y sont aussi utilisés.
Et ici,
les yeux sont positionnés
relativement au centre du visage.
Donc peut-être que celui-ci est
à 50 pixels
du gauche du centre
et celui-ci est à 100 pixels
de la droite du centre.
OK. Pas mal
et c'est pourquoi nous pouvons
bouger Winston de haut en bas.
Maintenant, je veux pouvoir contrôler
plus de chose sur le visage de Winston
avec des variables
donc je veux comprendre
ce que nous pouvons, dans ce programme,
enregistrer en tant que variables
pour ce faire
je vais passer en revu
chaque ligne de code
et regarder celle que l'on appelle
des nombres codés en dur
et ces nombres qui sont
juste des nombres littéraires
non des variables ou dépendant de variables
donc commençons par ici
dans cette première ellipse
nous avons 300 et 300
pour la largeur et la hauteur
ce sont des nombres littéraires
donc faisons une variable
pour ceux-ci.
Appelons la faceSize
et enregistrons 300
maintenant nous avons juste à écrire faceSize,
faceSize
OK ? Alors continuons
et oublions les couleurs
maintenant les commandes d'ellipse sont
à la fois des variables ou
dépendant de variables
donc je vais les laisser
comme ceci pour l'instant
et prenons la commande de la bouche
qui est dépendante de X et Y
mais qui sont
juste des nombres littéraires
150 et 150
disons donc
mouthSize, c'est un bon nom,
égale 150
on va remplacer ça par mouthSize
et mouthSize
Ok, donc maintenant
nous avons les dimensions des formes
enregistrés comme des variables tout en haut,
ce qui veut dire qu'il est très simple
pour nous de changer les dimensions
comme ça, ou comme ça,
Wooooo Winston à faim !
et peut-être maintenant, comme ceci,
Winston avait faim et
il a mangé beaucoup de Donuts
et ensuite il devient super gros
Ok bon,
il y a quelque chose
que je n'aime pas à propos du programme pour l'instant
donc si je transforme le visage en tout petit
cela commence à être drôle
parce que les yeux et la bouche
sortent du visage
et à un certain point cela ne semble
même plus être relié
au visage
ou n'est-ce plus un visage du tout ?
Bon alors ce qu'il s'est réellement passé
c'est que lorsque je change faceSize
je veux que les yeux et la bouche
Je veux que leur dimensions changent également,
donc si je change faceSize jusqu'à la moitié
je veux que la bouche soit aussi diminué de moitié
ce qui veut dire
que je veux calculer mouthSize et eyeSize
comme des fractions de faceSize
OK réinitialisons les variables
et je vais vous montrer ce à quoi je pense.
Je commence par mouthSize
donc maintenant
faceSize est égale à 300 et mouthSize est égale à 150
donc si l'on réfléchis
ils sont relatifs l'un à l'autre
disons que faceSize est deux fois plus grand
que mouthSize
ou que mouthSize est deux fois plus petit
que faceSize
et on peut écrire ce code comme ceci
une fois et demi faceSize
OK donc cette ligne de code dit
que l'on veut prendre la valeur de faceSize
la multiplier par sa moitié
et enregistrer ceci dans mouthSize
comme ça nous pourrons changer ceci
qui interprètera ce qu'est la moitié
et deviendra mouthSize
parfait ! Voilà ce que nous voulons
Maintenant eyeSize
donc faceSize est égale à 300
et eyeSize est égale à 40
donc nous avons besoins
40 divisé par 300 de faceSize
ce qui donne
4 sur 30 que nous pouvons
simplifier par 2 sur 15
donc disons que
2 sur 15 fois faceSize
(par ailleurs
si vous êtes débutants avec les fractions
et que les maths vous semblent compliqués
vous pouvez apprendre d'avantages sur les fractions
sur Khan Academy
et revenir à ce chapitre lorsque
vous vous sentirez prêts)
revenons à nos moutons
OK
donc réduisons le visage à nouveau
Haha! Regardez !
La bouche et les yeux se redimensionnent
proportionnellement au visage
mais vous remarquerez probablement
quelque chose qui cloche
les yeux et la bouche
s'écartent toujours du visage
même s'ils sont
bien plus proportionnels.
C'est parce que nous avons toujours
des nombres codés en dur
dans les commandes des ellipses
ces nombres qui devraient en fait
être des fractions de variables.
Voilà, je vais vous montrer
pour l'ellipse de l'oeil nous avons
X moins 50 pour la position X
ce qui veut toujours dire X moins 50
même si nous modifions faceSize
en dessous de 50 pixels
et ça n'a aucun sens
car cela veut dire que l'oeil gauche
ne sera plus
dans le visage.
Donc on devrait avoir X moins une fraction
de la dimension du visage
et nous pouvons définir une fraction
de la même façon
50 relativement aux 300 d'origine
donc 50 sur 300, 5 sur 30, 1 sur 6
donc 1 sur 6 fois faceSize
et ici nous avons également 50
donc nous pouvons faire la même chose
la même ligne de code
ici nous avons 100 sur 300
qui deviendra
1/3 de faceSize
ici nous avons 60
qui finira par
1/5 de faceSize
et ici nous avons un autre 50
qui sera 1/6 de faceSize
et ici 40
qui deviendra
2 sur 15
donc 2 sur 15 faceSize
Ok réessayons
Oh regardez ça !
Regardez ! C'est magnifique !
Trop bien.
Ok bon récapitulons
nous avons créés cette variable
qui stocke les dimensions du visage
et qui n'enregistre qu'un nombre
et nous avons les variables mouthSize
et eyeSize
et nous les avons calculés avec des fractions
de faceSize
pour être certains
que leurs valeurs changent toujours
avec la base de celle-ci
et toutes les autres sont calculées
également sur la base de faceSize
pour être certains que cette position
à l’intérieur du visage change
si faceSize change.
Whoo! Très bien.
Donc maintenant que l'on comprend bien
comment créer des variables
qui dépendent des valeurs d'autres variables
on peut faire beaucoup plus avec nos programmes
Célébrons cela en rendant Winston énorme !
Yeaaah ! Allez Winston !