Défi Matrix!

Avant toute chose, renomme ton projet en appuyant sur le petit crayon 🖉. Moi j'ai choisi le nom "Matrix".

Maintenant, tente d'élargir ton canevas pour qu'il ait la forme d'un rectangle.

Indice

Un peu de couleur! Comment faire pour changer la couleur de tout ton canevas (de l'arrière-plan)? Tu peux mettre tout l'arrière plan en rouge, par exemple.

Indice

Et finalement, les deux couleurs! Pour que les deux couleurs soient visibles sur ton canvas, tu peux ajouter un rectangle de couleur bleue sur la partie droite (ou gauche). Tu auras besoin de ces deux fonctions:

• fill()
• rect()

On va ajouter un message du côté rouge. Pour l'instant, il sera visible.

Indice

C'est bon? Tu peux maintenant ajouter un message de l'autre côté.

Je te conseille d'utiliser à nouveau la fonction fill() pour mettre la couleur du texte en blanc (ou la couleur de ton choix). Sinon, tu risques de ne pas voir le texte.

Deuxième conseil: pour avoir deux lignes de texte (plutôt qu'une), tu dois utiliser deux fois la fonction text(). La fonction ne va pas automatiquement à la ligne.

On va maintenant faire apparaître les messages seulement lorsqu'on clique sur notre canvas. Te rappelles-tu de la fonction à utiliser pour repérer le clic de la souris?

Eh oui, c'est la fonction mouseClicked(). On va la coder après nos fonctions setup() et draw() comme ceci:

            
              function setup() {
                createCanvas(600, 200);
              }

              function draw() {
                background("red");
                fill("blue");
                rect(300, 0, 400);
              }

              function mouseClicked() {
                // TON CODE POUR FAIRE APPARAÎTRE LES DEUX MESSAGES
              }
            
            

Teste ton code: lance ton application et clique sur le canvas. On dirait que le texte apparaît mais disparaît aussitôt! C'est que la fonction draw() est lancée immédiatement après et recouvre nos messages avec les couleurs.

Pour être sûr que ton message reste sur le canvas, ajoute la ligne suivante à la toute fin de ta fonction mouseClicked():

Cela empêche la fonction draw() d'être déclanchée à nouveau.

On y est presque 💪🏽. Par contre, les deux côtés de notre canvas apparaîssent lorsqu'on clique. Faisons en sorte que seul le message du côté cliqué apparaisse!

Comment détecter de quel côté on a cliqué? Malheureusement, p5.js ne détecte pas la couleur (contrairement à Scratch). Par contre, p5.js peut repérer la position de la souris lorsque l'on clique quelque part. Essaie ceci dans ta fonction mouseClicked() (et avant la ligne noLoop()):

Qu'est-ce que la variable mouseX stocke? Un mot, une lettre, un chiffre? Et qu'est ce que ça représente?

Réponse

Grâce à cette variable, on va pouvoir déterminer si on a cliqué à droite ou à gauche. Si on a cliqué à gauche, c'est le message de la pilule rouge qui va s'afficher, sinon ce sera celui de la pilule bleue!

Comment peut-on coder un si, sinon en Javascript?

Indice

                  
                  if (CONDITION) {
                    // ton code pour le côté gauche
                  } else {
                    // ton code pour le côté droit
                  }
                  
                

Réponse

                  
                  function setup() {
                    // ton code
                  }

                  function draw() {
                    // ton code
                  }

                  function mouseClicked() {
                    // change la couleur de ton texte (moi j'ai choisi blanc)
                    fill("white");
                    if (mouseX < 300) {
                      text("Cette année tu vas voyager sur Mars", 10, 200);
                      // le reste de ton code (si tu as plusieurs lignes de texte, par exemple)
                    } else {
                      text("Cette année tu vas rester sur Mars", 310, 200);
                      // le reste de ton code
                    }
                    // Très important d'ajouter le noLoop() à la fin!
                    noLoop();
                  }
                  
                

Voici quelques idées pour améliorer ton projet:

1. ajuste la taille de ton texte en utilisant la fonction textSize()
2. choisis une chouette police avec les Google fonts (tu peux t'inspirer de l'étape 12 du défi des prédictions
3. code des messages aléatoires (DIFFICILE)