Une horloge animée
Dessiner une horloge à aiguilles qui donne la vraie heure : un joli projet qui mélange les dates, le dessin, un peu de géométrie et l'animation.
Lire l'heure
maintenant() donne l'heure du moment. Trois fonctions en extraient les morceaux :
h est une heure
h vaut maintenant()
affiche 'Il est ' + convertir_heure(h)
affiche 'Heures : ' + heure_de(h)
affiche 'Minutes : ' + minute_de(h)
affiche 'Secondes : ' + seconde_de(h)
De l'heure à l'angle
Une aiguille fait un tour complet, soit 360 degrés.
- L'aiguille des secondes fait un tour en 60 secondes : 360 / 60 = 6 degrés par seconde.
- L'aiguille des minutes fait un tour en 60 minutes : 6 degrés par minute.
- L'aiguille des heures fait un tour en 12 heures : 30 degrés par heure. Et elle avance doucement entre deux heures : un demi-degré de plus par minute.
À 3 h 00, l'aiguille des heures est à 3 × 30 = 90 degrés : un quart de tour, elle pointe vers la droite. C'est bien ça !
Question : Quel est l'angle de l'aiguille des minutes à la minute 45 ? — 270 degrés. 45 × 6 = 270 degrés : trois quarts de tour, l'aiguille pointe vers la gauche.
Dessiner une aiguille
Une aiguille est une ligne qui part du centre. Pour trouver son extrémité, on utilise cosinus et sinus, comme pour placer des points sur un cercle.
Un détail : pour cosinus et sinus, l'angle 0 pointe vers la droite. Sur une horloge, le 0 (midi) est en haut. On retire donc 90 degrés.
t est une toile
dimension(t, 300, 300)
remplir(t, #0D1117)
cercle(t, 150, 150, 135, #161B22)
procédure aiguille(degres, portee, teinte, epaisseur)
angle est un nombre vaut radians(degres - 90)
boutX est un nombre vaut 150 + portee * cosinus(angle)
boutY est un nombre vaut 150 + portee * sinus(angle)
ligne(t, 150, 150, boutX, boutY, teinte, epaisseur)
fin procédure
// 10 h 10 min 30 s
appelle aiguille(10 * 30 + 10 * 0.5, 70, #E6EDF3, 6)
appelle aiguille(10 * 6, 105, #E6EDF3, 4)
appelle aiguille(30 * 6, 120, #F85149, 2)
cercle(t, 150, 150, 6, #F85149)
affiche t
La procédure reçoit l'angle en degrés, la longueur de l'aiguille, sa couleur et son épaisseur. L'aiguille des heures est courte et épaisse, celle des secondes longue, fine et rouge.
Le cadran
Soixante graduations, une tous les 6 degrés. Celles des heures (une sur cinq) sont plus grosses :
t est une toile
dimension(t, 300, 300)
procédure cadran()
remplir(t, #0D1117)
cercle(t, 150, 150, 135, #161B22)
angle est un nombre
px est un nombre
py est un nombre
pour i de 0 à 59
angle vaut radians(i * 6)
px vaut 150 + 120 * cosinus(angle)
py vaut 150 + 120 * sinus(angle)
si i mod 5 = 0 alors
cercle(t, px, py, 4, #E6EDF3)
sinon
cercle(t, px, py, 1, #8B949E)
fin si
fin pour
fin procédure
appelle cadran()
affiche t
i mod 5 = 0 est vrai pour 0, 5, 10, 15... : les douze graduations des heures.
L'horloge complète
On assemble tout dans une boucle : lire l'heure, effacer, redessiner le cadran puis les trois aiguilles.
t est une toile
dimension(t, 300, 300)
procédure cadran()
remplir(t, #0D1117)
cercle(t, 150, 150, 135, #161B22)
angle est un nombre
px est un nombre
py est un nombre
pour i de 0 à 59
angle vaut radians(i * 6)
px vaut 150 + 120 * cosinus(angle)
py vaut 150 + 120 * sinus(angle)
si i mod 5 = 0 alors
cercle(t, px, py, 4, #E6EDF3)
sinon
cercle(t, px, py, 1, #8B949E)
fin si
fin pour
fin procédure
procédure aiguille(degres, portee, teinte, epaisseur)
angle est un nombre vaut radians(degres - 90)
boutX est un nombre vaut 150 + portee * cosinus(angle)
boutY est un nombre vaut 150 + portee * sinus(angle)
ligne(t, 150, 150, boutX, boutY, teinte, epaisseur)
fin procédure
h est une heure
heures est un nombre
minutes est un nombre
secondes est un nombre
tant que non touche_pressée('échap')
h vaut maintenant()
heures vaut heure_de(h) mod 12
minutes vaut minute_de(h)
secondes vaut seconde_de(h)
effacer(t)
appelle cadran()
label(t, 118, 220, convertir_heure(h), #8B949E, 16)
appelle aiguille(heures * 30 + minutes * 0.5, 70, #E6EDF3, 6)
appelle aiguille(minutes * 6, 105, #E6EDF3, 4)
appelle aiguille(secondes * 6, 120, #F85149, 2)
cercle(t, 150, 150, 6, #F85149)
affiche t
pause 200
fin tant que
heure_de(h) mod 12 ramène 15 h à 3 : le cadran n'a que douze heures.pause 200 : l'horloge est redessinée cinq fois par seconde, c'est largement suffisant.- L'heure est aussi écrite en chiffres sous le centre, avec
label.
Appuie sur Échap pour arrêter l'horloge.
Pour aller plus loin
- Écris les nombres 12, 3, 6 et 9 sur le cadran avec
label. - Change les couleurs selon le moment : cadran clair le jour, sombre la nuit.
- Transforme l'horloge en minuteur : une aiguille qui fait un tour en 60 secondes à partir du lancement, grâce à
chrono().
En résumé
heure_de, minute_de et seconde_de découpent une heure.- 6 degrés par seconde et par minute, 30 degrés par heure.
- L'extrémité d'une aiguille se calcule avec
cosinus et sinus, après avoir retiré 90 degrés. - Une boucle avec
pause relit l'heure et redessine tout.
