Logo 3D animé pour un site d'association

js/logo.js · 5.6 Ko

/* ==========================================================================
 * js/logo.js — L'OBJET 3D « LOGO »
 * --------------------------------------------------------------------------
 * Ce fichier contient UNE fonction « fabrique » : creerLogo(). Elle construit
 * toutes les formes du logo et les range dans une Anchor (une « ancre »).
 *
 * Qu'est-ce qu'une Anchor ?
 *   Une ancre est un point invisible dans l'espace 3D. On y accroche
 *   (addTo) des formes ; si on déplace ou tourne l'ancre, toutes les formes
 *   accrochées suivent. C'est comme un porte-manteau 3D.
 *
 * Le logo est composé de 4 pièces, de l'arrière vers l'avant (axe z) :
 *   1. un grand losange plein, foncé            (z = -12)
 *   2. un losange « anneau » (contour seulement) (z = +12)
 *   3. la lettre A, tracée avec un Shape         (z = +16)
 *   4. un petit soleil jaune au-dessus du A      (z = +16)
 *
 * Dépend de : Zdog (chargé avant) et de AppLogo.REGLAGES / AppLogo.THEMES
 * (js/config.js, chargé avant celui-ci).
 * ========================================================================== */

(function () {
  'use strict';

  var TAU = Zdog.TAU; // un tour complet en radians (≈ 6,283)

  /**
   * Construit le logo et l'ajoute à une scène.
   *
   * @param {Zdog.Illustration|Zdog.Anchor} parent  Où accrocher le logo (la scène).
   * @param {Object} couleurs  Un thème (voir AppLogo.THEMES) : fond, anneau, lettre, soleil.
   * @returns {Object} { racine, fond, anneau, lettre, soleil } pour pouvoir
   *                   les retrouver plus tard (par exemple pour changer les couleurs).
   */
  function creerLogo(parent, couleurs) {

    // L'ancre « racine » : tout le logo est accroché ici.
    var racine = new Zdog.Anchor({
      addTo: parent,
    });

    // 1) LE GRAND LOSANGE DE FOND ------------------------------------------
    // Un losange n'est rien d'autre qu'un CARRÉ tourné de 45° (TAU / 8)
    // autour de l'axe z (l'axe qui pointe vers nous).
    // fill: true  -> on remplit l'intérieur ;
    // stroke: 12  -> en plus, un trait épais de 12 qui arrondit les coins.
    var fond = new Zdog.Rect({
      addTo: racine,
      width: 84,                      // largeur du carré avant rotation
      height: 84,                     // hauteur du carré avant rotation
      translate: { z: -12 },          // reculé de 12 : il est DERRIÈRE
      rotate: { z: TAU / 8 },         // 45° => le carré devient un losange
      stroke: 12,
      fill: true,
      color: couleurs.fond,
    });

    // 2) L'ANNEAU DU LOSANGE ------------------------------------------------
    // Même forme, mais SANS remplissage (fill: false, c'est la valeur par
    // défaut) : on ne voit que le contour. Il est placé devant (z = +12).
    // Quand on tourne le logo, on perçoit bien l'épaisseur grâce à l'écart
    // de 24 unités entre le fond et l'anneau : c'est l'effet 3D !
    var anneau = new Zdog.Rect({
      addTo: racine,
      width: 84,
      height: 84,
      translate: { z: 12 },           // avancé de 12 : il est DEVANT
      rotate: { z: TAU / 8 },
      stroke: 6,                      // trait plus fin que le fond
      color: couleurs.anneau,
    });

    // 3) LA LETTRE « A » ----------------------------------------------------
    // Zdog n'a pas de texte : on dessine la lettre avec un Shape personnalisé.
    // Le `path` est la liste des points à relier, comme un jeu de « relier les
    // points ». Rappel : y POSITIF = vers le BAS.
    //   - 1er point : pied gauche du A (en bas à gauche)
    //   - 2e point  : sommet du A (en haut au milieu)
    //   - 3e point  : pied droit (en bas à droite)
    //   - { move }  : on lève le crayon et on le repose à gauche de la barre
    //   - dernier   : on trace la barre horizontale du A
    // closed: false -> on ne relie PAS le dernier point au premier.
    var lettre = new Zdog.Shape({
      addTo: racine,
      path: [
        { x: -26, y: 34 },            // pied gauche
        { x: 0,   y: -28 },           // sommet
        { x: 26,  y: 34 },            // pied droit
        { move: { x: -14, y: 10 } },  // lever le crayon : début de la barre
        { x: 14,  y: 10 },            // fin de la barre
      ],
      closed: false,
      stroke: 9,                      // trait épais et arrondi
      translate: { z: 16 },           // devant le fond ET l'anneau
      color: couleurs.lettre,
    });

    // 4) LE PETIT SOLEIL ----------------------------------------------------
    // Un Shape SANS path est un simple point. Avec un `stroke` épais, ce point
    // s'affiche comme une SPHÈRE : c'est l'astuce classique de Zdog pour
    // faire des boules (yeux, boutons, soleils…).
    var soleil = new Zdog.Shape({
      addTo: racine,
      stroke: 9,                      // diamètre de la « boule »
      translate: { y: -50, z: 16 },   // au-dessus du A (y négatif = vers le haut)
      color: couleurs.soleil,
    });

    return { racine: racine, fond: fond, anneau: anneau, lettre: lettre, soleil: soleil };
  }

  /**
   * Change les couleurs d'un logo déjà construit.
   * Pas besoin de recréer les formes : on modifie simplement leur propriété
   * `color`. Zdog la relira à l'image suivante.
   *
   * @param {Object} logo     L'objet renvoyé par creerLogo().
   * @param {Object} couleurs Un thème de AppLogo.THEMES.
   */
  function appliquerCouleurs(logo, couleurs) {
    logo.fond.color = couleurs.fond;
    logo.anneau.color = couleurs.anneau;
    logo.lettre.color = couleurs.lettre;
    logo.soleil.color = couleurs.soleil;
  }

  // On expose les deux fonctions dans l'espace de noms global.
  AppLogo.creerLogo = creerLogo;
  AppLogo.appliquerCouleurs = appliquerCouleurs;
})();