NIHM : nouvelles Interactions Humain-Machine



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.



É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.



É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.



É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.



É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.



Étapes optionnelles



Pour les gourous en Processing (optionnel)



Dernière étape (obligatoire)

N'oubliez pas que vous devrez mettre votre application sur le Web.
Voir les instructions pour la remise du TP.


Le contenu de ce TP est inspiré des cours de Petra Isenberg, Pierre Dragicevic, Charles Perin, Wesley Willet, Frédéric Vernier et Jean-Daniel Fekete (www.aviz.fr).