Lord1Egypt/awesome-skill-forge

p5.js 生產流程

使用時機

當使用者要求以下內容時使用：p5.js 草圖、創意程式設計、生成式藝術、互動式視覺化、Canvas 動畫、基於瀏覽器的視覺藝術、資料視覺化、著色器效果，或任何 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)	Canvas 渲染、數學、變換、事件處理
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 階段路徑：

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

1. 概念 — 闡明創意願景：情緒、色彩世界、運動詞彙、使其獨特之處
2. 設計 — 選擇模式、畫布大小、互動模型、色彩系統、匯出格式。將概念映射到技術決策
3. 程式碼 — 編寫包含內嵌 p5.js 的單一 HTML 檔案。結構：全域變數 → preload() → setup() → draw() → 輔助函式 → 類別 → 事件處理常式
4. 預覽 — 在瀏覽器中開啟，驗證視覺品質。在目標解析度下測試。檢查效能
5. 匯出 — 捕捉輸出：saveCanvas() 用於 PNG、saveGif() 用於 GIF、saveFrames() + ffmpeg 用於 MP4、Puppeteer 用於無頭批次處理
6. 驗證 — 輸出是否符合概念？在預期的顯示尺寸下是否視覺上引人注目？你是否會將它裱框？

創意方向

美學維度

維度	選項	參考資料
色彩系統	HSB/HSL、RGB、命名調色板、程序化和諧、漸層內插	references/color-systems.md
雜訊詞彙	Perlin 雜訊、Simplex 雜訊、分形 (倍頻)、域扭曲、Curl 雜訊	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
• 至少一個發明元素 — 自訂粒子行為、新穎的雜訊應用、獨特的互動回應

專案特定發明

對於每個專案，至少發明以下其中一項：

• 符合情緒的自訂調色板 (非預設)
• 新穎的雜訊場組合 (例如，Curl 雜訊 + 域扭曲 + 回饋)
• 獨特的粒子行為 (自訂力、自訂軌跡、自訂生成方式)
• 使用者未要求但能提升作品品質的互動機制
• 能創造視覺層次的構圖技巧

參數設計哲學

參數應從演算法中自然產生，而非來自通用選單。捫心自問：「這個系統的哪些屬性應該是可調整的？」

好的參數能展現演算法的特性：

• 數量 — 有多少粒子、分支、細胞 (控制密度)
• 尺度 — 雜訊頻率、元素大小、間距 (控制紋理)
• 速率 — 速度、成長率、衰減 (控制能量)
• 閾值 — 行為何時改變？(控制戲劇性)
• 比率 — 比例、力之間的平衡 (控制和諧)

壞的參數是與演算法無關的通用控制項：

• "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 的「效能」標籤頁來驗證 60fps
• 在目標匯出解析度下測試，而不僅僅是視窗大小
• 調整參數，直到視覺效果符合步驟 1 的概念

...