Return to Video

Terrific Text Part 1

  • 0:00 - 0:03
    Nous avons fait beaucoup
    de dessins pour l'instant.
  • 0:03 - 0:05
    Nous n'avons pas encore parlé de
    la façon d'écrire du texte.
  • 0:05 - 0:08
    C'est ce que nous allons voir maintenant.
  • 0:08 - 0:11
    Pourquoi avoir besoin d'écrire du texte ?
    Vous voudrez peut être afficher un score...
  • 0:11 - 0:16
    ou afficher une explication, ou afficher
    votre nom et le faire grandir ou changer de couleur.
  • 0:16 - 0:24
    Essayons de dire bonjour ("hello" en anglais).
    On écrit...text, puis... hello... et on obtient une erreur.
  • 0:24 - 0:27
    Elle indique que "hello" n'est pas défini.
    Pourquoi a-t-on ça ?
  • 0:27 - 0:31
    Le problème, ici, c'est que l'ordinateur pense que
    hello est une variable.
  • 0:31 - 0:33
    Et effectivement, c'est possible...
  • 0:33 - 0:36
    On pourrait avoir une variable qui s'appèle hello.
  • 0:36 - 0:39
    Donc, comment lui indiquer que hello n'est pas
    une variable, mais du texte.
  • 0:39 - 0:43
    C'est simple. On a juste à mettre des guillemets
    au début et à la fin du texte.
  • 0:43 - 0:46
    Cela permet d'indiquer que ce n'est pas une variable,
    c'est du texte.
  • 0:46 - 0:48
    On veut juste afficher ce qu'il y a entre les guillemets.
  • 0:48 - 0:51
    En utilisant les guillemets, on indique à l'ordi de ne
    pas interpréter le contenu.
  • 0:51 - 0:54
    Mais juste utiliser ce qu'il y a à l'intérieur
    comme du texte à utiliser tel quel.
  • 0:54 - 0:58
    Ici, on l'utilise en demandant d'afficher ce contenu.
    Tous les textes devront être entourés de guillemets.
  • 0:58 - 1:02
    C'est un point très importants,
    et assez simple à retenir.
  • 1:02 - 1:05
    Dit autrement : chaque fois que vous voudrez
    utiliser du texte dans votre programme,
  • 1:05 - 1:08
    vous devrez toujours entourer
    le texte avec des guillemets.
  • 1:08 - 1:11
    Sinon, vous aurez des messages d'erreurs, car
    l'ordi cherchera à l'interpréter comme des variables.
  • 1:11 - 1:13
    Si vous obtenez ce type de messages,
  • 1:13 - 1:15
    vérifiez que vous n'avez pas oublié
    ces guillemets.
  • 1:15 - 1:18
    Parfait ! Bon, en utilisant les guillemets
    on n'a plus l'erreur.
  • 1:18 - 1:21
    Mais vous avez vu que l'on n'a rien
    d'affiché à droite !
  • 1:21 - 1:22
    On a toujours une page blanche !
  • 1:22 - 1:25
    Par contre, si on ajoute une couleur
    de fond avec "background();"
  • 1:25 - 1:29
    ... on trouve notre texte affiché.
  • 1:29 - 1:36
    Il est simplement écrit en blanc. Et si on écrit
    du texte en blanc, sur un fond blanc...
  • 1:36 - 1:38
    évidemment, on ne le voit pas !
  • 1:38 - 1:42
    Bien sûr, c'est un peu idiot de faire ça.
  • 1:42 - 1:46
    On peut changer ça facilement, car vous
    avez vu comment changer la couleur du pinceau.
  • 1:46 - 1:51
    Donc, en utilisant la fonction "fill()", on peut changer
    la couleur du pinceau utilisé pour le texte.
  • 1:51 - 1:54
    Et... voilà ! on a bien notre texte maintenant.
  • 1:54 - 1:59
    Le texte s'affiche sans avoir besoin de fond de couleur.
    Voyons maintenant comment cette fonction "text()" fonctionne
  • 1:59 - 2:04
    Le premier paramètre est le texte qu'on veut afficher.
  • 2:04 - 2:09
    Ensuite, si on change le second paramètre,
    on déplace le texte horizontalement (l'axe des "x").
  • 2:09 - 2:12
    Et le troisième est la position verticale
    (sur l'axe des "y").
  • 2:12 - 2:15
    Ca ne vous rappelle rien ?
    C'est comme pour dessiner un rectangle.
  • 2:15 - 2:19
    Le truc un peu bizarre, est que
    les deux coordonnées...
  • 2:19 - 2:24
    correspondent au coin INFERIEUR gauche.
    Donc c'est ce coin... là.
  • 2:24 - 2:27
    Alors que pour les rectangles, c'est le coin
    SUPERIEUR gauche. Ce coin...
  • 2:27 - 2:31
    On a l'impression que c'est fait
    pour nous embêter !
  • 2:31 - 2:33
    Mais c'est juste un truc à connaître.
  • 2:33 - 2:37
    On peut juste essayer en mettant
    "height" pour le "y".
  • 2:37 - 2:42
    Et constater qu'effectivement, c'est le coin
    inférieur qui est à la limite de l'écran.
  • 2:42 - 2:49
    Ou on peut essayer avec 0 (zéro).
    Qu'est-ce qu'on va obtenir ?
  • 2:49 - 2:54
    Et bien, le texte disparaît.
    Et si on augmente le zéro doucement,
  • 2:54 - 2:56
    on peut voir que le texte réapparaît par le haut...
  • 2:56 - 3:00
    Car, c'est bien les coordonnées du
    coin inférieur gauche qu'on indique.
  • 3:00 - 3:02
    Ce n'est pas le coin supérieur.
  • 3:02 - 3:06
    OK. On va s'arrêter là
    pour la fonction text().
  • 3:06 - 3:10
    Par exemple, essayons de l'agrandir.
  • 3:10 - 3:15
    On utilise la fonction "textSize();" qui permet
    d'indiquer la taille du texte à afficher.
  • 3:15 - 3:20
    Indiquons une taille de "30". C'est assez grand.
    On peut le faire plus grand... ou tout petit, petit...
  • 3:20 - 3:26
    Essayons maintenant d'écrire votre prénom.
    et un texte court en dessous vous décrivant.
  • 3:26 - 3:29
    Comme je ne vous connaît pas,
    je vais utiliser le prénom "Sophia" par exemple.
  • 3:29 - 3:35
    Je vous rassure, ce n'est pas mon prénom...
    Donc j'écrit : text( "Sophia",... Et voila !
  • 3:35 - 3:43
    Ensuite, un petit texte en dessous. Comme :
    j'aime les chiots, la guitare et coder".
  • 3:43 - 3:49
    C'est pas mal, mais il faut le déplacer pour
    éviter cette superposition... Voila.
  • 3:49 - 3:55
    On va aussi réduire sa taille. Avec la
    fonction "textSize();" et un nombre plus petit.
  • 3:55 - 3:59
    Et voilà ! c'est plutôt pas mal, non ?
  • 3:59 - 4:02
    Je veux aussi changer la couleur maintenant...
  • 4:02 - 4:07
    donc, j'utilise la fonction "fill();"
    et je choisit une couleur...
  • 4:07 - 4:10
    ... un beau... rose... comme ça !
  • 4:10 - 4:17
    Génial ! Vous savez maintenant comment
    afficher du texte, changer sa taille et sa couleur !
Title:
Terrific Text Part 1
Description:

more » « less
Video Language:
English
Duration:
04:19
Christophe Noblanc edited French subtitles for Terrific Text Part 1
Christophe Noblanc edited French subtitles for Terrific Text Part 1
Christophe Noblanc edited French subtitles for Terrific Text Part 1

French subtitles

Revisions