WEBVTT

00:00:00.236 --> 00:00:02.719
Nous avons fait beaucoup 
de dessins pour l'instant.

00:00:02.719 --> 00:00:05.193
Nous n'avons pas encore parlé de 
la façon d'écrire du texte.

00:00:05.193 --> 00:00:07.595
C'est ce que nous allons voir maintenant.

00:00:07.595 --> 00:00:11.396
Pourquoi avoir besoin d'écrire du texte ?
Vous voudrez peut être afficher un score...

00:00:11.396 --> 00:00:15.688
ou afficher une explication, ou afficher
votre nom et le faire grandir ou changer de couleur.

00:00:15.688 --> 00:00:24.113
Essayons de dire bonjour ("hello" en anglais).
On écrit...text, puis... hello... et on obtient une erreur.

00:00:24.113 --> 00:00:27.424
Elle indique que "hello" n'est pas défini.
Pourquoi a-t-on ça ?

00:00:27.424 --> 00:00:30.993
Le problème, ici, c'est que l'ordinateur pense que 
hello est une variable.

00:00:30.993 --> 00:00:33.445
Et effectivement, c'est possible...

00:00:33.445 --> 00:00:36.222
On pourrait avoir une variable qui s'appèle hello.

00:00:36.222 --> 00:00:39.251
Donc, comment lui indiquer que hello n'est pas
une variable, mais du texte.

00:00:39.251 --> 00:00:42.889
C'est simple. On a juste à mettre des guillemets
au début et à la fin du texte.

00:00:42.889 --> 00:00:46.069
Cela permet d'indiquer que ce n'est pas une variable,
c'est du texte.

00:00:46.069 --> 00:00:48.113
On veut juste afficher ce qu'il y a entre les guillemets.

00:00:48.113 --> 00:00:51.282
En utilisant les guillemets, on indique à l'ordi de ne 
pas interpréter le contenu.

00:00:51.282 --> 00:00:54.244
Mais juste utiliser ce qu'il y a à l'intérieur
comme du texte à utiliser tel quel.

00:00:54.244 --> 00:00:58.282
Ici, on l'utilise en demandant d'afficher ce contenu.
Tous les textes devront être entourés de guillemets.

00:00:58.282 --> 00:01:01.699
C'est un point très importants,
et assez simple à retenir.

00:01:01.699 --> 00:01:05.432
Dit autrement : chaque fois que vous voudrez 
utiliser du texte dans votre programme,

00:01:05.432 --> 00:01:07.526
vous devrez toujours entourer 
le texte avec des guillemets.

00:01:07.526 --> 00:01:10.852
Sinon, vous aurez des messages d'erreurs, car
l'ordi cherchera à l'interpréter comme des variables.

00:01:10.852 --> 00:01:12.966
Si vous obtenez ce type de messages,

00:01:12.966 --> 00:01:15.089
vérifiez que vous n'avez pas oublié 
ces guillemets.

00:01:15.089 --> 00:01:18.199
Parfait ! Bon, en utilisant les guillemets
on n'a plus l'erreur.


00:01:18.199 --> 00:01:20.828
Mais vous avez vu que l'on n'a rien 
d'affiché à droite !

00:01:20.828 --> 00:01:22.157
On a toujours une page blanche !

00:01:22.157 --> 00:01:24.890
Par contre, si on ajoute une couleur
de fond avec "background();"

00:01:24.890 --> 00:01:29.114
... on trouve notre texte affiché.

00:01:29.114 --> 00:01:36.068
Il est simplement écrit en blanc. Et si on écrit
du texte en blanc, sur un fond blanc...

00:01:36.068 --> 00:01:37.952
évidemment, on ne le voit pas !

00:01:37.952 --> 00:01:42.445
Bien sûr, c'est un peu idiot de faire ça.

00:01:42.445 --> 00:01:46.111
On peut changer ça facilement, car vous 
avez vu comment changer la couleur du pinceau.

00:01:46.111 --> 00:01:50.901
Donc, en utilisant la fonction "fill()", on peut changer
la couleur du pinceau utilisé pour le texte.

