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

p5.js 프로덕션 파이프라인은(는) 무엇을 하나요?

사용 시기

사용자가 p5.js 스케치, 창작 코딩, 제너레이티브 아트, 인터랙티브 시각화, 캔버스 애니메이션, 브라우저 기반 시각 아트, 데이터 시각화, 셰이더 효과 또는 모든 p5.js 프로젝트를 요청할 때 사용합니다.

포함된 내용

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

창작 기준

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

코드 한 줄을 작성하기 전에, 창작적 개념을 명확히 하십시오. 이 작품은 무엇을 전달합니까? 무엇이 시청자로 하여금 스크롤을 멈추게 합니까? 이것을 코드 튜토리얼 예제와 구별 짓는 것은 무엇입니까? 사용자의 프롬프트는 시작점입니다 — 창의적인 야망을 가지고 해석하십시오.

첫 렌더링에서의 우수성은 타협할 수 없습니다. 출력물은 첫 로딩 시 시각적으로 인상적이어야 합니다. p5.js 튜토리얼 연습, 기본 구성, 또는 "AI가 생성한 창작 코딩"처럼 보인다면 잘못된 것입니다. 제공하기 전에 다시 생각하십시오.

참조 어휘를 넘어서십시오. 참조 자료에 있는 노이즈 함수, 파티클 시스템, 컬러 팔레트, 셰이더 효과는 시작 어휘입니다. 모든 프로젝트에 대해 결합하고, 레이어링하고, 창조하십시오. 카탈로그는 물감 팔레트입니다 — 여러분이 그림을 그리는 것입니다.

적극적으로 창의적이 되십시오. 사용자가 "파티클 시스템"을 요청한다면, 창발적인 무리 짓기(flocking) 동작, 잔상 고스트 트레일, 팔레트 이동 깊이 안개, 숨 쉬는 배경 노이즈 필드를 갖춘 파티클 시스템을 제공하십시오. 사용자가 요청하지는 않았지만 감사하게 여길 시각적 디테일을 최소한 하나 포함하십시오.

밀도 높고, 레이어링되어 있으며, 신중하게 고안되었습니다. 모든 프레임이 볼 가치가 있어야 합니다. 절대 평평한 흰색 배경을 사용하지 마십시오. 항상 구성적 위계를 유지하십시오. 항상 의도적인 색상을 사용하십시오. 항상 가까이서 봐야만 보이는 미세한 디테일을 포함하십시오.

기능 수보다 일관된 미적 감각. 모든 요소는 통일된 시각 언어 — 공유된 색 온도, 일관된 선 두께 어휘, 조화로운 움직임 속도 — 를 제공해야 합니다. 서로 관련 없는 열 가지 효과가 있는 스케치는 함께 어울리는 세 가지 효과가 있는 스케치보다 나쁩니다.

모드

모드	입력	출력	참조
제너레이티브 아트	시드 / 매개변수	절차적 시각 구성 (정적 또는 애니메이션)	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
노이즈 어휘	펄린 노이즈, 심플렉스, 프랙탈 (옥타브), 도메인 와핑, 컬 노이즈	references/visual-effects.md § 노이즈
파티클 시스템	물리 기반, 무리 짓기, 트레일 그리기, 어트랙터 기반, 플로우 필드 추종	references/visual-effects.md § 파티클
도형 언어	기하학적 기본체, 사용자 정의 버텍스, 베지어 곡선, SVG 경로	references/shapes-and-geometry.md
모션 스타일	이징, 스프링 기반, 노이즈 기반, 물리 시뮬레이션, lerp, 계단식	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 § 오프스크린 버퍼
텍스처	펄린 표면, 점묘, 해칭, 하프톤, 픽셀 정렬	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 = [];

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

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

// === Draw 루프 ===
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단계의 개념과 시각적 결과가 일치할 때까지 매개변수 조정