Projet | ​​Mini projet - Processing | Construction d'une horloge analogique

Il s'agit de contruire une horloge comme celle présentée ci-contre.

Les paragraphes suivants nous guideront dans l'écriture de ce programme. Nous consulterons également pour cela la ​référence de Processing exposant les instructions nécessaires.

Nous écrivons le programme afin de dessiner l'horloge sans ses aiguilles.

1. Recopier et tester le programme ci-contre dans l'IDE de Processing.
2. Rechercher dans la référence de Processing, la fonction qui empêche le tracé du périmètre du cadran circulaire.
3. Modifier la fonction point() afin de tracer tous les disques des heures comme indiqués.

1. Tracer la petite aiguille de haut en bas à partir du coin supérieur gauche de la fenêtre à l'aide de la fonction rect(). Voir la référence de Processing.
2. Réaliser l'essai qui, après translation, trace l'aiguille comme illustré ci-contre, .
3. La valeur 2 * PI * (hour() % 12) / 12 donne l'angle, en radians, de l'aiguille correctement orientée à partir de midi. Réaliser la rotation afin d'orienter l'aiguille selon l'heure actuelle.
4. Placer le code ajouté dans une seconde fonction et faire de sorte que le résultat reste encore correct en rétablissant l'appel de la fonction point().

1. Reprendre les activités du paragraphe précédent pour chacune de ces deux aiguilles.
2. Rétablir l'appel des fonctions placées initalement en commentaire afin de finaliser l'affichage de l'horloge.

• Compléter la valeur 2 * PI * (hour() % 12) / 12 afin que l'aiguille des heures pointe entre deux repères quand nécessaire. Ex : à 5h30 l'aiguille cible entre les repères des chiffres 5 et 6. Voir ci-contre.
• AJouter la date comme indiqué ci-contre à l'aide de la référence de Processing.
• Suivre les instructions depuis la page d'accueil de Processing, onglet p5.js, afin d'intégrer l'horloge sur une page web. Voir un ​exemple ici.