Nuvens ASCII

• Projeto web interativo que visualiza formas de nuvens usando caracteres ASCII
• Permite alterar os efeitos visuais ajustando diversos parâmetros, como Noise, Wave, Color e Glyph Thresholds
• Oferece expressão de nuvens com diferentes atmosferas por meio de modos predefinidos como Retro CRT, Cosmic, Fog e Red
• Disponibiliza funções para salvar o resultado em PNG, copiar o link e importar configurações
• Um experimento gráfico baseado na web que mostra as possibilidades de combinar texto e efeitos visuais

---

Visão geral do projeto

• ASCII Clouds é uma ferramenta web de visualização interativa que gera formas de nuvens com base em caracteres ASCII
  • Renderiza padrões de nuvens em tempo real no navegador
  • O usuário pode ajustar diretamente diversos parâmetros visuais
• A interface inclui botões de função como Fullscreen, salvar PNG, Copy Link e Import

Recursos de ajuste de efeitos visuais

• É possível controlar o movimento e a textura das nuvens ajustando valores como Noise, Wave Amplitude, Wave Speed, Noise Intensity e Time Speed
  • Ex.: são apresentados valores padrão como Wave Amplitude 0.150, Wave Speed 0.60, Noise Intensity 0.035 e Time Speed 0.70
• Também é possível definir Intensity (0.80) e Radius (0.60) para o efeito de Vignette
• Em ajuste de cor, são fornecidos valores de Hue (35), Saturation (0.85), Brightness (-0.05) e Contrast (1.50)

Estrutura de renderização baseada em caracteres

• Dependendo da densidade das nuvens, são aplicados Glyph Thresholds, exibindo caracteres diferentes
  • . (dot) 0.15, - (dash) 0.30, + (plus) 0.50, O (ring) 0.70, X (cross) 1.00
• Esses níveis de caracteres são usados para representar a densidade ou a profundidade das nuvens

Presets e temas

• Oferece diversos presets como Default, Terminal, Retro CRT, Cosmic, Fog e Red
  • Cada preset implementa um efeito visual único por meio da combinação de cor, contraste, ruído e outros elementos
• O usuário pode selecionar um preset para gerar instantaneamente nuvens ASCII em outro estilo

Saída e compartilhamento

• A imagem gerada pode ser salva como arquivo PNG ou compartilhada com Copy Link
• Com a função Import, é possível carregar configurações anteriores e reproduzir o mesmo padrão de nuvens
• Esses recursos facilitam salvar e reutilizar resultados de visualização experimental

[roxie]

Os caracteres usados são uma graça.

[GN⁺]

Comentários do Hacker News

• Realmente lindo. O algoritmo central desse efeito é o Perlin noise, que já tem mais de 40 anos
  A imagem gerada pode ser usada em vários efeitos visuais, como efeitos de deslocamento parecidos com vidro ou gelo, efeito de ondulação, geração de terreno etc. O ponto principal é a sensação natural e orgânica
  Na época do Flash AS3, isso era usado com frequência para criar efeitos assim ou jogos, e imagino que ainda seja bastante usado hoje

  • Na prática, tecnicamente é mais provável que seja Simplex noise, mas isso também foi desenvolvido pelo Perlin
  • Com P5JS, dá para experimentar esse tipo de ruído com muita facilidade
    referência do p5.noise()

• Na verdade, esse tipo de efeito pode ser implementado facilmente criando um shader de pós-processamento de texto e aplicando em cenas 3D ou vídeos
  Alguns materiais úteis:
  guia do pmndrs/ascii,
  exemplo no fórum do BabylonJS,
  exemplo ASCII do Three.js,
  demo do fwdapps.net,
  exemplo no CodeSandbox,
  vídeo no YouTube

  • Ou então dá para simplesmente começar com ASCII. Conversando com um amigo sobre como shaders funcionam, fiz um pequeno “shadertoy” rodando dentro do Emacs
    código de exemplo do shademacs

• É legal, mas quando cada símbolo tem cor ou brilho diferentes, parece que o significado original do ASCII fica mais fraco

  • Ainda assim, como é “ascii art”, acho que vale a liberdade artística
  • Se há tantas cores assim, na verdade talvez até um único caractere já bastasse

• Pelo nome, eu esperava mais opções de escolha de caracteres ASCII ou alguma função de seleção de texto. Ainda assim, visualmente é bem atraente e divertido de brincar

  • Também estou experimentando algo parecido. Ao recriar um leitor QWK de forma moderna, o desafio principal foi renderizar mensagens ANSI em HTML
    Fiz os experimentos iniciais com Claude Code, e os resultados ficaram bem bons
    projeto bbs-ansi-to-html

• Na prática, isso quase não tem relação com ASCII, mas ainda assim é um efeito visual bacana

• Já fiz algo parecido em C há muito tempo (por volta de 2007)
  vídeo no YouTube, repositório do código
  Atualizei para compilar em sistemas modernos e também mantive a versão original
  arquivo gol.c original

• Ficou legal, mas se fosse ASCII de verdade, não deveria dar para copiar e colar um céu com nuvens num editor de texto? ;-P

  • No meu ambiente, só aparece uma tela branca por causa de um erro de WebGL. Então fica difícil considerar isso ASCII. Se fosse uma saída realmente baseada em texto, teria sido mais interessante

• Isso parece combinar bem com renderização de nuvens em visão de satélite. Mas não parece adequado para modelar nuvens vistas do solo
  Estou procurando um algoritmo bom e rápido, então se alguém tiver materiais relacionados, seria ótimo compartilhar

• Existe uma demo relacionada em termos de tema
  demo do chromaspiral

  • Outro exemplo relacionado (de 2011): nkwiatek.com/experiments/ascii

• Acabei gastando mais tempo do que esperava tentando recriar o efeito de fundo de Balatro