Samin12/skills

p5.js 프로덕션 파이프라인

사용 시기

사용자가 다음을 요청할 때 사용하세요: p5.js 스케치, 크리에이티브 코딩, 생성 예술, 인터랙티브 시각화, 캔버스 애니메이션, 브라우저 기반 시각 예술, 데이터 시각화, 셰이더 효과 또는 모든 p5.js 프로젝트.

내부 구성

p5.js를 사용한 인터랙티브 및 생성 시각 예술을 위한 프로덕션 파이프라인. 브라우저 기반 스케치, 생성 예술, 데이터 시각화, 인터랙티브 경험, 3D 장면, 오디오 반응형 비주얼 및 모션 그래픽을 HTML, PNG, GIF, MP4 또는 SVG로 내보냅니다. 포함 내용: 2D/3D 렌더링, 노이즈 및 입자 시스템, 플로우 필드, 셰이더(GLSL), 픽셀 조작, 키네틱 타이포그래피, WebGL 장면, 오디오 분석, 마우스/키보드 상호작용, 헤드리스 고해상도 내보내기.

창의적 기준

이것은 브라우저에서 렌더링되는 시각 예술입니다. 캔버스는 매체이고, 알고리즘은 붓입니다.

코드를 한 줄 쓰기 전에, 창의적 개념을 명확히 하세요. 이 작품은 무엇을 전달합니까? 무엇이 보는 사람이 스크롤을 멈추게 합니까? 이 작품을 코드 튜토리얼 예제와 차별화하는 것은 무엇입니까? 사용자의 프롬프트는 시작점일 뿐입니다. 창의적인 야망으로 해석하세요.

첫 렌더링의 우수성은 협상의 대상이 아닙니다. 첫 로드 시 출력이 시각적으로 뛰어나야 합니다. p5.js 튜토리얼 연습, 기본 구성 또는 "AI 생성 크리에이티브 코딩"처럼 보이면 잘못된 것입니다. 배포하기 전에 다시 생각하세요.

참조 어휘를 넘어서세요. 참조 문서의 노이즈 함수, 입자 시스템, 색상 팔레트 및 셰이더 효과는 시작 어휘입니다. 모든 프로젝트에 대해 결합하고, 계층화하고, 창작하세요. 카탈로그는 물감 팔레트일 뿐입니다. 당신이 그림을 그립니다.

적극적으로 창의적이세요. 사용자가 "입자 시스템"을 요청하면, 창발적인 무리 행동, 잔상 고스트, 팔레트 이동 깊이 안개, 숨쉬는 배경 노이즈 필드가 있는 입자 시스템을 제공하세요. 사용자가 요청하지는 않았지만 감사할 시각적 디테일을 최소한 하나 포함하세요.

밀도 높고, 계층적이며, 세심하게. 모든 프레임은 볼 가치가 있어야 합니다. 절대 평평한 흰색 배경이 없어야 합니다. 항상 구성적 위계질서가 있어야 합니다. 항상 의도적인 색상이 있어야 합니다. 가까이서 봐야만 보이는 미세 디테일이 항상 있어야 합니다.

기능 수보다 응집력 있는 미학. 모든 요소는 통일된 시각적 언어(공유된 색온도, 일관된 선 두께 어휘, 조화로운 움직임 속도)를 제공해야 합니다. 서로 관련 없는 10가지 효과가 있는 스케치보다 함께 어울리는 3가지 효과가 있는 스케치가 더 좋습니다.

모드

모드	입력	출력	참조
생성 예술	시드 / 매개변수	절차적 시각 구성(정적 또는 애니메이션)	references/visual-effects.md
데이터 시각화	데이터셋 / API	인터랙티브 차트, 그래프, 사용자 정의 데이터 디스플레이	references/interaction.md
인터랙티브 경험	없음(사용자 주도)	마우스/키보드/터치 기반 스케치	references/interaction.md
애니메이션 / 모션 그래픽	타임라인 / 스토리보드	시간 기반 시퀀스, 키네틱 타이포그래피, 전환	references/animation.md
3D 장면	개념 설명	WebGL 지오메트리, 조명, 카메라, 재질	references/webgl-and-3d.md
이미지 처리	이미지 파일	픽셀 조작, 필터, 모자이크, 점묘법	references/visual-effects.md § 픽셀 조작
오디오 반응형	오디오 파일 / 마이크	사운드 기반 생성 비주얼	references/interaction.md § 오디오 입력

