TP4-5
Exercice 1
Contexte
Dans le cadre de la gestion des événements sur une page web et de la mémorisation des choix faits par un utilisateurs, on s'intéresse à la création d'une application de dessin en pixel-art.
Le pixel-art consiste en la réalisation d'image d'une résolution volontairement faible et avec un nombre de couleurs limité, permettant de reproduire l'effet "retro" des premières machines à affichage numérique colorisé.
Travail demandé
La page web comportera :
- - Un titre et une brève description de ce qu'est le pixel-art
- - Une grille de 25 x 25 "pixels" (à vous de choisir comment les représenter en HTML : div, tableau, etc...)
- - Un ensemble de 9 boutons permettant de choisir chacun une couleur différente. Chaque bouton est de la couleur qu'il premet de sélectionner, et cette couleur est choisie aléatoirement.
- - Un 10eme bouton permettant de sélectionner du blanc.
- - Une zone permettant de visualiser la couleur actuellement choisie
Le but est que l'utilisateur puisse appuyer sur un bouton pour sélectionner une couleur. Ensuite, chaque fois qu'il cliquera sur un "pixel" de la grille, celui-ci prendra la couleur sélectionnée.
- Créez la page web telle que décrite ci-dessus.
- Ajoutez ensuite un bouton permettant de réinitialiser le dessin.
Il est très (très) conseillé d'utiliser les fonctions suivantes :
En bonus, on pourra ajouter les fonctionalité suivantes :
- - Permettre à l'utilisateur de choisir le nombre de couleurs (et donc de bouton) qu'il utilisera. Ce nombre sera compris entre 5 et 20.
- - Passer en nuance de gris. En fonction du nombre de couleurs choisi par l'utilisateur, chaque bouton se verra attribuer une nuance de gris (R=V=B). Les différentes nuances devront être régulièrement espacées.
- - Avec un bouton, donner la possibilité pour le mode couleur de regénérer aléatoirement les couleurs disponibles dans la palette. Un pop-up avec un message d'erreur devra apparaître si l'utilisateur travaille en nuance de gris.