Présentation

Le projet montre une métropole futuriste dessinée entièrement avec des caractères ASCII. Le rendu s’affiche dans le navigateur sans dépendance externe. Le créateur affirme que le fichier complet ne dépasse pas 12 KB, ce qui le rend facilement partageable via un simple lien ou un dépôt Git.

Architecture du fichier unique

Le document HTML combine trois blocs fonctionnels : une balise <style> contenant du CSS minimal, un <script> JavaScript qui génère la grille de caractères, et une section <pre> où le texte brut est injecté. Le CSS utilise la police monospacée Courier New et définit la taille de caractère à 10 px, ce qui assure un alignement strict sur chaque ligne. Le JavaScript crée une matrice 80 × 30 d’unités, chaque cellule étant remplie d’un code point Unicode tel que U+2588 (bloc plein) ou U+2591 (bloc clair). Le script exploite requestAnimationFrame pour rafraîchir l’affichage à 60 fps, limitant ainsi la charge CPU.

<script>
const cols = 80, rows = 30;
const grid = Array(rows).fill().map(() => Array(cols).fill(' '));
function draw() {
  // mise à jour de la grille puis injection dans le DOM
  document.getElementById('city').textContent = grid.map(r => r.join('')).join('\n');
  requestAnimationFrame(draw);
}
draw();
</script>

Mécanismes de navigation

Le déplacement de l’utilisateur repose sur les événements keydown. Les touches fléchées modifient les coordonnées d’une fenêtre de vue de 20 × 10 caractères, décalant la portion affichée de la matrice globale. Le code calcule les limites pour éviter le débordement hors du tableau, garantissant que chaque déplacement reste dans les bornes du monde virtuel. Un tableau de structures décrit les bâtiments, chaque structure étant une chaîne de caractères pré‑définie stockée dans le script. Lors du déplacement, le moteur copie les caractères pertinents dans la fenêtre active, ce qui évite de recomposer l’ensemble du tableau à chaque frame.

Limites et perspectives

Le principal goulot d’étranglement provient du rafraîchissement complet du texte à chaque image. Bien que le fichier reste petit, la reconstruction de 2 400 caractères par frame consomme environ 2 ms sur un processeur moyen, ce qui limite la fluidité sur des machines plus anciennes. L’absence de compression d’image rend le rendu dépendant de la police du système ; une police non monospacée introduit des décalages visuels. Enfin, le modèle de ville est statique : aucune génération procédurale n’est intégrée, ce qui restreint la variété des environnements. Des améliorations possibles incluent l’usage de canvas pour dessiner uniquement les cellules modifiées, ou l’ajout d’un algorithme de génération aléatoire basé sur le bruit de Perlin afin d’enrichir la topologie urbaine sans augmenter la taille du fichier.