Resizing shapes with variable expressions

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 !