Nuages ASCII

• Projet web interactif qui visualise des formes de nuages à l’aide de caractères ASCII
• Possibilité de modifier l’effet visuel en ajustant divers paramètres comme Noise, Wave, Color, Glyph Thresholds
• Prise en charge de différentes expressions de nuages via des modes prédéfinis comme Retro CRT, Cosmic, Fog, Red
• Fonctions pour enregistrer l’image en PNG, copier le lien ou importer des réglages
• Une expérimentation graphique sur le web qui montre les possibilités de combinaison entre texte et effets visuels

---

Aperçu du projet

• ASCII Clouds est un outil web de visualisation interactive qui génère des formes de nuages à partir de caractères ASCII
  • Il affiche les motifs nuageux en temps réel dans le navigateur
  • L’utilisateur peut ajuster directement divers paramètres visuels
• L’interface comprend des boutons de fonction comme Fullscreen, enregistrement PNG, Copy Link, Import

Fonctions d’ajustement des effets visuels

• Des valeurs comme Noise, Wave Amplitude, Wave Speed, Noise Intensity, Time Speed permettent de contrôler le mouvement et la texture des nuages
  • Exemple : valeurs par défaut proposées telles que Wave Amplitude 0.150, Wave Speed 0.60, Noise Intensity 0.035, Time Speed 0.70
• Réglages possibles de Intensity(0.80) et Radius(0.60) pour l’effet Vignette
• Paramètres de Color disponibles avec les valeurs Hue(35), Saturation(0.85), Brightness(-0.05), Contrast(1.50)

Structure de rendu basée sur les caractères

• Des Glyph Thresholds sont appliqués selon la densité des nuages afin d’afficher des caractères différents
  • . (dot) 0.15, - (dash) 0.30, + (plus) 0.50, O (ring) 0.70, X (cross) 1.00
• Ces paliers de caractères servent à exprimer la densité ou la profondeur des nuages

Presets et thèmes

• Divers presets sont proposés, comme Default, Terminal, Retro CRT, Cosmic, Fog, Red
  • Chaque preset produit un effet visuel distinct grâce à une combinaison de couleurs, de contraste et de bruit
• L’utilisateur peut sélectionner un preset pour générer instantanément des nuages ASCII dans un autre style

Export et partage

• L’image générée peut être enregistrée en fichier PNG ou partagée via Copy Link
• La fonction Import permet de recharger des réglages précédents afin de reproduire le même motif de nuages
• Ces fonctions permettent d’enregistrer et de réutiliser facilement les résultats de cette visualisation expérimentale

[roxie]

Les caractères utilisés sont adorables.

[GN⁺]

Avis Hacker News

• Vraiment magnifique. L’algorithme clé derrière cet effet, c’est le bruit de Perlin, qui a plus de 40 ans
  L’image générée peut servir à divers effets visuels, comme des effets de déplacement rappelant le verre ou la glace, des effets d’ondulation, la génération de terrains, etc. L’essentiel, c’est ce rendu naturel et organique
  À l’époque de Flash AS3, on l’utilisait souvent pour créer ce genre d’effets ou des jeux, et j’imagine que c’est encore largement employé aujourd’hui

  • En réalité, techniquement, c’est probablement plutôt du bruit Simplex, mais lui aussi a été développé par Perlin
  • Avec P5JS, on peut expérimenter ce type de bruit très facilement
    Référence p5.noise()

• En fait, ce genre d’effet se réalise assez simplement en créant un shader de post-traitement de texte à appliquer à une scène 3D ou à une vidéo
  Quelques ressources utiles :
  Guide pmndrs/ascii,
  Exemple du forum BabylonJS,
  Exemple ASCII de Three.js,
  Démo fwdapps.net,
  Exemple CodeSandbox,
  Vidéo YouTube

  • Sinon, on peut aussi simplement partir directement de l’ASCII. En discutant du fonctionnement des shaders avec un ami, j’ai fabriqué un petit « shadertoy » qui tourne dans Emacs
    Exemple de code shademacs

• C’est sympa, mais si chaque symbole a une couleur ou une luminosité différente, j’ai l’impression que le sens même de l’ASCII s’affaiblit

  • Cela dit, puisque c’est de l’ascii art, je suppose qu’on peut invoquer la liberté artistique
  • Avec autant de couleurs, un seul caractère suffirait probablement déjà

• Le nom m’avait fait espérer plus d’options de sélection de caractères ASCII ou de fonctionnalités de sélection de texte. Cela dit, visuellement, c’est assez séduisant et amusant à manipuler

  • Je suis moi-même en train d’expérimenter quelque chose de proche. En recréant un lecteur QWK de façon moderne, le principal défi consistait à rendre des messages ANSI en HTML
    J’ai fait les premiers essais avec Claude Code, et le résultat est plutôt convaincant
    Projet bbs-ansi-to-html

• En pratique, ça n’a presque rien à voir avec l’ASCII, mais ça reste un effet visuel cool

• J’avais créé un effet similaire en C il y a longtemps (vers 2007)
  Vidéo YouTube, dépôt du code
  Je l’ai mis à jour pour qu’il compile aussi sur des systèmes récents, et j’ai conservé la version d’origine
  Fichier gol.c original

• C’est chouette, mais si c’était du vrai ASCII, on devrait pouvoir copier-coller un ciel nuageux dans un éditeur de texte, non ? ;-P

  • Chez moi, à cause d’une erreur WebGL, je n’obtiens qu’un écran blanc. Du coup, j’ai du mal à considérer ça comme de l’ASCII. Une vraie sortie textuelle aurait été plus amusante

• Ça pourrait très bien convenir à un rendu de nuages vus par satellite. En revanche, ça ne me semble pas adapté pour modéliser des nuages vus depuis le sol
  Je cherche un algorithme rapide et efficace ; si quelqu’un a des ressources sur le sujet, je suis preneur

• Il y a une démo liée thématiquement
  Démo chromaspiral

  • Un autre exemple connexe (de 2011) : nkwiatek.com/experiments/ascii

• J’ai passé bien plus de temps que prévu à essayer de recréer l’effet d’arrière-plan de Balatro