p5.js 生產管線是做什麼的？

使用時機

當使用者要求：p5.js 草稿、創意編碼、生成藝術、互動視覺化、畫布動畫、瀏覽器視覺藝術、資料視覺化、著色器效果，或任何 p5.js 專案時使用。

內容說明

這是一套用於互動與生成式視覺藝術的生產管線，採用 p5.js 開發。可建立瀏覽器基礎的草稿、生成藝術、資料視覺化、互動體驗、3D 場景、音訊反應視覺化與動態圖像 — 輸出為 HTML、PNG、GIF、MP4 或 SVG。涵蓋：2D/3D 渲染、雜訊與粒子系統、流場、著色器 (GLSL)、畫素處理、動態文字、WebGL 場景、音訊分析、滑鼠/鍵盤互動，以及無頭高解析度匯出。

創意標準

這是渲染在瀏覽器中的視覺藝術。畫布是媒介，演算法是畫筆。

在撰寫任何程式碼之前，請先清楚闡述創意概念。這件作品要傳達什麼？是什麼讓觀眾停下滾動？它與教學範例有何不同？使用者的提示只是起點 — 請以創意野心來詮釋它。

首次渲染的品質不容妥協。 輸出必須在首次載入時就具有視覺衝擊力。如果它看起來像是 p5.js 教學練習、預設配置或「AI 生成的創意編碼」，那就是失敗。在交付前重新思考。

超越參考詞彙。 參考資料中的雜訊函式、粒子系統、色板與著色器效果只是起始詞彙。對於每個專案，請組合、疊加並發明新東西。目錄是顏料盤——你來繪製畫作。

積極主動地創作。 如果使用者要求「一個粒子系統」，請交付一個具備湧現群聚行為、拖尾幽靈殘影、色調偏移景深霧，以及會呼吸的背景雜訊場的粒子系統。至少包含一個使用者沒要求但會欣賞的視覺細節。

密集、分層、深思熟慮。 每一幀都值得觀看。絕不使用純白背景。永遠要有構圖層次。永遠要有經過設計的色彩。永遠要有只在近看時才會出現的微觀細節。

一致的美學勝過功能數量。 所有元素必須服務於統一的視覺語言 — 共享的色溫、一致的筆觸粗細詞彙、和諧的動態速度。一個包含十個無關效果的草稿，不如一個只有三個但彼此協調的草稿。

模式

模式	輸入	輸出	參考
生成藝術	種子/參數	程序性視覺作品（靜態或動畫）	`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+) 新增：以 async setup() 取代 preload()、OKLCH/OKLAB 色彩模式、splineVertex()、著色器 .modify() API、可變字型、textToContours()、指標事件。p5.brush 需要此版本。請參閱 references/core-api.md § p5.js 2.0。

管線流程

每個專案都遵循相同的 6 階段路徑：

概念 → 設計 → 編碼 → 預覽 → 匯出 → 驗證

概念 — 闡述創意願景：情緒、色彩世界、動態詞彙、獨特之處
設計 — 選擇模式、畫布大小、互動模型、色彩系統、匯出格式。將概念映射為技術決策
編碼 — 撰寫單一 HTML 檔案，內嵌 p5.js。結構：全域變數 → preload() → setup() → draw() → 輔助函式 → 類別 → 事件處理器
預覽 — 在瀏覽器中開啟，驗證視覺品質。在目標解析度下測試效能
匯出 — 擷取輸出：saveCanvas() 用於 PNG，saveGif() 用於 GIF，saveFrames() + ffmpeg 用於 MP4，Puppeteer 用於無頭批次
驗證 — 輸出是否符合概念？在目標顯示尺寸下是否具有視覺衝擊力？你會願意把它裱框嗎？

創意方向

美學維度

維度	選項	參考
色彩系統	HSB/HSL、RGB、命名色板、程序性和諧、漸層插值	`references/color-systems.md`
雜訊詞彙	Perlin 雜訊、Simplex、分形 (倍頻)、域扭曲、卷積雜訊	`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` § 著色器
構圖	網格、放射狀、黃金比例、三分法、有機散佈、平鋪	`references/core-api.md` § 構圖
互動模型	滑鼠跟隨、點擊生成、拖曳、鍵盤狀態、滾輪驅動、麥克風輸入	`references/interaction.md`
混合模式	`BLEND`、`ADD`、`MULTIPLY`、`SCREEN`、`DIFFERENCE`、`EXCLUSION`、`OVERLAY`	`references/color-systems.md` § 混合模式
圖層	`createGraphics()` 離屏緩衝區、Alpha 合成、遮罩	`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 中的概念

p5.js 生產管線