Présentation
Lofi Cities est une application web gratuite qui associe des animations pixel‑art de villes nocturnes à une bande‑son continue de musique lofi générée dans le navigateur. Chaque scène mesure 480 × 270 px et boucle sans couture toutes les quatre minutes. Le catalogue comprend onze métropoles – Paris, Tokyo, New York, Londres, Rio de Janeiro, Istanbul, Hong Kong, Sydney, San Francisco, Hambourg et Amsterdam – chacune dotée d’un décor météo (pluie, neige, feuilles d’automne ou ciel clair) et de sons d’ambiance propres.
Architecture technique
Le rendu graphique s’appuie sur le canvas HTML5. Les dernières mises à jour (27 sept.) ont optimisé le dessin pour les écrans 120 Hz : le moteur dessine 60 images par seconde, mais les effets de neige et de feuilles sont calculés avec un coût de calcul réduit, ce qui évite la surcharge lors du changement rapide de ville. Les sons de la ville sont mixés individuellement grâce à des curseurs dédiés, et les paramètres météo sont propagés à l’ensemble des villes via un état partagé stocké dans le cache du service worker, garantissant la continuité même lors d’une mise à jour du code.
Génération musicale
La musique est synthétisée en temps réel avec le Web Audio API. Chaque piste comprend une progression d’accords, une ligne de batterie, une basse et, le cas échéant, une mélodie, le tout enrichi de « tape wobble » et de crépitement de vinyle. Aucun échantillon n’est chargé ; tous les sons sont produits par des oscillateurs et des filtres paramétrés. Le panneau « Vibe » permet de choisir parmi neuf styles (jazzhop, piano, ambient, bossa, synth, house, guitar, sad, medieval) ainsi que deux humeurs (chill ou upbeat) et trois configurations d’instrumentation (full band, no drums, chords only). Le tempo varie de 68 à 88 BPM pour le jazzhop, tandis que les autres styles ajustent automatiquement le BPM pour correspondre à leur caractère.
Impacts, performances et limites
Le modèle sans serveur minimise la latence : tout le calcul se fait côté client, ce qui élimine les besoins de bande passante pour le streaming audio. Cependant, la dépendance au Web Audio API exclut les navigateurs anciens ou les environnements sans support audio avancé. Les optimisations récentes réduisent la consommation GPU, mais les appareils très limités (smartphones bas de gamme) peuvent encore rencontrer des saccades lors du rendu simultané des effets météo et du mixage audio. Enfin, l’absence de stockage persistant au‑delà du cache signifie que les préférences utilisateur (ville favorite, réglages de volume) ne sont pas conservées entre les sessions, sauf si l’utilisateur exporte manuellement le cadre PNG ou la boucle vidéo.
