Programmation client, année 2018
Terminer le TD précédent avant de débuter celui-ci
Une introduction au SVG
Quand on souhaite afficher des éléments graphiques, il est pratique de manipuler le format de fichier SVG pour cela. Vous trouverez des exemples ici
Créer un élément SVG qui contient un cercle bleu.
En créant un objet
cercle
, donner à votre cercle un vecteur aléatoire de norme 1. Créer une méthoderafraichir
qui modifie la position du centre de votre cercle change selon la direction du vecteur à chaque fois que vous cliquez sur le cercle.
Dans la suite, on appellera ce vecteur aléatoire est le vecteur vitesse du cercle.
Modifier le code de la question précédente pour que le cercle bouge à interval régulier, en utilisant la fonction SetInterval
Ajouter à votre cercle un vecteur accélération qui prend la direction de la souris et dont la norme est inversement proportionnel au carré entre la souris et du centre du cercle. On simule ainsi une attraction gravitationelle entre le cercle et la sourie. Faire en sorte de modifier le vecteur vitesse en l’incrémentant du vecteur d’accélération à chaque appel de la fonction
raffraichir
.Faire apparaître les vecteurs vitesses et accélérations explicitement. On peut utiliser pour cela les
marker
voir ici par exemple.Modifier l’exemple ci dessus afin que le cercle rebondisse sur les bords. Ajouter plusieurs cercles à l’exemple pour un résultat spectaculaire.
(Facultatif) Modifier la méthode
raffraichir
pour que l’accélération de chaque cercle soit la résultante de l’attraction par tous les cercles.
Des graphiques en SVG
En vous inspirant des questions précédentes et de la documentation pour le format SVG, modifier le code du TD précédent pour afficher un graphique en bar où en abscisse on trouve les villes d’une région et en ordonnées leur population. Réaliser un graphique avec une échelle standard et un avec une échelle logarithmique.
Essayez de faire un graphique camembert qui affiche dans une région donnée la fraction des habitants de la région qui habite dans les 7 villes les plus peuplés.
Compiled the: mer. 08 janv. 2025 11:51:36 CET