Première animation

Q5 / CRÉER un fichier « Balle.html » et le script « Balle.js » associé permettant d'obtenir le graphique ci-contre.

1
function animate()
2
{
3
   // Rectangle
4
   context.fillStyle = "rgb(199, 208, 204)";
5
   context.fillRect(0, 0,300,300);
6
   //cercle
7
   context.beginPath(); // Nouveau tracé (path)
8
   context.fillStyle = "rgb(96, 80, 220)";
9
   context.arc(10,10,10, 0, Math.PI*2); //position 1: x=10 et y=10 - Rayon 10
10
	 context.fill(); // méthode fill(); forme pleine
11
   context.closePath(); // Fin du tracé
12
}

Q6 / CHOISIR librement d'autres couleurs pour le cercle et le rectangle.

Q7 / MODIFIER les valeurs de la méthode arc pour situer la balle :

  • en haut à gauche

  • en haut à droite

  • en bas à gauche

  • en bas à droite

A chaque fois, TESTER le résultat obtenu.

Rectangle : Dimensions : 300 x 300 ; Couleur : gris - Balle : Rayon 10px ; Couleur RGB : 128, 128, 255

Q8 / COMPLÉTER la figure ci-contre : INDIQUER les coordonnées du centre du cercle (balle) pour chaque coin. CONSIDÉRER les variables suivantes :

  • R : Rayon de la balle

  • W (Width) : Largeur du rectangle

  • H (Height) : Hauteur du rectangle

Q9 / PROPOSER une solution pour que le cercle passe successivement d'un coin du carré à l'autre toutes les secondes.

RemarqueVitesse de l'animation

var myInterval = setInterval(animate, 1000/1); // 1 fois par seconde

ConseilSwitch

UTILISER l'instruction « switch » avec une variable « etat » variant de 1 à 4 pour exécuter context.arc() avec les bons paramètres.

ComplémentSwitch - javascript

L'instruction switch évalue une expression et, selon le résultat obtenu et le cas associé, exécute les instructions correspondantes.

Conseiletat

PENSER à :

  • incrémenter la variable « etat »

  • effectuer un test sur la valeur de « etat »

  • remettre « etat » à « 1 » au bout d'un tour

Validation professeur