Les "visages rebondissants"

Question 1: avant de vous lancer dans l'écriture du code, réfléchissez à la manière dont vous allez représenter un visage. Définissez les propriétés caractérisant un objet visage et définissez les paramètres du constructeur permettant de créer de tels objets.

Elaborez votre propre solution que vous pourrez ensuite comparer à la correction proposée par ce bouton --> Réponse
Ne dévoilez pas trop vite la réponse ! Prenez le temps de réfléchir !

Question 2: Créez une page HTML Visages.html qui contient un canvas dans lequel sont affichés deux visages de taille différentes.

Le code JavaScript sera organisé de la manière suivane

• Dans un fichier Visage.js écrivez:

  • la fonction constructeur Visage(...)

  • la méthode dessiner() associée au prototype de la fonction Visage et qui permet à un visage de s'afficher dans son canvas.
    Pour dessiner un visage, utilisez la méthode arc de l'API canvas, elle vous permettra d'afficher le disque du visage et de tracer la bouche et les yeux.

• Dans un second fichier lesVisages.js écrivez les instructions du programme principal (exécuté lorsque le document HTML a été chargé) qui permettent de

  • recupérer l'objet canvas défini la page HTML

  • créer dans ce canvas deux objets Visage en invoquant la fonction constructeur Visage,

    • le premier visage, de rayon 40 pixels, centré au milieu du canvas

    • le deuxième visage, de rayon 20 pixels, situé à droite du premier visage

  • afficher les deux objets Visage en leur envoyant un message dessiner()

  Le résutat obtenu doit être conforme à la figure ci-dessous

  

Question 1: Quels attributs (propriétés) faut-il ajouter aux objets Visages pour permettre leur animation ? Modifier le constructeur Visage afin de pouvoir les spécifier à la création d'un Visage.

Elaborez votre propre solution que vous pourrez ensuite comparer à la correction proposée par ce bouton --> Réponse
Ne dévoilez pas trop vite la réponse ! Prenez le temps de réfléchir !

L'animation consistera, à intervalles de temps réguliers à effacer le contenu du canvas, à déplacer le centre de chacun des visages et finalement à réafficher ces derniers. A chaque instant le déplacement d'un visage est défini par un vecteur \(V\) que nous pouvons caractériser par deux attributs:

• vx déplacement horizontal élémentaire du visage,

• vy déplacement vertical élémentaire du visage.

Quand le visage touche le bord gauche ou le bord droit du canvas, la composante vx change de signe. De même lorsque le visage touche le bord haut ou le bord bas du canvas, il inverse son déplacement vertical en changeant le signe de vy.

L'ensemble des attributs seront passés en paramètre de la fonction Visage permettant de construire un visage. Sa signature sera donc la suivante:

Visage(canvas, xCentre, yCentre, rayon, vx, vy)

Question 2: Dans le fichier Visage.js écrivez une méthode deplacer() qui fait effectuer au visage un deplacement élémentaire. Lorsque le visage atteint l'un des côtés du canvas où il se situe, il rebondit en inversant son déplacement horizontal si le bord gauche ou droit du canvas est touché et en inversant son déplacement vertical si le bord haut ou le bord bas du canvas est touché.

Question 3: Dans le fichier lesVisages.js écrivez un fonction deplacerVisages() qui:

1. fait effectuer un déplacement élémentaire aux deux visages

2. efface le canvas

3. redessine les deux visages

Question 4: pour effectuer l'animation proprement dite il faut invoquer la fonction deplacerVisages() de manière périodique (par exemple toutes les 20 millisecondes). Pour cela utilisez la fonction setInterval qui permet d'appeler un fonction à intervalles de temps réguliers.

Question 1: ajoutez les deux boutons qui permettent d'interrompre et de relancer l'animation.

Pour interrompre l'animation vous utiliserez la fonction clearInterval().

Pour les boutons vous ferez en sorte qu'un seul bouton soit activé à un instant donné. Le clic sur un bouton effectue l'action correspondante, désactive ce bouton (le bouton sera grisé et ne répondra plus au clics) et active l'autre bouton, comme le montre la vidéo ci-dessous.

Pour désactiver un bouton, il faut affecter la valeur true à son attribut disabled.

Inversement pour l'activer, il suffit d'affecter la valeur false à son attribut disabled.

Question 1: Modifiez l'application afin de rajouter dans l'interface un sélecteur de couleurs permettant de modifier la couleur de remplissage de TOUS les visages comme montré dans la vidéo ci-dessous.

Utilisez ce bouton si vous voulez une piste sur comment faire --> Indications

Question 1 : modifiez votre application de manière à ce que l'utilisateur puisse lorsque l'annimation est arrêtée choisir le nombre de visages à animer (nombre compris entre 1 et 10), ces visages étant générés de manière aléatoire comme le montre la vidéo ci-dessus.

Indications

Question 1 : Avez vous une idée de comment procéder ( sans modifier le code et recharger la page ) pour obtenir cet effet ? Faites comme dans la vidéo :

1. Générez 10 visages
2. Modifiez la couleur du visage le plus gros en lui affectant la couleur jaune ('yellow')
3. Modifiez la couleur du visage le plus petit en lui affectant une couleur bleu ciel ('lightblue')
4. Verifiez que lorsque vous modifiez la couleur avec l'input prévu à cet effet, tous les visages changent de couleur, sauf le plus petit et le plus gros.
5. Modifiez le visage le plus gros de manière à ce qu'il retrouve la même couleur que les autres visages et verifiez que lorsque vous modifiez la couleur avec l'input prévu à cet effet, tous les visages, excepté le plus petit, changent de couleur (y compris le plus gros).

Si vous n'avez pas d'idée sur comment procéder, ce bouton Piste de solution vous donnera comme son nom l'indique des indications pour une solution.

Si les indications précédentes ne se sont pas révélées suffisantes le Une solution vous donnera une explication détaillée de la solution.