Canvas 제너레이티브 아트

무엇을 해주나

• Canvas 2D 기본 세팅: devicePixelRatio를 반영한 선명한 캔버스 초기화, ResizeObserver 기반 리사이즈 처리, requestAnimationFrame 루프(델타 타임 상한 포함) 코드를 제공합니다.
• 노이즈 선택 가이드: Perlin / Simplex / Worley의 특성과 용도를 표로 비교하고, 좌표 스케일링·옥타브(fBm)·시드 고정 같은 실전 규칙을 알려줍니다.
• 파티클 시스템: GC 스톨을 피하는 사전 할당 풀(pool) 패턴과 스왑 삭제 방식 구현을 제시합니다.
• 플로우 필드 & L-시스템: 노이즈 각도 그리드 생성 → 파티클 조향, 문자열 재작성 + 터틀 그래픽스로 프랙탈 그리기를 단계별로 안내합니다.
• 금지 사항: 트레일 효과에서 clearRect 남용, 애니메이션 루프 안의 getImageData, DPR 무시, 핫 루프 내 객체 할당 등 성능 파괴 패턴을 코드 비교(BAD/GOOD)로 못박습니다.

이런 분께 추천

• 웹 프론트엔드 개발자 중 크리에이티브 코딩·인터랙티브 배경을 만들려는 분
• 히어로 섹션이나 랜딩 페이지에 움직이는 아트워크를 넣고 싶은 디자이너 겸 개발자
• 파티클이 수천 개일 때 프레임이 떨어지는 원인을 잡고 싶은 분

활용 예시

1. "랜딩 페이지 배경에 플로우 필드를 따라 흐르는 파티클 5000개를 넣어줘" → 풀 패턴 + 노이즈 각도 그리드 + 트레일 페이드 조합 코드를 생성.
2. "레티나에서 캔버스가 흐릿한데 고쳐줘" → DPR 대응 setupCanvas와 CSS 크기 분리 방식으로 수정.
3. "L-시스템으로 나무 프랙탈을 그리고 반복 횟수를 슬라이더로 조절하게 해줘" → 공리/규칙/각도 구조와 터틀 그래픽스 렌더러를 작성.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/AThevon/genjutsu/HEAD/skills/_jutsu/canvas-generative/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 AThevon/genjutsu 의 skills/_jutsu/canvas-generative 폴더를 내 ~/.claude/skills/canvas-generative/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.