Dans ce projet, l’heure n’est plus simplement affichée : elle est reconstruite, stylisée et animée sous forme de pixel‑art. Chaque chiffre, chaque deux‑points, chaque changement de seconde devient un petit événement graphique.
Le résultat est une horloge numérique rétro‑moderne, colorée, vivante et entièrement générée par code.
Une police bitmap 5×7 conçue pour le temps
Au cœur du système se trouve une police bitmap 5×7, spécialement définie pour les chiffres de 0 à 9 et le symbole « : ».
Chaque caractère est décrit comme un motif de 35 bits, représentant des pixels allumés ou éteints. Cette approche minimaliste rappelle les écrans LED des années 80, tout en offrant une grande liberté de stylisation.
Cette police n’est pas importée : elle est codée à la main, ligne par ligne, pixel par pixel. Une manière de maîtriser totalement le rendu visuel.
Une palette de couleurs vibrante
Pour donner du rythme à l’affichage, chaque position de l’heure adopte une couleur différente.
La palette utilisée mélange :
- rose vif
- orange brûlant
- jaune lumineux
- violet profond
- bleu électrique
- vert turquoise
- rose framboise
Ces couleurs alternent à chaque caractère, créant une horloge dynamique, presque musicale dans sa composition visuelle.
Une toile pensée pour HH:MM:SS
L’horloge affiche huit caractères : deux chiffres pour les heures, deux pour les minutes, deux pour les secondes, séparés par deux « : ».
La toile est dimensionnée pour accueillir ces huit blocs pixelisés, avec des marges harmonieuses et un fond sombre (#161B26) qui met en valeur les couleurs éclatantes.
Un rafraîchissement en temps réel
Le programme fonctionne en boucle continue :
- Il récupère l’heure courante.
- Il formate les valeurs pour garantir l’affichage sur deux chiffres.
- Il efface la toile.
- Il redessine chaque caractère pixel par pixel.
- Il affiche la bannière.
- Il attend un court instant avant de recommencer.
Ce cycle rapide donne l’impression d’une horloge animée, fluide, qui vit au rythme des secondes.
Un dessin pixel par pixel
Pour chaque caractère :
- le programme lit son motif bitmap,
- parcourt les 7 lignes et 5 colonnes,
- dessine un petit rectangle coloré pour chaque pixel actif,
- avance le curseur pour placer le caractère suivant.
Cette construction minutieuse donne un rendu propre, net, parfaitement lisible, tout en conservant le charme du pixel‑art.
Une horloge rétro‑moderne, expressive et entièrement générée par code
Ce projet combine :
- une police bitmap artisanale,
- une palette contemporaine,
- un rafraîchissement en temps réel,
- un rendu pixelisé élégant.
Le résultat est une horloge unique, à la fois technique et artistique, qui transforme le temps en une expérience visuelle.
Programme :
@ Police bitmap 5x7 (chiffres 0 à 9 et deux - points)
police est un tableau
// Index 0 à 9 : chiffres '0' à '9', Index 10 : ':' (35 caractères chacun)
police ajoute '01110100111010110101101011100101110' // 0 (index 0)
police ajoute '00100011000010000100001000010001110' // 1 (index 1)
police ajoute '01110100010000100110010001000011111' // 2 (index 2)
police ajoute '11111000100010000010000011000101110' // 3 (index 3)
police ajoute '00010001100101010010111110001000010' // 4 (index 4)
police ajoute '11111100001111000001000011000101110' // 5 (index 5)
police ajoute '00110010001000011110100011000101110' // 6 (index 6)
police ajoute '11111000010001000100010000100001000' // 7 (index 7)
police ajoute '01110100011000101110100011000101110' // 8 (index 8)
police ajoute '01110100011000101111000010001001100' // 9 (index 9)
police ajoute '00000001100011000000001100011000000' // : (index 10)
@ Réglages et Palette
taille_case, marge_x, marge_y, espacement est un nombre
taille_case vaut 12
marge_x vaut 20
marge_y vaut 25
espacement vaut 1
couleurs est un tableau
couleurs vaut [#FF006E, #FB5607, #FFBE0B, #8338EC, #3A86FF, #06D6A0, #EF476F]
@ toile dimensionnée pour le format HH:MM:SS (8 caractères)
nb, larg, haut est un nombre
nb vaut 8
larg vaut marge_x * 2 + nb * (5 + espacement) * taille_case
haut vaut marge_y * 2 + 7 * taille_case
larg vaut limiter(larg, 1, 1000)
Banniere est une toile
dimension(Banniere, larg, haut)
@ processus de rafraîchissement temps réel
processus Horloge()
tant que vrai
// Récupération de l'heure courante via maintenant()
maint est une heure
maint vaut maintenant()
h_num, m_num, s_num est un nombre
h_num vaut heure_de(maint)
m_num vaut minute_de(maint)
s_num vaut seconde_de(maint)
// Formate en 2 chiffres (01, 02, etc.)
str_h, str_m, str_s est un texte
si h_num < 10 alors
str_h vaut "0" + convertir_texte(h_num)
sinon
str_h vaut convertir_texte(h_num)
fin si
si m_num < 10 alors
str_m vaut "0" + convertir_texte(m_num)
sinon
str_m vaut convertir_texte(m_num)
fin si
si s_num < 10 alors
str_s vaut "0" + convertir_texte(s_num)
sinon
str_s vaut convertir_texte(s_num)
fin si
texte_heure est un texte
texte_heure vaut str_h + ":" + str_m + ":" + str_s
// Effacement et redessin
effacer(Banniere)
remplir(Banniere, #161B26)
curseur_x est un nombre
curseur_x vaut marge_x
pour n de 1 à nb
lettre est un texte
lettre vaut copier(texte_heure, n, 1)
// Indexation directe sans alphabet
idx est un nombre
si lettre = ":" alors
idx vaut 10
sinon
idx vaut convertir_nombre(lettre)
fin si
g est un texte
g vaut police[idx]
ic, pos, px, py est un nombre
bit, coul est un texte
ic vaut (n - 1) mod longueur(couleurs)
coul vaut couleurs[ic]
pour li de 0 à 6
pour co de 0 à 4
pos vaut li * 5 + co + 1
bit vaut copier(g, pos, 1)
si bit = '1' alors
px vaut curseur_x + co * taille_case
py vaut marge_y + li * taille_case
rectangle(Banniere, px, py, taille_case - 2, taille_case - 2, coul)
fin si
fin pour
fin pour
curseur_x ajoute (5 + espacement) * taille_case
fin pour
affiche Banniere
pause 250
fin tant que
fin processus
@ Démarrage de l'horloge
Horloge()
CoddyRun
