Pluviométrie mensuelle - tableau de bord (p5.js)

README.md · 3.2 Ko

# Pluviométrie mensuelle (p5.js, niveau intermédiaire)

## Cas d'usage
Un tableau de bord graphique de la pluie mensuelle à Antalaha : histogramme qui « pousse » à
l'apparition, bascule vers une courbe, choix de l'année ou de la moyenne, infobulle au survol
(souris) ou au toucher (doigt), axes gradués, légende.

> **Toutes les données sont des valeurs d'illustration inventées** pour apprendre.
> Elles ne sont pas des mesures officielles et ne doivent pas être citées comme telles.

## Arborescence
```
p5-pluviometrie/
├── index.html         Page : bandeau « valeurs d'illustration », commandes, canevas, tableau HTML
├── site.json          Titre, description, mots-clés pour le portail
├── README.md          Ce fichier
├── css/
│   └── style.css      Mise en page mobile d'abord, tableau qui défile dans sa boîte
├── data/
│   └── pluie.js       Les données : mm par mois et par année (tableaux JavaScript)
└── js/
    ├── config.js      Constantes : couleurs, marges, vitesses d'animation
    ├── donnees.js     Calculs sans dessin : moyenne, maximum, résumé, tableau HTML
    ├── axes.js        Grille, graduations, noms des mois, légende, pointillés
    ├── graphiques.js  Histogramme et courbe (avec opacité pour le fondu)
    ├── interaction.js Souris, doigt, sélection d'un mois, infobulle
    └── sketch.js      setup(), draw(), animation, resize, commandes HTML
```
Ordre : `p5.min.js` -> `data/pluie.js` -> `config.js` -> `donnees.js` -> `axes.js` ->
`graphiques.js` -> `interaction.js` -> `sketch.js`.

Pourquoi les données sont dans un `.js` : les sites sont exécutés dans un bac à sable
qui empêche `loadJSON()`/`loadTable()` de lire nos fichiers. On déclare donc les tableaux directement.

## Notions abordées
- Organiser un projet en plusieurs fichiers (données / calculs / dessin / interaction)
- Fonctions de dessin réutilisables avec paramètres
- `map()` pour convertir une valeur en position (mise à l'échelle, axe inversé)
- `lerp()` et `lerpColor()` pour animer et colorer ; animation indépendante du nombre d'images par seconde (`deltaTime`)
- `constrain()` pour garder une valeur dans des bornes
- Événements : `mouseMoved`, `mouseDragged`, `mousePressed`, `touchStarted`, `touchMoved`, tableau `touches`
- `beginShape()`, `vertex()`, `curveVertex()`, `endShape()`
- Texte : `textWidth()`, `textAlign()`, `textStyle()`, `textSize()`
- `drawingContext.setLineDash()` pour tracer des pointillés
- Fondu enchaîné entre deux représentations
- Accessibilité : `describe()`, tableau HTML équivalent, contrôles HTML natifs
- Canevas adaptatif : `windowResized()`, `resizeCanvas()`, noms de mois selon la place disponible

## Idées d'exercices
1. Ajouter une année dans `data/pluie.js` et vérifier que tout se met à jour.
2. Colorer en rouge les mois dépassant la moyenne de plus de 20 %.
3. Ajouter une troisième vue : barres horizontales.
4. Afficher le cumul annuel dans un coin du graphique.
5. Animer les barres l'une après l'autre (décalage selon l'indice du mois).
6. Permettre de comparer deux années côte à côte.
7. Ajouter un bouton « télécharger le tableau en CSV ».