Annuaire › Code ouvert
Code publié par son auteur, en lecture seule. « Copier dans mon espace » crée un nouveau site à vous (non publié) que vous pouvez modifier librement.
js/config.js · 3.8 Ko
/* ============================================================
config.js - constantes réglables de l'horloge d'Antalaha
============================================================
Ici on regroupe TOUS les réglages : si vous voulez changer une
couleur, une taille ou une heure, c'est dans ce fichier !
Rappel : "const" déclare une valeur qui ne change plus.
Les scripts chargés ensuite (decor.js, horloge.js, sketch.js)
peuvent utiliser ces constantes directement.
============================================================ */
/* ---------- Taille du canevas ---------- */
// Largeur maximale du canevas (en pixels), même sur un grand écran.
const TAILLE_MAX = 560;
// Taille minimale (pour les très petits écrans).
const TAILLE_MIN = 240;
/* ---------- Police ---------- */
// Police du système : rapide (rien à télécharger) et lisible.
const POLICE = 'system-ui, -apple-system, "Segoe UI", sans-serif';
/* ---------- Paysage ---------- */
// Position de l'horizon (ligne entre ciel et mer) en fraction de la
// hauteur : 0.62 = à 62 % de la hauteur en partant du haut.
const POS_HORIZON = 0.62;
// Nombre d'étoiles dessinées la nuit.
const NB_ETOILES = 60;
/* ---------- Étapes de la journée ----------
Chaque étape décrit le ciel à une heure précise (h, en heures
décimales : 6.5 = 6 h 30). Entre deux étapes, le programme MÉLANGE
les couleurs avec lerpColor() : le passage est donc progressif.
- haut : couleur du ciel en haut du canevas
- bas : couleur du ciel près de l'horizon
- mer : couleur de la mer
- etoiles : visibilité des étoiles (0 = invisibles, 1 = très visibles)
Les couleurs sont écrites en hexadécimal (#RRGGBB). On les convertira
en "objets couleur" p5 dans setup() (color() n'existe qu'après le
démarrage de p5, on ne peut donc pas le faire ici).
IMPORTANT : la liste doit être triée par heure croissante, de 0 à 24.
La dernière étape (24 h) reprend les couleurs de la première (0 h)
pour que la journée "boucle" sans saut. */
const ETAPES_BRUTES = [
{ h: 0, haut: '#050b1f', bas: '#14264a', mer: '#0b1a33', etoiles: 1 }, // nuit profonde
{ h: 5, haut: '#0a1330', bas: '#1d2f5c', mer: '#0e2142', etoiles: 1 }, // fin de nuit
{ h: 6.5, haut: '#5b6fb3', bas: '#ffb48a', mer: '#4a7fa3', etoiles: 0.15 }, // aube
{ h: 8.5, haut: '#2f8fe0', bas: '#9ad8f5', mer: '#1f8ab5', etoiles: 0 }, // matin
{ h: 16, haut: '#2a86d8', bas: '#8fd2f0', mer: '#1b82ad', etoiles: 0 }, // après-midi
{ h: 18, haut: '#5a4a9a', bas: '#ff8a4c', mer: '#6a5a8a', etoiles: 0.2 }, // crépuscule
{ h: 19.5, haut: '#0d1636', bas: '#27346a', mer: '#101f40', etoiles: 0.9 }, // début de nuit
{ h: 24, haut: '#050b1f', bas: '#14264a', mer: '#0b1a33', etoiles: 1 } // minuit = 0 h
];
/* ---------- Noms des phases de la journée ----------
On affiche ce nom sous l'horloge. "de" = heure de début (incluse). */
const PHASES = [
{ de: 0, nom: 'Nuit' },
{ de: 5, nom: 'Aube' },
{ de: 8, nom: 'Jour' },
{ de: 16.5, nom: 'Crépuscule' },
{ de: 19.5, nom: 'Nuit' }
];
/* ---------- Couleurs du soleil et de la lune ---------- */
const COULEUR_SOLEIL_BAS = '#ff7b2e'; // soleil près de l'horizon : orangé
const COULEUR_SOLEIL_HAUT = '#fff2a8'; // soleil haut dans le ciel : jaune pâle
const COULEUR_LUNE = '#f3f1e3';
/* ---------- Horloge ---------- */
// Rayon du cadran en fraction de la largeur du canevas.
const RAYON_CADRAN = 0.34;
// Longueur des aiguilles en fraction du rayon.
const LONGUEUR_AIGUILLE_HEURE = 0.5;
const LONGUEUR_AIGUILLE_MINUTE = 0.75;
const LONGUEUR_AIGUILLE_SECONDE = 0.85;
const COULEUR_TROTTEUSE = '#d62828';
/* ---------- Jours et mois : on laisse le navigateur les écrire en français ---------- */
const OPTIONS_DATE = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' };