스택

프로젝트당 단일 자체 포함 HTML 파일. 빌드 단계 불필요.

계층	도구	목적
코어	p5.js 1.11.3 (CDN)	캔버스 렌더링, 수학, 변환, 이벤트 처리
3D	p5.js WebGL 모드	3D 지오메트리, 카메라, 조명, GLSL 셰이더
오디오	p5.sound.js (CDN)	FFT 분석, 진폭, 마이크 입력, 오실레이터
내보내기	내장 saveCanvas() / saveGif() / saveFrames()	PNG, GIF, 프레임 시퀀스 출력
캡처	CCapture.js (선택 사항)	결정적 프레임레이트 비디오 캡처(WebM, GIF)
헤드리스	Puppeteer + Node.js (선택 사항)	자동화된 고해상도 렌더링, ffmpeg를 통한 MP4
SVG	p5.js-svg 1.6.0 (선택 사항)	인쇄용 벡터 출력 - p5.js 1.x 필요
자연 매체	p5.brush (선택 사항)	수채화, 숯, 펜 - p5.js 2.x + WEBGL 필요
텍스처	p5.grain (선택 사항)	필름 그레인, 텍스처 오버레이
폰트	Google Fonts / loadFont()	OTF/TTF/WOFF2를 통한 사용자 정의 타이포그래피

버전 참고

p5.js 1.x (1.11.3)가 기본값입니다. 안정적이고, 문서화가 잘 되어 있으며, 라이브러리 호환성이 가장 넓습니다. 프로젝트에 2.x 기능이 필요한 경우가 아니면 이것을 사용하세요.

p5.js 2.x (2.2+)는 다음을 추가합니다: preload()를 대체하는 async setup(), OKLCH/OKLAB 색상 모드, splineVertex(), 셰이더 .modify() API, 가변 폰트, textToContours(), 포인터 이벤트. p5.brush에 필요합니다. references/core-api.md § p5.js 2.0을 참조하세요.

파이프라인

모든 프로젝트는 동일한 6단계 경로를 따릅니다:

개념 → 디자인 → 코드 → 미리보기 → 내보내기 → 검증

1. 개념 — 창의적 비전을 명확히 하기: 분위기, 색상 세계, 움직임 어휘, 이 작품을 독특하게 만드는 요소
2. 디자인 — 모드, 캔버스 크기, 상호작용 모델, 색상 시스템, 내보내기 형식을 선택합니다. 개념을 기술적 결정에 매핑합니다.
3. 코드 — 인라인 p5.js를 사용하여 단일 HTML 파일을 작성합니다. 구조: 전역 변수 → preload() → setup() → draw() → 도우미 함수 → 클래스 → 이벤트 핸들러
4. 미리보기 — 브라우저에서 열고 시각적 품질을 확인합니다. 대상 해상도에서 테스트합니다. 성능을 확인합니다.
5. 내보내기 — 출력 캡처: PNG용 saveCanvas(), GIF용 saveGif(), MP4용 saveFrames() + ffmpeg, 헤드리스 일괄 처리를 위한 Puppeteer
6. 검증 — 출력이 개념과 일치합니까? 의도된 표시 크기에서 시각적으로 뛰어납니까? 액자에 걸고 싶습니까?

크리에이티브 디렉션

미적 차원

차원	옵션	참조
색상 시스템	HSB/HSL, RGB, 명명된 팔레트, 절차적 조화, 그라데이션 보간	references/color-systems.md
노이즈 어휘	Perlin 노이즈, 심플렉스, 프랙탈(옥타브), 도메인 왜곡, 컬 노이즈	references/visual-effects.md § 노이즈
입자 시스템	물리 기반, 무리, 궤적 그리기, 어트랙터 기반, 플로우 필드 추종	references/visual-effects.md § 입자
형태 언어	기하학적 기본 요소, 사용자 정의 정점, 베지어 곡선, SVG 경로	references/shapes-and-geometry.md
모션 스타일	이징, 스프링 기반, 노이즈 기반, 물리 시뮬레이션, 선형 보간, 계단식	references/animation.md
타이포그래피	시스템 폰트, 로드된 OTF, textToPoints() 입자 텍스트, 키네틱	references/typography.md
셰이더 효과	GLSL 프래그먼트/버텍스, 필터 셰이더, 후처리, 피드백 루프	references/webgl-and-3d.md § 셰이더
구성	그리드, 방사형, 황금비율, 3분할 법칙, 유기적 분산, 타일형	references/core-api.md § 구성
상호작용 모델	마우스 추적, 클릭 생성, 드래그, 키보드 상태, 스크롤 기반, 마이크 입력	references/interaction.md
블렌드 모드	BLEND, ADD, MULTIPLY, SCREEN, DIFFERENCE, EXCLUSION, OVERLAY	references/color-systems.md § 블렌드 모드
레이어링	createGraphics() 오프스크린 버퍼, 알파 합성, 마스킹	references/core-api.md § 오프스크린 버퍼
텍스처	Perlin 표면, 점 찍기, 해칭, 하프톤, 픽셀 정렬	references/visual-effects.md § 텍스처 생성

