Nubes ASCII

• Proyecto web interactivo que visualiza formas de nubes usando caracteres ASCII
• Permite cambiar el efecto visual ajustando varios parámetros como Noise, Wave, Color y Glyph Thresholds
• Ofrece expresiones de nubes con distintas atmósferas mediante modos preestablecidos como Retro CRT, Cosmic, Fog y Red
• Incluye funciones para guardar la imagen en PNG, copiar el enlace o importar la configuración
• Un experimento gráfico basado en la web que muestra las posibilidades de combinar texto y efectos visuales

---

Descripción general del proyecto

• ASCII Clouds es una herramienta web interactiva de visualización que genera formas de nubes a partir de caracteres ASCII
  • Renderiza patrones de nubes en tiempo real en el navegador
  • El usuario puede ajustar directamente varios parámetros visuales
• La interfaz incluye botones de funciones como Fullscreen, Guardar PNG, Copy Link e Import

Funciones de ajuste de efectos visuales

• Se puede controlar el movimiento y la textura de las nubes ajustando valores como Noise, Wave Amplitude, Wave Speed, Noise Intensity y Time Speed
  • Ejemplo: se presentan valores predeterminados como Wave Amplitude 0.150, Wave Speed 0.60, Noise Intensity 0.035 y Time Speed 0.70
• También se pueden configurar Intensity (0.80) y Radius (0.60) para el efecto de Vignette
• En el apartado de ajuste de color se ofrecen valores de Hue (35), Saturation (0.85), Brightness (-0.05) y Contrast (1.50)

Estructura de renderizado basada en caracteres

• Según la densidad de la nube, se aplican Glyph Thresholds para mostrar distintos caracteres
  • . (dot) 0.15, - (dash) 0.30, + (plus) 0.50, O (ring) 0.70, X (cross) 1.00
• Estas etapas de caracteres se usan para representar la concentración o la profundidad de las nubes

Presets y temas

• Ofrece varios presets como Default, Terminal, Retro CRT, Cosmic, Fog y Red
  • Cada preset crea un efecto visual único mediante combinaciones de color, contraste y ruido
• El usuario puede seleccionar un preset para generar al instante nubes ASCII con otro estilo

Funciones de salida y compartición

• La imagen generada puede guardarse como archivo PNG o compartirse mediante copiar enlace
• Con la función Import, se pueden cargar configuraciones previas para reproducir el mismo patrón de nubes
• Estas funciones permiten guardar y reutilizar fácilmente los resultados de visualización experimental

[roxie]

Los caracteres que usaron están tiernos.

[GN⁺]

Comentarios en Hacker News

• De verdad es hermoso. El algoritmo clave detrás de este efecto es Perlin noise, que ya tiene más de 40 años
  Las imágenes generadas pueden usarse para varios efectos visuales, como efectos de desplazamiento que parecen vidrio o hielo, efectos de ondas y generación de terreno. La clave es esa sensación natural y orgánica
  En la época de Flash AS3 se usaba mucho al crear este tipo de efectos o juegos, y parece que todavía se sigue usando bastante

  • En realidad, técnicamente es más probable que sea Simplex noise, pero eso también lo desarrolló Perlin
  • Con P5JS se puede experimentar con este tipo de ruido muy fácilmente
    Referencia de p5.noise()

• En realidad, este tipo de efecto se puede implementar fácilmente creando un shader de posprocesado de texto y aplicándolo a una escena 3D o a video
  Algunos recursos útiles:
  Guía de pmndrs/ascii,
  Ejemplo del foro de BabylonJS,
  Ejemplo ASCII de Three.js,
  Demo de fwdapps.net,
  Ejemplo en CodeSandbox,
  Video de YouTube

  • O también se puede simplemente empezar directamente con ASCII. Hablando con un amigo sobre cómo funcionan los shaders, hice un pequeño “shadertoy” que corre dentro de Emacs
    Código de ejemplo de shademacs

• Está genial, pero si cada símbolo tiene un color o brillo distinto, se siente como que se pierde el significado propio del ASCII

  • Aun así, como es “ascii art”, lo veo como libertad artística
  • Si hay tantos colores, en realidad hasta con un solo carácter bastaría

• Por el nombre esperaba más opciones para elegir caracteres ASCII o alguna función de selección de texto. Aun así, visualmente es bastante atractivo y divertido para jugar

  • Yo también estoy experimentando con algo parecido. Al hacer una implementación moderna de un lector QWK, el reto principal era renderizar mensajes ANSI como HTML
    Hice los experimentos iniciales con Claude Code y salieron bastante bien
    Proyecto bbs-ansi-to-html

• En realidad casi no tiene nada que ver con ASCII, pero igual es un efecto visual cool

• Hace tiempo hice algo parecido en C (por ahí de 2007)
  Video de YouTube, repositorio del código
  Lo actualicé para que compile en sistemas modernos, y también dejé la versión original
  Archivo original gol.c

• Está genial, pero si de verdad fuera ASCII, uno debería poder copiar/pegar un cielo con nubes en un editor de texto, ¿no? ;-P

  • En mi entorno solo veo una pantalla blanca por un error de WebGL. Por eso me cuesta verlo como ASCII. Si fuera salida realmente basada en texto, habría sido más interesante

• Esto parece encajar bien para renderizar nubes desde una vista satelital. Pero no parece adecuado para modelar nubes vistas desde el suelo
  Estoy buscando un algoritmo rápido y bueno, así que si alguien tiene material relacionado, estaría bueno que lo comparta

• Hay un demo relacionado temáticamente
  Demo de chromaspiral

  • Otro ejemplo relacionado (de 2011): nkwiatek.com/experiments/ascii

• Terminé gastando más tiempo del que esperaba intentando recrear el efecto de fondo de Balatro