Liens utiles

• Les fonctions du contexte graphique
• La création d'objets graphiques et affichage dans le contexte graphique
• La méthode de calcul de gradient linéaire de couleur
• La méthode de calcul de gradient radial de couleur et sa spécification
• Fichier utile pour commencer le tp

Affichage des données avec des couleurs

1. Lire le fichier de démarrage du TD
2. Ecrire en javascript une structure de données pour représenter des ballons (ou des bulles) avec:
• un constructeur pour créer des bulles à partir des paramètres donnés: x, y, r (rayon) et c (couleur) et
• une méthode pour afficher les ballons-bulles
3. Coloration "locale"
• Modèle RGB: créer une méthode javascript qui génère une première palette de couleurs en utilisant une stratégie simple: faire varier une des composantes rgb en gardant les deux autres fixes (par exemple, on peut garder r à 64, b à 128 et faire varier v). Votre résultat devrait ressembler au résultat de la figure suivante (a).



• Modèle HSLA: créer une méthode javascript qui génère une deuxième palette de couleurs en utilisant le modèle hsla pour faire varier l'une des composantes (la teinte, la saturation, la brillance ou la transparence), tout en gardant les trois autres composantes fixes. Votre résultat devrait ressembler au résultat de la figure suivante.



• Composition de plusieurs couleurs par ballon: créer une troisième palette de couleur dans laquelle la couleur d'un ballon est composée d'un dégradé entre 2 couleurs. La première couleur est obtenue comme dans la question précédente, et la deuxième couleur est une couleur analogue de la première couleur. Le dégradé peut être réalisé par la méthode de gradient linéaire du canvas ( createLinearGradient). Votre résultat devrait ressembler au résultat de la figure suivante (b).



• Dégradés monochromes de couleurs: créer une quatrième palette de couleurs qui donne un effet de dégradé sur la couleur d'un ballon en jouant sur la luminosité ou la saturation et en utilisant un dégradé radial ou un dégradé linéaire ( createLinearGradient).



4. Coloration "globale"
• Mettre en oeuvre une coloration qui renforce les attributs de position. Cette méthode consiste à utiliser des dégradés définis sur tout le canvas. Avec un gradient linéaire comme celui produit par la méthode createLinearGradient configuré pour tout le canvas.



• Question facultative: écrire une deuxième méthode qui utilise la méthode de remplissage par un gradient radial (dont la spécification est différente de celle de la méthode de remplissage par gradient radial donnée en css).

Changement de palette

L'affichage par défaut se fait en utilisant la première palette de couleurs. Un double-clic sur le canvas modifie l'encodage couleur en utilisant la palette suivante.

Animation

En utilisant la méthode setInterval, créer une animation qui permette aux bulles de passer de la position de y = 0 au y calculé d'après les données. L'animation démarre au chargement de la page.