Logo 3D animé pour un site d'association

README.md · 2.9 Ko

# Logo 3D animé pour un site d'association (Zdog, niveau débutant)

## Cas d'usage

L'association fictive « Les Amis d'Antalaha » veut un logo qui se remarque dans l'en-tête de son
site. Ici, un **losange** et la **lettre A** sont dessinés en pseudo-3D avec [Zdog](https://zzz.dog)
(v1.1.3) : le logo se **balance doucement** tout seul, et le visiteur peut le **faire tourner au doigt
ou à la souris**. Le bloc est pensé pour être copié tel quel dans l'en-tête d'une autre page.

## Arborescence

```
zdog-logo-3d/
├── index.html        Page : en-tête avec le canevas, contrôles, explications
├── site.json         Titre, description et étiquettes pour le portail
├── css/
│   └── style.css     Mise en page mobile d'abord (variables de couleur en tête)
├── js/
│   ├── config.js     Réglages (vitesses, tailles) et thèmes de couleurs — AUCUNE logique
│   ├── logo.js       Fabrique creerLogo() : les 4 formes 3D (losange, anneau, A, soleil)
│   └── main.js       Scène Zdog, boucle d'animation, branchement des contrôles
└── medias/
    ├── pirogue.svg       Icône (médiathèque libre de droits du portail)
    └── motif-vagues.svg  Motif de vagues pour le pied de page
```

Ordre des scripts : `zdog.min.js` → `config.js` → `logo.js` → `main.js`.

## Notions abordées

- Le système de coordonnées de Zdog : x à droite, **y vers le bas**, z vers le spectateur
- Les rotations en radians et `Zdog.TAU` (un tour complet)
- `Zdog.Illustration` : la scène liée à un `<canvas>`
- `Zdog.Anchor` : regrouper des formes pour les déplacer ensemble
- `Zdog.Rect` (un carré tourné de 45° devient un losange), `fill`, `stroke`, `color`
- `Zdog.Shape` avec un `path` (lettre A), `closed: false` et la commande `move`
- Un `Shape` sans `path` + gros `stroke` = une sphère
- `translate` et `rotate` ; la profondeur grâce à `z`
- `dragRotate: true`, `onDragStart`, `onDragEnd`
- La boucle `requestAnimationFrame`, `deltaTime`, `updateRenderGraph()`
- Lissage avec `Zdog.lerp` ; `Math.sin` pour un balancement
- Canevas net sur écrans haute densité : `resize: true` (Zdog applique `devicePixelRatio`) et zoom adaptatif
- Espace de noms global (`AppLogo`) à la place des modules ES
- Accessibilité : `aria-label`, `prefers-reduced-motion`, `<noscript>`

## Idées d'exercices

1. Changez les couleurs d'un thème dans `config.js`, ou ajoutez un thème « Océan indien ».
2. Remplacez la lettre A par la première lettre de votre association (indice : modifiez le `path`).
3. Ajoutez une troisième couche (un deuxième anneau à `z: 20`) et observez la profondeur.
4. Remplacez le soleil par une petite pirogue construite avec un `Shape` à `path` courbe (`bezier` ou `arc`).
5. Ajoutez un mode « tour complet » (`illo.rotate.y += dt`) au lieu du balancement.
6. Faites varier le `stroke` du soleil avec `Math.sin` pour qu'il « pulse ».