LOG745, 2012 hiver, Travail Pratique 1 (TP1)

Allez chercher le code ici. Vous avez besoin de télécharger et sauvegarder les deux fichiers .java et les deux fichiers .html. Compilez les fichiers .java pour générer les fichiers .class. Ensuite, ouvrez un des fichiers .html dans un éditeur de texte, comme Notepad ou Wordpad sur MS Windows, et remarquez la balise applet qui spécifie les dimensions en pixels de l'applet ainsi que le fichier .class principal à charger. Ensuite, pour lancer l'applet, chargez un des fichiers .html dans un fureteur web, ou bien lancez

appletviewer nom_de_fichier.html

Pour ce travail pratique, vous avez à effectuer des changements au code source de l'applet. Les changements à faire sont énumérés ci-dessous. Vouz devez effectuer les changements 1 et 2 obligatoirement, et aussi effectuer deux changements à votre choix parmi les changements 3, 4 et 5. Donc, au total, vous avez à effectuer quatre changements.

Voici une capture d'écran de la version initiale de l'applet, qu'on vous fournit:

Remarquez que dans la version initiale, appuyer sur le bouton "Clear" fait redessiner ce bouton avec des couleurs inversés, pour donner un retour visuel:

Changement 1 (obligatoire): modifiez l'applet pour dessiner des ronds avec chaque mouvement de glissement de souris, en modifiant la méthode mouseDragged(). Une fois ce changement effectué, un glissement lent devrait produire un trait foncé, et un glissement rapide devrait produire un trait plus léger qui permet même de voir les ronds individuels:

Changement 2 (obligatoire): rajouter deux glissers dans la marge droite de l'applet, permettant de régler la transparence et le rayon du pinceau. Vous devez créer ces glisseurs par vous méme, sans utiliser une classe existante de glisseur (comme java.awt.Scrollbar ou javax.swing.JSlider). L'utilisateur devrait pouvoir cliquer et glisser sur vos glisseurs pour les ajuster.

Le glisseur de gauche devrait régler la transparence (ou alpha) du pinceau. Quand ce glisseur est dans sa position supérieure (maximum), cela devrait correspondre à un alpha de 1.0, c.-à-d. un pinceau opaque qui dessine des ronds noirs opaques. Quand ce glisseur est dans sa position inférieure (minimum), cela devrait correspondre à un alpha de 0.0, c.-à-d. un pinceau complètement transparent qui dessine des ronds invisibles.

Le glisseur de droit devrait régler le rayon du pinceau. Quand ce glisseur est dans sa position supérieure (maximum), cela devrait correspondre à un pinceau assez large, par exemple un rayon de 40 pixels. Quand ce glisseur est dans sa position inférieure (minimum), cela devrait correspondre à un pinceau ayant un rayon autour de 1 ou 0 pixels.

Changement 3 (optionnel): afficher une prévisualisation du pinceau (montrant la transparence et le rayon actuels) situé en dessous du curseur.

Changement 4 (optionnel): rajouter un bouton de "toggle" permettant d'activer un mode de symétrie. Quand le mode de symétrie est activé, le pinceau devrait dessiner à deux endroits en même temps: sa position actuelle, et la position symétrique autour d'un axe vertical.

Le bouton devrait agir comme une case à cocher avec un état "vrai" et un état "faux". Lorsque le bouton est dans l'état "vrai", c.-à-d. que le mode de symétrie est activé, le bouton devrait montrer un retour visuel (comme le fond bleu dans les captures d'écran ci-dessous) pour indiquer son état. (Une autre possibilité pour montrer l'état actuel serait de basculer entre deux étiquettes comme "[ ] Symétrie" et "[X] Symétrie"). On vous conseille de vous inspirer et/ou modifier et/ou réutiliser le code dans MyButton.java pour réaliser ce bouton pour le mode de symétrie.

Bout de code qui pourrait vous aider ou vous inspirer:

g.fillOval( mouse_x - r, mouse_y - r, 2*r, 2*r );
if (isSymmetryModeActive)
   g.fillOval( canvasWidth-1 - mouse_x - r, mouse_y - r, 2*r, 2*r );

Changement 5 (optionnel): Modifier la façon que les traits sont déssinés pour ne plus voir de ronds individuels. Utilisez java.awt.geom.Path2D, Path2D.moveTo(), Path2D.lineTo(), et Graphics2D.draw().

Bout de code qui pourrait vous aider ou vous inspirer:

Path2D path2D = new Path2D.Float();
...
path2D.reset();
path2D.moveTo( premierPoint_x, premierPoint_y );
pour chaque point que vous voulez rajouter au path2D, faites
    path2D.lineTo( nouveauPoint_x, nouveauPoint_y );
...
Graphics2D g = ...;
BasicStroke bs = new BasicStroke( radius, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND );
g.setStroke( bs );
g.setColor( new Color(0.0f,0.0f,0.0f, alpha) );
g.draw( path2D );

// Notez bien: si vous voulez ensuite dessiner d'autres choses,
// et avoir des lignes avec une épaisseur de 1 pixel,
// il faut remettre les paramètres de "stroke" à leurs valeurs par défaut:
g.setStroke( new BasicStroke() );

tandis que CAP_SQUARE et JOIN_BEVEL donneraient

et CAP_BUTT et JOIN_MITER donneraient

(Les trois images ci-dessus ont été adaptées d'images à http://www.uta.fi/~jl/pguibook/graphics.html)

Ce travail pratique se fait individuellement. Chaque étudiant(e) doit remettre sa propre solution.

Le travail pratique compte pour 5% de votre note finale. Évaluation:

• 1 point pour avoir respecté les consignes de remise (courriel avec le bon sujet, ayant comme p.j. un fichier .zip avec le bon nom, contenant un seul répertoire avec le bon nom et qui contient seulement vos fichiers .java; code qui compile et s'exécute avec appletviewer sans erreurs)
• 4 points pour les 4 changements (si vous remettez le travail après mercredi le 18 janvier, vous devez effectuer les 5 changements)
• -1 point si l'applet fonctionne mal lorsque les dimensions dans la balise applet du fichier .html sont changés (Conseil: tester votre code avec différentes dimensions pour ne pas perdre de points)

Chaque applet et son code source sera mis sur un site web caché derrière un mot de passe, visible aux étudiants de la classe.

À remettre mercredi le 18 janvier, avant minuit, par courriel au prof McGuffin

Après le 18 janvier, vous aurez à effectuer les 5 changements, et vous aurez jusqu'au 25 janvier comme limite finale.

Le sujet de votre courriel doit étre la chaîne suivante:

[LOG745 TP1] Nomdefamille, Prénom

745-tp1-Nomdefamille-Prenom.zip

745-tp1-AsterixGaulois-MarieFrancoise.zip

745-tp1-Nomdefamille-Prenom