ASCII-Wolken

• Interaktives Webprojekt, das Wolkenformen mit ASCII-Zeichen visualisiert
• Verschiedene visuelle Effekte lassen sich durch Anpassung von Parametern wie Noise, Wave, Color, Glyph Thresholds verändern
• Preset-Modi wie Retro CRT, Cosmic, Fog und Red unterstützen Wolkendarstellungen mit unterschiedlicher Stimmung
• Bietet Funktionen zum Speichern des Ergebnisses als PNG, Kopieren eines Links und Importieren von Einstellungen
• Ein webbasiertes Grafikexperiment, das die Möglichkeiten der Verbindung von Text und visuellen Effekten zeigt

---

Projektüberblick

• ASCII Clouds ist ein interaktives Web-Visualisierungstool, das Wolkenformen auf Basis von ASCII-Zeichen erzeugt
  • Rendert Wolkenmuster in Echtzeit im Browser
  • Nutzer können verschiedene visuelle Parameter direkt anpassen
• Die Oberfläche enthält Funktionsschaltflächen wie Fullscreen, PNG speichern, Copy Link und Import

Funktionen zur Anpassung visueller Effekte

• Durch Anpassen von Werten wie Noise, Wave Amplitude, Wave Speed, Noise Intensity und Time Speed lassen sich Bewegung und Textur der Wolken steuern
  • Beispiel: Es werden Standardwerte wie Wave Amplitude 0.150, Wave Speed 0.60, Noise Intensity 0.035 und Time Speed 0.70 angegeben
• Für den Vignette-Effekt lassen sich Intensity (0.80) und Radius (0.60) einstellen
• Unter den Color-Einstellungen stehen Werte für Hue (35), Saturation (0.85), Brightness (-0.05) und Contrast (1.50) zur Verfügung

Zeichenbasierte Rendering-Struktur

• Je nach Wolkendichte werden Glyph Thresholds angewendet, sodass unterschiedliche Zeichen angezeigt werden
  • . (dot) 0.15, - (dash) 0.30, + (plus) 0.50, O (ring) 0.70, X (cross) 1.00
• Diese Zeichenstufen werden verwendet, um Dichte oder Tiefe der Wolken auszudrücken

Presets und Themen

• Es stehen verschiedene Presets wie Default, Terminal, Retro CRT, Cosmic, Fog und Red zur Verfügung
  • Jedes Preset erzeugt durch eine Kombination aus Farbe, Kontrast und Noise einen eigenen visuellen Effekt
• Nutzer können durch Auswahl eines Presets sofort ASCII-Wolken in einem anderen Stil erzeugen

Ausgabe- und Freigabefunktionen

• Das erzeugte Bild kann als PNG-Datei gespeichert oder per Copy Link geteilt werden
• Mit der Import-Funktion lassen sich frühere Einstellungen laden, um dasselbe Wolkenmuster erneut zu erzeugen
• Diese Funktionen ermöglichen es, experimentelle Visualisierungsergebnisse einfach zu speichern und wiederzuverwenden

[roxie]

Die verwendeten Zeichen sind süß.

[GN⁺]

Hacker-News-Kommentare

• Wirklich wunderschön. Der Kernalgorithmus hinter diesem Effekt ist das über 40 Jahre alte Perlin noise
  Die erzeugten Bilder lassen sich für verschiedene visuelle Effekte nutzen, etwa Displacement-Effekte wie Glas oder Eis, Wellenbewegungen oder Terrain-Generierung. Entscheidend ist der natürliche, organische Eindruck.
  Früher, zu Flash-AS3-Zeiten, wurde so etwas oft verwendet, wenn man solche Effekte oder Spiele gebaut hat, und vermutlich wird es auch heute noch viel genutzt.

  • Technisch gesehen ist es wahrscheinlich eher Simplex noise, aber das wurde ebenfalls von Perlin entwickelt.
  • Mit P5JS kann man sehr einfach mit solchem Noise experimentieren.
    p5.noise()-Referenz

• Eigentlich lässt sich so ein Effekt auch einfach umsetzen, indem man einen Text-Post-Processing-Shader baut und ihn auf 3D-Szenen oder Videos anwendet.
  Nützliche Materialien dazu:
  pmndrs/ascii-Leitfaden,
  BabylonJS-Forenbeispiel,
  Three.js-ASCII-Beispiel,
  fwdapps.net-Demo,
  CodeSandbox-Beispiel,
  YouTube-Video

  • Oder man startet einfach direkt mit ASCII selbst. Als ich mit einem Freund darüber gesprochen habe, wie Shader funktionieren, habe ich ein kleines „shadertoy“ gebaut, das in Emacs läuft.
    shademacs-Beispielcode

• Sieht cool aus, aber wenn jedes Symbol eine andere Farbe oder Helligkeit hat, wirkt die eigentliche Bedeutung von ASCII etwas abgeschwächt.

  • Andererseits ist es eben 'ascii art', also gehört künstlerische Freiheit wohl dazu.
  • Bei so vielen Farben würde eigentlich auch schon ein einziges Zeichen reichen.

• Wegen des Namens hatte ich mehr Auswahloptionen für ASCII-Zeichen oder eine Textauswahlfunktion erwartet. Trotzdem ist es visuell ziemlich attraktiv und macht Spaß, damit herumzuspielen.

  • Ich experimentiere ebenfalls mit etwas Ähnlichem. Bei einer modernen Umsetzung eines QWK-Readers war eine zentrale Aufgabe, ANSI-Nachrichten als HTML zu rendern.
    Mit Claude Code habe ich erste Experimente gemacht, und die Ergebnisse waren ziemlich ordentlich.
    bbs-ansi-to-html-Projekt

• Eigentlich hat es fast nichts mit ASCII zu tun, aber es ist trotzdem ein cooler visueller Effekt.

• Ich habe früher einmal einen ähnlichen Effekt in C gebaut (so um 2007 herum).
  YouTube-Video, Code-Repository
  Ich habe es aktualisiert, damit es auch auf modernen Systemen kompiliert, und die Originalversion ist ebenfalls noch vorhanden.
  Originaldatei gol.c

• Sieht cool aus, aber wenn es wirklich ASCII wäre, sollte man den wolkigen Himmel per Copy-and-paste in einen Texteditor einfügen können, oder nicht? ;-P

  • Bei mir erscheint wegen eines WebGL-Fehlers nur ein weißer Bildschirm. Deshalb fällt es mir schwer, das als ASCII zu sehen. Eine echte textbasierte Ausgabe wäre interessanter gewesen.

• Dafür scheint es gut zu Cloud-Rendering aus Satellitenperspektive zu passen. Um Wolken aus Bodensicht zu modellieren, wirkt es aber eher ungeeignet.
  Ich suche nach einem schnellen und guten Algorithmus; falls jemand dazu Material kennt, wäre ein Hinweis willkommen.

• Es gibt eine thematisch verwandte Demo.
  chromaspiral-Demo

  • Noch ein weiteres verwandtes Beispiel (von 2011): nkwiatek.com/experiments/ascii

• Ich habe deutlich mehr Zeit als erwartet damit verbracht, den Balatro-Hintergrundeffekt nachzubauen.