프로젝트별 변형 규칙

기본 구성을 절대 사용하지 마세요. 모든 프로젝트에 대해:

• 사용자 정의 색상 팔레트 — 절대 fill(255, 0, 0) 원시 형태를 사용하지 마세요. 항상 3-7가지 색상으로 디자인된 팔레트를 사용하세요.
• 사용자 정의 선 두께 어휘 — 얇은 악센트(0.5), 중간 구조(1-2), 굵은 강조(3-5)
• 배경 처리 — 절대 평범한 background(0) 또는 background(255)를 사용하지 마세요. 항상 텍스처, 그라데이션 또는 레이어링 처리.
• 모션 다양성 — 요소마다 다른 속도. 주 요소 1x, 보조 요소 0.3x, 주변 요소 0.1x
• 최소 하나의 창작 요소 — 사용자 정의 입자 동작, 새로운 노이즈 적용, 독특한 상호작용 응답

프로젝트별 창작

모든 프로젝트에 대해, 다음 중 최소 하나를 창작하세요:

• 분위기에 맞는 사용자 정의 색상 팔레트(사전 설정 아님)
• 새로운 노이즈 필드 조합(예: 컬 노이즈 + 도메인 왜곡 + 피드백)
• 독특한 입자 동작(사용자 정의 힘, 사용자 정의 궤적, 사용자 정의 생성)
• 사용자가 요청하지 않았지만 작품을 향상시키는 상호작용 메커니즘
• 시각적 위계질서를 만드는 구성 기술

매개변수 디자인 철학

매개변수는 일반 메뉴가 아닌 알고리즘에서 나와야 합니다. 질문하세요: "이 시스템의 어떤 속성을 조정 가능하게 만들어야 할까?"

좋은 매개변수는 알고리즘의 특성을 드러냅니다:

• 양 — 입자, 가지, 세포의 수(밀도 제어)
• 척도 — 노이즈 주파수, 요소 크기, 간격(텍스처 제어)
• 비율 — 속도, 성장률, 감쇠(에너지 제어)
• 임계값 — 행동은 언제 변하는가?(드라마 제어)
• 비율 — 힘 간의 비율, 균형(조화 제어)

나쁜 매개변수는 알고리즘과 관련 없는 일반적인 제어입니다:

• "color1", "color2", "size" — 맥락 없이 의미 없음
• 관련 없는 효과를 위한 토글 스위치
• 외형만 바꾸고 행동은 바꾸지 않는 매개변수

모든 매개변수는 알고리즘이 어떻게 보이는지뿐만 아니라 어떻게 생각하는지를 바꿔야 합니다. 노이즈 옥타브를 변경하는 "난류" 매개변수는 좋습니다. ellipse() 반경만 변경하는 "입자 크기" 슬라이더는 피상적입니다.

워크플로우

1단계: 창의적 비전

코드 작성 전에, 다음을 명확히 하세요:

• 분위기 / 분위기: 보는 사람이 무엇을 느껴야 합니까? 사색적? 활기찬? 불안한? 장난기 있는?
• 시각적 스토리: 시간이 지남에 따라(또는 상호작용 시) 어떤 일이 발생합니까? 구축? 붕괴? 변환? 진동?
• 색상 세계: 따뜻함/차가움? 단색? 보색? 지배적인 색상은 무엇입니까? 악센트는?
• 형태 언어: 유기적 곡선? 날카로운 기하학? 점? 선? 혼합?
• 모션 어휘: 느린 표류? 폭발적 분출? 숨쉬는 맥박? 기계적 정밀도?
• 이것을 다르게 만드는 것: 이 스케치를 독특하게 만드는 한 가지는 무엇입니까?

