Horloge d'Antalaha - décor jour et nuit (p5.js)

README.md · 2.5 Ko

# Horloge d'Antalaha (p5.js, niveau débutant)

## Cas d'usage
Une horloge analogique qui affiche l'**heure locale** de l'appareil, devant un paysage
de la baie d'Antalaha. Le décor change avec l'heure : aube, jour, crépuscule, nuit
(soleil et lune qui se déplacent, étoiles, couleur de la mer). Utile par exemple sur la
page d'accueil d'un site communautaire.

Un curseur permet de **simuler une heure** pour voir le décor de nuit en plein jour.

## Arborescence
```
p5-horloge/
├── index.html      Page : titre, zone du canevas, curseur, chargement des scripts
├── site.json       Titre, description et mots-clés pour le portail
├── README.md       Ce fichier
├── css/
│   └── style.css   Mise en page mobile d'abord (une colonne, boutons tactiles)
└── js/
    ├── config.js   Constantes réglables (tailles, couleurs des étapes de la journée)
    ├── decor.js    Fonctions de dessin du paysage (ciel, astres, mer, palmiers)
    ├── horloge.js  Lecture de l'heure, cadran et aiguilles
    └── sketch.js   setup(), draw(), windowResized() et liaison avec la page HTML
```
Ordre de chargement : `p5.min.js` -> `config.js` -> `decor.js` -> `horloge.js` -> `sketch.js`.

## Notions abordées
- `setup()` et `draw()`, le cycle de base d'un programme p5.js
- `createCanvas()`, `resizeCanvas()`, `windowResized()` (canevas adaptatif)
- Système de coordonnées (origine en haut à gauche, y vers le bas)
- `hour()`, `minute()`, `second()`, `millis()`
- `map()`, `constrain()`, `lerp()`, `lerpColor()`
- `push()`, `pop()`, `translate()`, `rotate()` et les radians (`TWO_PI`)
- `line()`, `circle()`, `bezier()`, `beginShape()`/`vertex()`/`endShape()`
- `fill()`, `stroke()`, `strokeWeight()`, transparence (alpha)
- `text()`, `textAlign()`, `textSize()`, `nf()`
- Trigonométrie simple : `sin()` et `cos()` pour placer un point sur un cercle
- `frameRate()`, `describe()` (accessibilité)
- Séparer le code en plusieurs fichiers et en fonctions

## Idées d'exercices
1. Changer la couleur du ciel de l'aube dans `config.js`.
2. Ajouter une étape « midi » avec un ciel très clair.
3. Ajouter une aiguille d'alarme réglable avec un second curseur.
4. Faire glisser la trotteuse en continu (utiliser les millisecondes) au lieu de la faire sauter.
5. Dessiner quelques nuages qui défilent lentement (`noise()` ou `frameCount`).
6. Ajouter un petit bateau de pêche qui traverse la baie.
7. Afficher l'heure de lever/coucher du soleil sous l'horloge.