Return to Video

Mouse Interaction (Video Version)

  • 0:01 - 0:04
    Vous avez déjà appris comment créer
    vos propres variables et les utiliser.
  • 0:04 - 0:11
    Maintenant, on va apprendre comment
    utiliser 2 variables spéciales : mouseX et mouseY.
  • 0:11 - 0:17
    D'abord, nous n'aurez pas à les créer vous-même.
    Car elles existent déjà.
  • 0:17 - 0:22
    En fait, le programme gère ces variables à votre place.
    Elles contiennent la position de votre souris.
  • 0:22 - 0:28
    mouseX pour sa coordonnée horizontale X.
    mouseY pour sa coordonnée verticale Y.
  • 0:28 - 0:33
    Du coup, c'est très facile de faire des choses
    sympa en utilisant la position de la souris.
  • 0:33 - 0:37
    Regardez cette ellipse que je dessine ici.
  • 0:37 - 0:41
    Pour l'instant, je la dessine toujours
    à la position 200, 200.
  • 0:41 - 0:50
    Si j'utilise les deux variables mouseX et mouseY,
    je peux dessiner l'ellipse à l'endroit où se trouve la souris.
  • 0:50 - 0:58
    Maintenant, si je bouge ma souris dans le canevas, vous
    voyez que l'ellipse est dessinée à l'endroit de la souris.
  • 0:58 - 1:02
    C'est pas mal... J'ai dessiné une petit souriiiiiis !
  • 1:02 - 1:06
    Si vous utilisez "mouseX" et "mouseY", vous devez
    faire attention à le faire DANS la fonction "draw"
  • 1:06 - 1:11
    car regardez ce qu'il se passe si je déplace ces
    2 lignes de code à l'extérieur de la fonction "draw"...
  • 1:11 - 1:16
    Vous voyez ?
  • 1:16 - 1:27
    Ce code, ici, ne s'exécute qu'une seule fois.
    donc l'ellipse n'est dessinée qu'une fois à l'endroit
    où était ma souris quand le programme a commencé.
  • 1:27 - 1:36
    C'est pour ça qu'on a besoin de mettre ce code DANS la
    fonction "draw". Car c'est là que le code est répété
    indéfiniment, sans arrêt.
  • 1:36 - 1:44
    Donc quand la fonction est exécutée, on veut récupérer
    les valeurs de mouseX et mouseY et dessiner l'ellipse
    à cet endroit.
  • 1:44 - 1:49
    En fait, c'est une animation. Car l'affichage change
    un peu à chaque fois un peu.
  • 1:49 - 1:53
    OK. Grace à ça, on peut faire plein
    d'autres choses amusantes.
  • 1:53 - 2:04
    Que passera-t-il si je laisse mouseX,
    mais si je fixe mouseY à quelque chose comme 300 ?
  • 2:04 - 2:11
    Vous voyez que l'ellipse suit la position X de ma souris
    mais elle ignore se qu'elle fait sur l'axe vertical Y.
  • 2:11 - 2:22
    Maintenant, si je la dessine à la position mouseX et mouseY
    mais si j'enlève l'affichage de la couleur de fond ?
  • 2:22 - 2:28
    Regardez, Wouhou ! J'ai comme un pinceau
    de peintre !
  • 2:28 - 2:40
    Ou, je peut essayer de permuter les variables.
    Je remets le fond d'écran, et permute les deux variables...
  • 2:40 - 2:46
    Houhou ! Ca devient vraiment vraiment difficile !
    L'ellipse fait exactement le contraire de ma souris !
  • 2:46 - 2:53
    C'est sympa quand même ! Vous pouvez imaginer un jeu
    où il faut dessiner quelque chose, ou faire quelque chose
    en inversant la position de la souris...
  • 2:53 - 3:00
    Voilà pour "mouseX" et "mouseY" !
    A vous de jouer !
Title:
Mouse Interaction (Video Version)
Description:

more » « less
Video Language:
English
Duration:
03:00

French subtitles

Revisions