▲

ASCII 구름

 (caidan.dev)
3P by GN⁺ 9일전 | ★ favorite | 댓글 2개
  • 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 기능을 통해 이전 설정값을 불러와 동일한 구름 패턴을 재현 가능
  • 이러한 기능은 실험적 시각화 결과를 손쉽게 저장하고 재활용할 수 있게 함
▲
roxie 22시간전  [-]

사용한 문자들이 귀여워요

답변달기
▲
GN⁺ 9일전  [-]
Hacker News 의견들

  • 정말 아름다움. 이 효과의 핵심 알고리즘은 40년 넘은 Perlin noise임
    생성된 이미지는 유리나 얼음 같은 변위 효과, 물결 효과, 지형 생성 등 다양한 시각적 효과에 활용 가능함. 자연스럽고 유기적인 느낌이 핵심임
    예전 Flash AS3 시절에 이런 효과나 게임을 만들 때 자주 쓰였고, 지금도 여전히 많이 쓰일 것 같음

    • 사실 기술적으로는 Simplex noise일 가능성이 높지만, 이것도 Perlin이 개발한 것임
    • P5JS를 사용하면 이런 노이즈를 아주 쉽게 실험해볼 수 있음
      p5.noise() 레퍼런스

  • 사실 이런 효과는 텍스트 후처리 셰이더를 만들어서 3D 씬이나 비디오 등에 적용하면 간단히 구현 가능함
    참고할 만한 자료들:
    pmndrs/ascii 가이드,
    BabylonJS 포럼 예제,
    Three.js ASCII 예제,
    fwdapps.net 데모,
    CodeSandbox 예제,
    YouTube 영상

    • 아니면 그냥 ASCII 자체로 시작할 수도 있음. 친구와 셰이더 작동 원리를 이야기하다가 Emacs 안에서 돌아가는 작은 “shadertoy”를 만들어봄
      shademacs 예제 코드

  • 멋지긴 하지만, 각 기호마다 색상이나 밝기가 다르면 ASCII 본연의 의미가 약해지는 느낌임

    • 그래도 ‘ascii art’니까 예술적 자유라고 생각함
    • 색이 이렇게 많다면 사실 문자 하나만으로도 충분할 듯함

  • 이름 때문에 더 많은 ASCII 문자 선택 옵션이나 텍스트 선택 기능을 기대했음. 그래도 시각적으로는 꽤 매력적이고 재밌게 놀 수 있음

    • 나도 비슷한 걸 실험 중임. QWK 리더를 현대적으로 구현하면서 ANSI 메시지를 HTML로 렌더링하는 게 핵심 과제였음
      Claude Code로 초기 실험을 했는데 꽤 괜찮은 결과가 나옴
      bbs-ansi-to-html 프로젝트

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

  • 예전에 C로 비슷한 효과를 만든 적이 있음 (2007년쯤)
    YouTube 영상, 코드 저장소
    최신 시스템에서도 컴파일되도록 업데이트했고, 원본 버전도 남아 있음
    원본 gol.c 파일

  • 멋지긴 한데, 진짜 ASCII라면 텍스트 에디터에 구름 하늘을 복사/붙여넣기할 수 있어야 하지 않을까 하는 생각임 ;-P

    • 내 환경에서는 WebGL 오류로 흰 화면만 보임. 그래서 이건 ASCII라고 보기 어려움. 진짜 텍스트 기반 출력이었으면 더 재밌었을 것 같음

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

  • 주제적으로 관련된 데모가 있음
    chromaspiral 데모

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

답변달기