# ASCII 구름

> Clean Markdown view of GeekNews topic #25853. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=25853](https://news.hada.io/topic?id=25853)
- GeekNews Markdown: [https://news.hada.io/topic/25853.md](https://news.hada.io/topic/25853.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2026-01-16T03:33:16+09:00
- Updated: 2026-01-16T03:33:16+09:00
- Original source: [caidan.dev](https://caidan.dev/portfolio/ascii_clouds/)
- Points: 5
- Comments: 2

## Summary

**ASCII 문자**로 구름을 표현하는 웹 실험 프로젝트 **‘ASCII Clouds’**는 텍스트 기반 그래픽의 새로운 가능성을 보여줍니다. 사용자는 **Noise·Wave·Color** 등 다양한 매개변수를 조정해 구름의 질감과 움직임을 바꾸고, **Retro CRT**나 **Cosmic** 같은 프리셋으로 즉시 다른 분위기를 연출할 수 있습니다. 결과 이미지는 PNG로 저장하거나 링크로 공유할 수 있어, 코드와 시각 예술의 경계를 탐색하는 도구로 활용됩니다.

## Topic Body

- **ASCII 문자**를 이용해 구름 형태를 시각화하는 **인터랙티브 웹 프로젝트**  
- **Noise, Wave, Color, Glyph Thresholds** 등 다양한 매개변수를 조정해 시각 효과를 변경 가능  
- **Retro CRT**, **Cosmic**, **Fog**, **Red** 등 **프리셋 모드**를 통해 다른 분위기의 구름 표현 지원  
- 결과 이미지를 **PNG로 저장**하거나 **링크 복사**, **설정값 불러오기(Import)** 기능 제공  
- **웹 기반 그래픽 실험**으로, 텍스트와 시각 효과의 결합 가능성을 보여주는 사례  
  
---  
### 프로젝트 개요  
- **ASCII Clouds**는 ASCII 문자를 기반으로 구름 형태를 생성하는 **웹 인터랙티브 시각화 도구**  
  - 브라우저에서 실시간으로 구름 패턴을 렌더링함  
  - 사용자는 다양한 시각적 파라미터를 직접 조정 가능  
- 인터페이스에는 **Fullscreen**, **PNG 저장**, **Copy Link**, **Import** 등의 기능 버튼이 포함됨  
  
### 시각 효과 조정 기능  
- **Noise**, **Wave Amplitude**, **Wave Speed**, **Noise Intensity**, **Time Speed** 등의 수치를 조절해 구름의 움직임과 질감 제어  
  - 예: Wave Amplitude 0.150, Wave Speed 0.60, Noise Intensity 0.035, Time Speed 0.70 등의 기본값 제시  
- **Vignette** 효과를 위한 **Intensity(0.80)** , **Radius(0.60)** 설정 가능  
- **Color 조정** 항목으로 **Hue(35)** , **Saturation(0.85)** , **Brightness(-0.05)** , **Contrast(1.50)** 값 제공  
  
### 문자 기반 렌더링 구조  
- 구름의 밀도에 따라 **Glyph Thresholds**가 적용되어 다른 문자가 표시됨  
  - `. (dot)` 0.15, `- (dash)` 0.30, `+ (plus)` 0.50, `O (ring)` 0.70, `X (cross)` 1.00  
- 이러한 문자 단계는 구름의 농도나 깊이를 표현하는 데 사용됨  
  
### 프리셋 및 테마  
- **Default**, **Terminal**, **Retro CRT**, **Cosmic**, **Fog**, **Red** 등 다양한 프리셋 제공  
  - 각 프리셋은 색상, 대비, 노이즈 등의 조합으로 독특한 시각 효과 구현  
- 사용자는 프리셋을 선택해 즉시 다른 스타일의 ASCII 구름을 생성 가능  
  
### 출력 및 공유 기능  
- 생성된 이미지를 **PNG 파일로 저장**하거나 **링크 복사**로 공유 가능  
- **Import 기능**을 통해 이전 설정값을 불러와 동일한 구름 패턴을 재현 가능  
- 이러한 기능은 실험적 시각화 결과를 손쉽게 저장하고 재활용할 수 있게 함

## Comments



### Comment 49795

- Author: roxie
- Created: 2026-01-23T22:34:51+09:00
- Points: 1

사용한 문자들이 귀여워요

### Comment 49283

- Author: neo
- Created: 2026-01-16T03:33:17+09:00
- Points: 1

###### [Hacker News 의견들](https://news.ycombinator.com/item?id=46611507) 
- 정말 아름다움. 이 효과의 핵심 알고리즘은 40년 넘은 **Perlin noise**임  
  생성된 이미지는 유리나 얼음 같은 **변위 효과**, 물결 효과, 지형 생성 등 다양한 시각적 효과에 활용 가능함. 자연스럽고 유기적인 느낌이 핵심임  
  예전 Flash AS3 시절에 이런 효과나 게임을 만들 때 자주 쓰였고, 지금도 여전히 많이 쓰일 것 같음  
  - 사실 기술적으로는 **Simplex noise**일 가능성이 높지만, 이것도 Perlin이 개발한 것임  
  - **P5JS**를 사용하면 이런 노이즈를 아주 쉽게 실험해볼 수 있음  
    [p5.noise() 레퍼런스](https://p5js.org/reference/p5/noise/)

- 사실 이런 효과는 **텍스트 후처리 셰이더**를 만들어서 3D 씬이나 비디오 등에 적용하면 간단히 구현 가능함  
  참고할 만한 자료들:  
  [pmndrs/ascii 가이드](https://post-processing.tresjs.org/guide/pmndrs/ascii),  
  [BabylonJS 포럼 예제](https://forum.babylonjs.com/t/ascii-shader-using-glsl-postprocessing/56666),  
  [Three.js ASCII 예제](https://threejs.org/examples/?q=ascii#webgl_effects_ascii),  
  [fwdapps.net 데모](https://fwdapps.net/l/asci/),  
  [CodeSandbox 예제](https://codesandbox.io/p/sandbox/ascii-postprocessing-n628p8?file=%2Fsrc%2Findex.js),  
  [YouTube 영상](https://www.youtube.com/watch?v=NxeRcnLr0ko)  
  - 아니면 그냥 **ASCII 자체로 시작**할 수도 있음. 친구와 셰이더 작동 원리를 이야기하다가 Emacs 안에서 돌아가는 작은 “shadertoy”를 만들어봄  
    [shademacs 예제 코드](https://hg.sr.ht/~oofoe/shademacs/browse/sdf.el?rev=tip)

- 멋지긴 하지만, 각 기호마다 색상이나 밝기가 다르면 **ASCII 본연의 의미**가 약해지는 느낌임  
  - 그래도 ‘**ascii art**’니까 예술적 자유라고 생각함  
  - 색이 이렇게 많다면 사실 문자 하나만으로도 충분할 듯함

- 이름 때문에 더 많은 **ASCII 문자 선택 옵션**이나 텍스트 선택 기능을 기대했음. 그래도 시각적으로는 꽤 매력적이고 재밌게 놀 수 있음  
  - 나도 비슷한 걸 실험 중임. **QWK 리더**를 현대적으로 구현하면서 ANSI 메시지를 HTML로 렌더링하는 게 핵심 과제였음  
    Claude Code로 초기 실험을 했는데 꽤 괜찮은 결과가 나옴  
    [bbs-ansi-to-html 프로젝트](https://github.com/bbs-land/bbs-ansi-to-html)

- 실제로는 ASCII와 거의 관련 없지만, 그래도 **쿨한 시각 효과**임

- 예전에 C로 비슷한 효과를 만든 적이 있음 (2007년쯤)  
  [YouTube 영상](https://www.youtube.com/watch?v=H4j-BkwMB20), [코드 저장소](https://github.com/kristopolous/ascsee)  
  최신 시스템에서도 컴파일되도록 업데이트했고, 원본 버전도 남아 있음  
  [원본 gol.c 파일](https://9ol.es/tmp/gol.c)

- 멋지긴 한데, 진짜 ASCII라면 텍스트 에디터에 **구름 하늘을 복사/붙여넣기**할 수 있어야 하지 않을까 하는 생각임 ;-P  
  - 내 환경에서는 WebGL 오류로 흰 화면만 보임. 그래서 이건 ASCII라고 보기 어려움. 진짜 텍스트 기반 출력이었으면 더 재밌었을 것 같음

- 이건 **위성 시점의 구름 렌더링**에는 잘 맞을 것 같음. 하지만 지상 시점의 구름을 모델링하기엔 적합하지 않아 보임  
  빠르고 좋은 알고리즘을 찾고 있는데, 관련 자료가 있다면 공유해주면 좋겠음

- 주제적으로 관련된 데모가 있음  
  [chromaspiral 데모](https://play.ertdfgcvb.xyz/#/src/demos/chromaspiral)  
  - 또 다른 관련 예제 (2011년작): [nkwiatek.com/experiments/ascii](http://nkwiatek.com/experiments/ascii)

- **Balatro 배경 효과**를 재현하려고 생각보다 오래 시간을 써버림