사용자의 프롬프트를 미적 선택에 매핑하세요. "편안한 생성 배경"은 "글리치 데이터 시각화"와 완전히 다른 모든 것을 요구합니다.

2단계: 기술 디자인

• 모드 — 위 표의 7가지 모드 중 하나
• 캔버스 크기 — 가로 1920x1080, 세로 1080x1920, 정사각형 1080x1080 또는 반응형 windowWidth/windowHeight
• 렌더러 — P2D(기본값) 또는 WEBGL(3D, 셰이더, 고급 블렌드 모드용)
• 프레임 속도 — 60fps(인터랙티브), 30fps(주변 애니메이션) 또는 noLoop()(정적 생성)
• 내보내기 대상 — 브라우저 디스플레이, PNG 스틸, GIF 루프, MP4 비디오, SVG 벡터
• 상호작용 모델 — 수동(입력 없음), 마우스 기반, 키보드 기반, 오디오 반응형, 스크롤 기반
• 뷰어 UI — 인터랙티브 생성 예술의 경우, 시드 탐색, 매개변수 슬라이더 및 다운로드를 제공하는 templates/viewer.html에서 시작하세요. 간단한 스케치 또는 비디오 내보내기의 경우, 기본 HTML을 사용하세요.

3단계: 스케치 코딩

인터랙티브 생성 예술(시드 탐색, 매개변수 튜닝)의 경우: templates/viewer.html에서 시작하세요. 먼저 템플릿을 읽고, 고정된 섹션(시드 탐색, 작업)을 유지하고, 알고리즘과 매개변수 제어를 교체하세요. 그러면 사용자에게 시드 이전/다음/무작위/이동, 실시간 업데이트가 있는 매개변수 슬라이더 및 PNG 다운로드를 제공합니다. 모두 연결되어 있습니다.

애니메이션, 비디오 내보내기 또는 간단한 스케치의 경우: 기본 HTML을 사용하세요.

단일 HTML 파일. 구조:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>프로젝트 이름</title>
  <script>p5.disableFriendlyErrors = true;</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> -->
  <!-- <script src="https://unpkg.com/[email protected]"></script> -->  <!-- SVG 내보내기 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> -->  <!-- 비디오 캡처 -->
  <style>
    html, body { margin: 0; padding: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<script>
// === 설정 ===
const CONFIG = {
  seed: 42,
  // ... 프로젝트별 매개변수
};

// === 색상 팔레트 ===
const PALETTE = {
  bg: '#0a0a0f',
  primary: '#e8d5b7',
  // ...
};

// === 전역 상태 ===
let particles = [];

// === 미리 로드 (폰트, 이미지, 데이터) ===
function preload() {
  // font = loadFont('...');
}

// === 셋업 ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  colorMode(HSB, 360, 100, 100, 100);
  // 상태 초기화...
}

// === 드로우 루프 ===
function draw() {
  // 프레임 렌더링...
}

// === 도우미 함수 ===
// ...

// === 클래스 ===
class Particle {
  // ...
}

// === 이벤트 핸들러 ===
function mousePressed() { /* ... */ }
function keyPressed() { /* ... */ }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
</script>
</body>
</html>

핵심 구현 패턴:

• 시드 기반 무작위성: 재현성을 위해 항상 randomSeed() + noiseSeed()
• 색상 모드: 직관적인 색상 제어를 위해 colorMode(HSB, 360, 100, 100, 100) 사용
• 상태 분리: 매개변수는 CONFIG, 색상은 PALETTE, 가변 상태는 전역 변수로
• 클래스 기반 엔티티: 입자, 에이전트, 형태를 update() + display() 메서드가 있는 클래스로
• 오프스크린 버퍼: 레이어 구성, 궤적, 마스크를 위한 createGraphics()

4단계: 미리보기 및 반복

• HTML 파일을 브라우저에서 직접 엽니다. 기본 스케치에는 서버가 필요 없습니다.
• 로컬 파일의 loadImage()/loadFont()의 경우: scripts/serve.sh 또는 python3 -m http.server 사용
• Chrome DevTools Performance 탭을 사용하여 60fps 확인
• 창 크기뿐만 아니라 대상 내보내기 해상도에서 테스트
• 시각적 결과가 1단계의 개념과 일치할 때까지 매개변수 조정