Baie d'Antalaha : diorama 3D animé jour et nuit

README.md · 4.3 Ko

# La baie d'Antalaha en 3D (Zdog, niveau avancé)

## Cas d'usage

L'animation d'accueil d'un site touristique : un **diorama** de la baie d'Antalaha avec une île et
ses palmiers, une **mer qui ondule**, une **pirogue à balancier** qui flotte et avance, le **soleil et la
lune** qui traversent le ciel, des nuages et des oiseaux. Un curseur **« heure de la journée »** change
toute la palette : aube, jour, crépuscule, nuit. On fait tourner la maquette au doigt ou à la souris.

## Arborescence

```
zdog-baie-antalaha/
├── index.html        Page : canevas + dégradé de ciel CSS, commandes, plan du code
├── site.json         Titre, description et étiquettes pour le portail
├── css/
│   └── style.css     Mise en page mobile d'abord (canevas de hauteur adaptative)
├── js/               Un fichier par rôle, chargés dans cet ordre :
│   ├── config.js     Espace de noms global « Baie », constantes, qualité mobile, tirerVersLeFond()
│   ├── palette.js    Couleurs selon l'heure : clés (nuit, aube, jour, crépuscule) + interpolation
│   ├── mer.js        Mer : rangées de points + somme de sinus, modification directe des points
│   ├── palmier.js    Fabrique de palmiers : tronc et palmes en courbes de Bézier, hasard à graine
│   ├── pirogue.js    Pirogue à balancier, cap et houle, sillage en pool d'objets réutilisés
│   ├── ciel.js       Soleil (halo), lune, étoiles, nuages, oiseaux
│   ├── scene.js      Assemblage de la scène + île (plage et colline) ; interface mettreAJour / appliquerPalette
│   └── main.js       Illustration, interface, Zdog.Dragger, boucle d'animation avec deltaTime
└── medias/           Icônes (pause, lecture, soleil, lune) et motif de vagues du portail (libres de droits)
```

## Notions abordées

- Architecture en **modules sans import** : espace de noms global et fonctions auto-appelées (IIFE)
- **Fonctions fabriques** qui renvoient une petite interface `{ mettreAJour, appliquerPalette }`
- La **boucle d'animation** `requestAnimationFrame` avec **deltaTime** : mouvement = vitesse × dt, indépendant des images/s
- **Pause** : dt = 0 pour la scène, mais le dessin continue (on peut toujours tourner la vue)
- **Performances** : aucune forme créée dans la boucle, tableaux et objets de travail réutilisés, **pool** de gouttes de sillage, palette recalculée ~12 fois/s seulement, qualité réduite sur mobile
- L'**ordre de rendu** de Zdog (tri par profondeur) et comment le forcer (`updateSortValue`) pour la mer et la plage
- Animer des points d'un `path` sans reconstruire la forme (`pathCommands[i].points[0].y`) et pourquoi éviter `updatePath()` à chaque image
- Courbes de **Bézier** (`bezier`), `Hemisphere`, `Cone`, `Ellipse`, `Shape` sans `path` (sphères), `Group` (`updateSort`, `visible`)
- Hiérarchie d'ancres : cap (rotation y) puis houle (rotation z/x) ; ordre des rotations de Zdog (z, y, x)
- **Trigonométrie utile** : sinus pour les vagues et le balancement, cosinus/sinus pour les orbites, `atan2` pour le cap
- Palette : interpolation de couleurs (`lerp`), `Zdog.easeInOut`, `Zdog.modulo`, couleurs `rgba` semi-transparentes
- `dragRotate`, `onDragStart`/`onDragEnd`, et `Zdog.Dragger` utilisé seul (ruban du temps)
- Canevas net et adaptatif : `resize: true`, `onResize`, `devicePixelRatio`, zoom selon la largeur, bornage de l'inclinaison de la vue
- Accessibilité : `aria-label`, `aria-pressed`, `aria-valuetext`, `prefers-reduced-motion`, cibles tactiles de 44 px

## Idées d'exercices

1. Ajoutez une couleur de « soirée de cyclone » dans `palette.js` (nouvelle clé à 15 h, par exemple).
2. Ajoutez un deuxième bateau : appelez `Baie.creerPirogue` une seconde fois (indice : rendez le rayon de la trajectoire et la vitesse paramétrables).
3. Faites varier la houle avec l'heure (plus forte à l'aube) en modulant `AMPLITUDE_1` dans `mer.js`.
4. Ajoutez des poissons qui sautent hors de l'eau avec un petit arc (`Math.sin`) et un pool d'objets.
5. Ajoutez un phare sur la colline dont la lumière tourne la nuit (un `Cone` qui pivote).
6. Mesurez : changez `Baie.QUALITE` et observez les « images/s » affichées en bas à droite du canevas.
7. Ajoutez un bouton de capture d'image : `canvas.toBlob(...)` puis un lien de téléchargement (`allow-downloads` est autorisé dans le bac à sable).