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

js/axes.js · 5.7 Ko

/* ============================================================
   axes.js - grille, graduations, noms des mois et légende
   ============================================================
   Fonctions de dessin du "cadre" du graphique. Elles utilisent
   les variables globales définies dans sketch.js :
     zone    : rectangle de tracé {x0, y0, x1, y1, larg, haut, colonne}
     echelle : {maxi, pas} de l'axe vertical
   ============================================================ */

/* ------------------------------------------------------------
   yDepuisValeur(valeur)
   But : convertir une valeur en mm en position verticale (pixel).
   map() fait la conversion proportionnelle :
     0 mm      -> bas de la zone (zone.y1)
     maxi mm   -> haut de la zone (zone.y0)
   (on "inverse" car y augmente vers le BAS en p5)
   ------------------------------------------------------------ */
function yDepuisValeur(valeur) {
  return map(valeur, 0, echelle.maxi, zone.y1, zone.y0);
}

/* ------------------------------------------------------------
   xCentreColonne(i)
   But : abscisse (x) du centre de la colonne du mois i (0 à 11).
   ------------------------------------------------------------ */
function xCentreColonne(i) {
  return zone.x0 + (i + 0.5) * zone.colonne;
}

/* ------------------------------------------------------------
   dessinerGrille()
   But : tracer les lignes horizontales et écrire les graduations
         (0, 100, 200... mm) à gauche.
   ------------------------------------------------------------ */
function dessinerGrille() {
  textFont(POLICE);
  textSize(11);
  textAlign(RIGHT, CENTER);        // alignement : à droite horizontalement, centré verticalement
  strokeWeight(1);

  for (let v = 0; v <= echelle.maxi; v += echelle.pas) {
    const y = yDepuisValeur(v);
    stroke(v === 0 ? COULEURS.axe : COULEURS.grille);   // la ligne du zéro est plus marquée
    line(zone.x0, y, zone.x1, y);
    noStroke();
    fill(COULEURS.texteDoux);
    text(v, zone.x0 - 6, y);
  }

  // Unité de l'axe vertical
  fill(COULEURS.texteDoux);
  textAlign(RIGHT, BOTTOM);
  text('mm', zone.x0 - 6, zone.y0 - 10);
}

/* ------------------------------------------------------------
   dessinerNomsMois()
   But : écrire le nom de chaque mois sous le graphique.
   Selon la largeur disponible on choisit des noms complets,
   courts ou des initiales : le graphique reste lisible à 360 px.
   ------------------------------------------------------------ */
function dessinerNomsMois() {
  let noms = MOIS_INITIALES;                         // très étroit : J F M A...
  if (zone.colonne >= 32) noms = MOIS_COURTS;        // moyen : Jan Fév Mar...
  if (zone.colonne >= 64) noms = MOIS_COMPLETS;      // large : Janvier Février...

  noStroke();
  textSize(11);
  textAlign(CENTER, TOP);
  for (let i = 0; i < 12; i++) {
    // Le mois sélectionné est écrit en gras et en couleur d'accent.
    const actif = (i === indexSelection);
    textStyle(actif ? BOLD : NORMAL);
    fill(actif ? COULEURS.survol : COULEURS.texte);
    text(noms[i], xCentreColonne(i), zone.y1 + 8);
  }
  textStyle(NORMAL);                                 // on remet le style normal pour la suite
}

/* ------------------------------------------------------------
   dessinerMention()
   But : rappeler en bas à droite que les valeurs sont fictives.
   ------------------------------------------------------------ */
function dessinerMention() {
  noStroke();
  fill(COULEURS.texteDoux);
  textSize(10);
  textStyle(ITALIC);
  textAlign(RIGHT, BOTTOM);
  text(MENTION_ILLUSTRATION, width - 8, height - 6);
  textStyle(NORMAL);
}

/* ------------------------------------------------------------
   dessinerLegende(libelle, avecMoyenne)
   But : expliquer ce que représentent les couleurs.
   Paramètres :
     libelle     : texte de la série affichée (« 2023 »...)
     avecMoyenne : vrai si on doit aussi légender la ligne de moyenne
   ------------------------------------------------------------ */
function dessinerLegende(libelle, avecMoyenne) {
  textFont(POLICE);
  textSize(12);
  textAlign(LEFT, CENTER);
  const y = 16;
  let x = MARGE_GAUCHE - 34;     // début de la légende (un peu à gauche de la zone)
  if (x < 8) x = 8;

  // 1) Série affichée : petit carré coloré. En mode courbe, un trait avec un point.
  noStroke();
  if (modeCourbe) {
    stroke(COULEURS.courbe);
    strokeWeight(3);
    line(x, y, x + 16, y);
    noStroke();
    fill(COULEURS.courbe);
    circle(x + 8, y, 7);
  } else {
    fill(COULEURS.barreFoncee);
    rect(x, y - 6, 16, 12, 3);
  }
  fill(COULEURS.texte);
  noStroke();
  const titre = (libelle.indexOf('Moyenne') === 0 ? libelle : 'Pluie ' + libelle) + ' (mm)';
  text(titre, x + 22, y);
  x += 22 + textWidth(titre) + 16;   // textWidth() mesure la largeur d'un texte

  // 2) Ligne de moyenne en pointillés
  if (avecMoyenne) {
    tracerPointilles(x, y, x + 18, y, COULEURS.moyenne, 2.5);
    noStroke();
    fill(COULEURS.texte);
    text(libelleChoix('moyenne'), x + 24, y);
  }
}

/* ------------------------------------------------------------
   tracerPointilles(x1, y1, x2, y2, couleur, epaisseur)
   But : tracer une ligne en pointillés.
   p5 n'a pas de fonction "pointillés" : on utilise directement
   le contexte de dessin du navigateur (drawingContext) et sa
   méthode setLineDash([longueurTrait, longueurEspace]).
   IMPORTANT : on remet ensuite setLineDash([]) pour ne pas
   rendre pointillé tout ce qu'on dessine après !
   ------------------------------------------------------------ */
function tracerPointilles(x1, y1, x2, y2, couleur, epaisseur) {
  stroke(couleur);
  strokeWeight(epaisseur);
  drawingContext.setLineDash([6, 4]);
  line(x1, y1, x2, y2);
  drawingContext.setLineDash([]);
}