X(Twitter)의 #つぶやきGLSL / #つぶやきProcessing 해시태그에서 수집한 트윗 크기 코드 아트를 디코딩하고 실시간 렌더링하는 로컬 뷰어.
일본 코드 아트 커뮤니티에서는 트윗 한 줄(280자 이내)에 담는 "코드 골프" 스타일의 셰이더/스케치 작품을 공유하는 문화가 있다. 극한으로 압축된 코드는 그 자체로 읽기 어렵기 때문에, 이를 수집 → 디코딩 → 주석 → 실시간 렌더링하는 도구를 만들었다.
| 해시태그 | 언어 | 렌더링 방식 |
|---|---|---|
| #つぶやきGLSL | GLSL (twigl convention) | WebGL2 fragment shader |
| #つぶやきProcessing | Processing (Java) / p5.js | p5.js iframe sandbox |
- 수집된 셰이더 6개 (주로 @YoheiNishitsuji, @Renard_VRC)
- twigl 컨벤션 빌트인 제공:
FC(gl_FragCoord),r(resolution),t(time),o(fragColor),s(sound),m(mouse) - 헬퍼 함수:
hsv(),rotate2D(),rotate3D() - 캔버스 클릭으로 WebGL2 실시간 렌더링 재생/정지
- Paste & Add: 새 골프 코드를 붙여넣으면 카드로 추가, 자동 재생
- Decoded / Golf 탭: 포매팅 + 한국어 주석 ↔ 원본 코드 전환
- 수집된 스케치 11개 (@hisadan, @dn0t_, @GenerativePunk)
- p5.js / Processing (Java) 자동 감지
- Processing → p5.js 자동 변환:
void setup/draw()→function setup/draw()size()→createCanvas()(P3D→WEBGL, P2D 포함)float/int타입 선언 제거 (전역 변수화)- 배열 선언 변환:
float a[]=new float[n]→a=new Array(n).fill(0) - Processing 상수 변환:
colorMode(3)→HSB,blendMode(2)→ADD,rectMode(3)→CENTER
- p5.js iframe 샌드박스로 브라우저 실행, 에러 시 메시지 표시
- Processing 카드에 Converted p5.js 탭으로 변환 결과 확인 가능
- 코드 포매터: 골프 코드를 구조적으로 들여쓰기/줄바꿈
- 자동 주석: GLSL/Processing 주요 함수/변수에 한국어 설명 (첫 등장 시)
- Paste & Add 에디터: 새 코드 추가 (Cmd+Enter), 글자 수 카운터
- 양쪽 페이지 간 네비게이션 링크
art_code_collection/
├── README.md
├── tsubuyaki_glsl.html # GLSL 셰이더 컬렉션 + WebGL 뷰어
└── tsubuyaki_processing.html # Processing/p5.js 스케치 컬렉션 + p5.js 뷰어
브라우저에서 HTML 파일을 직접 열면 된다. 서버 불필요.
open tsubuyaki_glsl.html
open tsubuyaki_processing.html- Processing → p5.js 변환 정확도 개선 (P3D/camera 등)
- 더 많은 트윗 수집 자동화
- Shadertoy / twigl.app 호환 모드
- 코드 공유/내보내기 기능
- 통합 인덱스 페이지