00:01:50.901 --> 00:01:54.231
Et... voilà ! on a bien notre texte maintenant.

00:01:54.231 --> 00:01:59.290
Le texte s'affiche sans avoir besoin de fond de couleur.
Voyons maintenant comment cette fonction "text()" fonctionne

00:01:59.290 --> 00:02:03.799
Le premier paramètre est le texte qu'on veut afficher.

00:02:03.799 --> 00:02:08.695
Ensuite, si on change le second paramètre, 
on déplace le texte horizontalement (l'axe des "x").

00:02:08.695 --> 00:02:11.776
Et le troisième est la position verticale 
(sur l'axe des "y").

00:02:11.776 --> 00:02:14.698
Ca ne vous rappelle rien ?
C'est comme pour dessiner un rectangle.

00:02:14.698 --> 00:02:19.265
Le truc un peu bizarre, est que 
les deux coordonnées...

00:02:19.265 --> 00:02:24.236
correspondent au coin INFERIEUR gauche.
Donc c'est ce coin... là.

00:02:24.236 --> 00:02:27.222
Alors que pour les rectangles, c'est le coin
SUPERIEUR gauche. Ce coin...

00:02:27.222 --> 00:02:30.610
On a l'impression que c'est fait 
pour nous embêter !

00:02:30.610 --> 00:02:32.761
Mais c'est juste un truc à connaître.

00:02:32.761 --> 00:02:37.390
On peut juste essayer en mettant 
"height" pour le "y".

00:02:37.390 --> 00:02:42.448
Et constater qu'effectivement, c'est le coin 
inférieur qui est à la limite de l'écran.

00:02:42.448 --> 00:02:48.775
Ou on peut essayer avec 0 (zéro). 
Qu'est-ce qu'on va obtenir ?

00:02:48.775 --> 00:02:53.781
Et bien, le texte disparaît.
Et si on augmente le zéro doucement,

00:02:53.781 --> 00:02:56.116
on peut voir que le texte réapparaît par le haut...

00:02:56.116 --> 00:02:59.782
Car, c'est bien les coordonnées du 
coin inférieur gauche qu'on indique.

00:02:59.782 --> 00:03:01.754
Ce n'est pas le coin supérieur.

00:03:01.754 --> 00:03:06.222
OK. On va s'arrêter là 
pour la fonction text().

00:03:06.222 --> 00:03:09.830
Par exemple, essayons de l'agrandir.

00:03:09.830 --> 00:03:14.698
On utilise la fonction "textSize();" qui permet
d'indiquer la taille du texte à afficher.

00:03:14.698 --> 00:03:20.497
Indiquons une taille de "30". C'est assez grand.
On peut le faire plus grand... ou tout petit, petit...

00:03:20.497 --> 00:03:25.557
Essayons maintenant d'écrire votre prénom.
et un texte court en dessous vous décrivant.

00:03:25.557 --> 00:03:28.728
Comme je ne vous connaît pas, 
je vais utiliser le prénom "Sophia" par exemple.

00:03:28.728 --> 00:03:35.436
Je vous rassure, ce n'est pas mon prénom...
Donc j'écrit : text( "Sophia",... Et voila !

00:03:35.436 --> 00:03:42.801
Ensuite, un petit texte en dessous. Comme :
j'aime les chiots, la guitare et coder".

00:03:42.801 --> 00:03:49.262
C'est pas mal, mais il faut le déplacer pour
éviter cette superposition... Voila.

00:03:49.262 --> 00:03:55.368
On va aussi réduire sa taille. Avec la 
fonction "textSize();" et un nombre plus petit.

00:03:55.368 --> 00:03:58.633
Et voilà ! c'est plutôt pas mal, non ?

00:03:58.633 --> 00:04:01.854
Je veux aussi changer la couleur maintenant...

00:04:01.854 --> 00:04:06.923
donc, j'utilise la fonction "fill();"
et je choisit une couleur...

00:04:06.923 --> 00:04:09.962
... un beau... rose... comme ça !

00:04:09.962 --> 00:04:16.729
Génial ! Vous savez maintenant comment
afficher du texte, changer sa taille et sa couleur !