L'objectif de cette dernière séance est de doter votre visualisation de villes françaises de mécanismes d'interaction, pour permettre aux utilisateurs de filtrer les villes et afficher les noms des villes.
Ce travail de TP est individuel. Néanmois, durant la séance vous aurez la possibilité de travailler sur les étapes ci-dessous avec l'assistance de l'instructeur et poser toutes les questions que vous souhaitez pour vous aider à progresser.
Pré-requis
À ce stade, vous devriez normallement avoir implémenté une visualisation des villes françaises, où les villes sont représentées par des points, cercles, ou n'importe quelle autre forme de votre choix.
Le stockage des informations relatives à chacune des villes (nom, population, etc...) et la fonction de dessin de la marque correspondante devraient normalement être gérer indépendamment dans une classe différente du programme principal (nommée par exemple
City
, déclarée dans un fichier Processing séparé.
Réferrez-vous aux instructions des séances précédentes si ça n'est pas le cas.
À présent, suivez simplement les étapes suivantes dans l'ordre. Testez votre application après chaque étape. Si vous êtes à l'aise avec Processing, vous pouvez ignorer les instructions détaillées et essayer d'implémenter directement les effets désirés.
Étape 1: filtrer les petites villes
Effet désiré: seules les villes les plus peuplées (selon une valeur de seuil définie dans le code) sont affichées à l'écran.
- Dans votre programme principal, déclarez une nouvelle variable
minPopulationToDisplay
et affectez-lui une valeur telle que 10000.
- Modifiez le code de dessin de telle sorte à ne pas afficher les villes dont la population n'excède pas cette valeur de seuil.
- Utilisez la fonction
text()
pour afficher le texte suivant: "Afficher les populations supérieures à X" en haut de la fenêtre d'affichage (avec X, la valeur de seuil).
Étape 2: rendre le filtrage interactif
Effet désiré: l'utilisateur peut changer la valeur de seuil de filtrage de population en utilisant le clavier.
Étape 3 : "écouter" les déplacements de la souris
Effet désiré: les coordonnées x, y du curseur de la souris sont affichées dans la console, et mises à jour lorsque l'utilisateur déplace la souris.
- Dans le fichier principal de votre programme, déclarez la fonction
mouseMoved()
.
- Affichez les coordonnées de la souris (variables
mouseX
et mouseY
) dans la console Processing via println().
Étape 4 : implémenter la sélection géométrique dynamique
Effet désiré: le nom de la ville pointée par le curseur de la souris s'affiche automatiquement dans la console, de manière dynamique.
- Ajouter une fonction booléenne
contains(int px, int py)
à la classe City
, qui retourne vrai si un point p(px,py)
exprimé en coordonnées écran est contenu dans la forme affichée. Pour ce faire, il vous faudra être cohérent dans la méthode draw
:
class City {
...
// Considérons que ce soit la fonction de dessin que vous aviez déjà
void draw() {
...
// Déssiner un cercle de rayon radius (on suppose que le rayon
// a déjà été calculé)
ellipse(mapX(x), mapY(y), radius*2, radius*2);
...
}
// Ceci est la fonction de test correspondante
boolean contains(int px, int py) {
// Comme nous dessinons un cercle, on utilise ici la distance
// entre (px, py) et le centre du cercle,
// et on ajoute un pixel supplémentaire pour faciliter
// la sélection à la souris
return dist(mapX(x), mapY(y), px, py) <= radius + 1;
}
}
- Dans le fichier principal de votre programme, ajoutez une méthode
pick(int px, int py)
qui retourne l'objet City
à un emplacement (px,py)
donné. Dans le cas où il y aurait plusieurs villes qui se chevauchent (ou, pour être plus exact, plusieurs marques de villes qui se chevauchent), retourner celle qui a été dessinée en dernier. Retourner null
s'il n'y a aucune ville à cet endroit.
Astuce: Parcourir les villes dans l'ordre inverse pour récupérer celle qui a été dessinée en dernier.
- Dans la fonction
mouseMoved()
, ajoutez le code pour afficher dans la console Processing le nom de la ville située sous le curseur de la souris.
- Testez le programme, ensuite modifiez le code source de telle sorte que le nom de la ville située sous le curseur de la souris ne soit affiché qu'une seule fois. Pour ce faire, utilisez une variable globale pour se rappeler quelle était la dernière ville désignée par le curseur.
Étape 5 : Ajouter un retour visuel de sélection
Effet désiré: Quand l'utilisateur déplace la souris, la ville placée sous le curseur de la souris change de couleur.
- Ajouter une variable booléenne à votre classe
City
- Modifiez la fonction de dessin
draw()
de telle sorte que la couleur de la ville est différente si cette variable est true
. Si vous utilisez déjà la couleur comme variable visuelle pour encoder des données, essayez un autre effet de distiction (e.g., ajoutez un cercle épais autour de la ville, changez son opacité, ou, pour les gourous en Processing, animez le point). Consultez les tutoriaux de Processing pour apprendre comment comment travailler avec les couleurs ou animer des objets .
- Dans la fonction
mouseMoved()
du programme principal, mettez à jour ce statut de mise en évidence visuelle de la ville sous le curseur et de la dernière ville désignée. N'oubliez pas d'appeler la méthode redraw()
.
Étape 6 : Révéler le nom des villes
Effet désiré: Afficher dynamiquement le nom de la ville placée sous le curseur alors que l'utilisateur déplace la souris.
- Modifiez la méthode
draw()
de votre classe City
de telle sorte que le nom de la ville soit affiché à droite de la ville quand la variable de sélection de la ville est à true
. Testez le programme plusieurs fois jusqu'à ce que le texte soit correctement aligné
Astuce: Vous pouvez utiliser la méthode textAlign()
pour l'alignement vertical.
- Afficher un rectangle transluscent sous le texte pour améliorer la lisibilité.
Astuce: vous pouvez vérouiller la hauteur du rectangle à la main et utiliser textWidth()
pour calculer sa largeur.
Étape 7: Verouillage de la ville
- Ajoutez un drapeau booléen de sélection dans la classe
City
qui sera activé quand l'utilisateur clique sur la ville, et affichez le nom de la ville avec une couleur différente.
Étape 8: Slider de contrôle spécifiant une seule valeur de filtrage
Étape 9: Slider d'intervale (range slider) spécifiant une plage de valeurs à filtrer
- Modifiez votre slider de contrôle pour qu'il permette de spécifier deux valeurs, et que votre carte n'affiche une ville que si sa population se situe entre les deux valeurs spécifiées.
Étape 10: Afficher la distribution de la population
- Indiquez la distribution des villes dans ce range slider, en utilisant soit un histogramme, soit une palette de couleur.
Étape 11: facilité de navigation
- Ajoutez les techniques de navigation pan et zoom.
- etc.
Dernière étape (obligatoire)
N'oubliez pas que vous devez rentre votre TP.
Voir les
instructions pour la remise du TP.
Le contenu de ce TP est inspiré des cours de Fanny Chevalier, Petra Isenberg, Pierre Dragicevic, Charles Perin, Wesley Willet, Frédéric Vernier et Jean-Daniel Fekete (www.aviz.fr).