단 하나의 HTML 파일로 구현된 수채화 시뮬레이터

누군가 단 하나의 HTML 파일로 수채화 시뮬레이터 (Watercolor Simulator)를 만들었습니다.

가입도 필요 없고, 설치도 필요 없습니다. 탭을 열기만 하면 페이지가 이미 종이 상태로 준비되어 있습니다.

이름은 Inkwash입니다. 마우스로 그림을 그리는데, 느린 획은 진해지고 빠른 획은 얇아집니다. 그런 다음 물로 전환하여 잉크 위를 문지르면, 잉크가 번집니다. Photoshop의 "스머지 도구 (smudge tool)" 방식이 아니라, 젖은 종이와 유체 역학 (fluid physics) 방식입니다. 잉크가 고이고, 깃털처럼 퍼지며, 마릅니다.

브라우저 탭 안에서 실제로 종이에 그림을 그리는 것과 가장 유사한 경험입니다.

매 프레임마다 실행되는 12개의 WebGL2 셰이더 패스 (shader passes)
드로잉당 22회의 Jacobi 압력 반복 (Jacobi pressure iterations)
실제 물리 연산을 수행하는 1999년 유체 시뮬레이션 논문 (Jos Stam, "Stable Fluids")
fbm 노이즈 (fbm noise)로 절차적으로 생성된 종이 질감
S를 누르면 PNG 저장, C를 누르면 초기화, 이것이 인터페이스의 전부입니다

놀라운 점은, 앱 전체가 GitHub Pages에 있는 하나의 독립된 HTML 파일이라는 것입니다. 백엔드도, 프레임워크도, 빌드 단계도 없습니다. 마우스 오른쪽 버튼을 눌러 소스 보기를 하면 전체 코드를 읽을 수 있습니다.

https://t.co/pcVADXHMYp 의 연구원인 Jonathan Whitaker가 제작했습니다. 그는 AI에게 모든 줄을 작성하도록 프롬프트를 입력했으며, 본인은 코드를 직접 만진 적이 없다고 말합니다.

컬러 피커 (color picker) 없음. 실행 취소 (undo) 없음. 레이어 (layers) 없음. 오직 색조 슬라이더 (hue slider)와 유체 역학 (fluid dynamics)의 법칙뿐입니다. 그런데 신기하게도 바로 그 점 때문에 이 앱이 완벽하게 작동합니다.

잉크가 치유하고, 종이가 치유합니다. https://t.co/ebGH5ga05w 사람들은 여전히 놀라운 것들을 만들어내고 있습니다.