P5Js

使用 p5.js 進行交互式和生成式視覺藝術的生產流水線。創建基於瀏覽器的草圖、生成藝術、數據可視化、交互體驗、3D 場景、音頻反應視覺效果和動態圖形——導出為 HTML、PNG、GIF、MP4 或 SVG 格式。涵蓋：2D/3D 渲染、噪聲和粒子系統、流場、著色器（GLSL）、像素操作、動態排版、WebGL 場景、音頻分析、鼠標/鍵盤交互以及無頭高分辨率導出。當用戶請求以下內容時使用：p5.js 草圖、創意編程、生成藝術、交互式可視化、Canvas 動畫、基於瀏覽器的視覺藝術、數據可視化、著色器效果或任何 p5.js 項目。

技能元數據

來源	捆綁（默認安裝）
路徑	skills/creative/p5js
版本	1.0.0
標籤	creative-coding, generative-art, p5js, canvas, interactive, visualization, webgl, shaders, animation
相關技能	ascii-video, manim-video, excalidraw

參考：完整 SKILL.md

信息

以下是 Hermes 在觸發此技能時加載的完整技能定義。這是技能激活時代理看到的指令。

p5.js 生產流水線

創意標準

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

在編寫第一行代碼之前，闡明創意概念。這件作品傳達什麼？是什麼讓觀看者停止滾動？它與代碼教程示例有何不同？用戶的提示只是一個起點——要以創意雄心來詮釋它。

首次渲染的卓越表現是不可妥協的。 輸出必須在首次加載時就具有視覺衝擊力。如果它看起來像 p5.js 教程練習、默認配置或“AI 生成的創意編程”，那就是錯誤的。在發佈前重新思考。

超越參考詞彙。 參考中的噪聲函數、粒子系統、調色板和著色器效果只是起始詞彙。對於每個項目，都要結合、分層和創新。目錄是一盤顏料——由你來繪製畫作。

主動發揮創意。 如果用戶要求“一個粒子系統”，那就交付一個具有湧現群集行為、拖尾幽靈回聲、調色板偏移的深度霧效以及呼吸背景噪聲場的粒子系統。包含至少一個用戶未要求但會欣賞的視覺細節。

密集、分層、深思熟慮。 每一幀都應值得觀看。絕不要純白背景。始終要有構圖層次。始終要有 intentional 色彩。始終要有僅在仔細檢查時才顯現的微細節。

統一的美學勝過功能數量。 所有元素必須服務於統一的視覺語言——共享的色溫、一致的描邊粗細詞彙、和諧的運動速度。擁有十個不相關效果的草圖不如擁有三個彼此協調的效果的草圖。

模式

模式	輸入	輸出	參考
生成藝術	種子 / 參數	程序化視覺構圖（靜態或動畫）	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 § Pixel Manipulation
音頻反應	音頻文件 / 麥克風	聲音驅動的生成視覺效果	references/interaction.md § Audio Input

技術棧

每個項目使用單個自包含的 HTML 文件。無需構建步驟。

層級	工具	用途
Core	p5.js 1.11.3 (CDN)	Canvas 渲染、數學運算、變換、事件處理
3D	p5.js WebGL mode	3D 幾何體、相機、光照、GLSL 著色器
Audio	p5.sound.js (CDN)	FFT 分析、振幅、麥克風輸入、振盪器
Export	內置 saveCanvas() / saveGif() / saveFrames()	PNG、GIF、幀序列輸出
Capture	CCapture.js（可選）	確定性幀率視頻捕獲（WebM、GIF）
Headless	Puppeteer + Node.js（可選）	自動化高分辨率渲染，通過 ffmpeg 生成 MP4
SVG	p5.js-svg 1.6.0（可選）	用於打印的矢量輸出 — 需要 p5.js 1.x
Natural media	p5.brush（可選）	水彩、炭筆、鋼筆效果 — 需要 p5.js 2.x + WEBGL
Texture	p5.grain（可選）	膠片顆粒、紋理疊加
Fonts	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 個階段路徑：

CONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFY

1. CONCEPT（概念） — 闡明創意願景：情緒、色彩世界、運動詞彙、獨特性所在
2. DESIGN（設計） — 選擇模式、畫布尺寸、交互模型、色彩系統、導出格式。將概念映射為技術決策
3. CODE（編碼） — 編寫包含內聯 p5.js 的單個 HTML 文件。結構：全局變量 → preload() → setup() → draw() → 輔助函數 → 類 → 事件處理器
4. PREVIEW（預覽） — 在瀏覽器中打開，驗證視覺質量。在目標分辨率下測試。檢查性能
5. EXPORT（導出） — 捕獲輸出：使用 saveCanvas() 生成 PNG，使用 saveGif() 生成 GIF，使用 saveFrames() + ffmpeg 生成 MP4，使用 Puppeteer 進行無頭批量處理
6. VERIFY（驗證） — 輸出是否符合概念？在預期展示尺寸下是否具有視覺衝擊力？你會將它裝裱起來嗎？

創意指導

美學維度

維度	選項	參考
色彩系統	HSB/HSL、RGB、命名調色板、程序化和聲、漸變插值	references/color-systems.md
噪點詞彙	Perlin 噪點、simplex、分形（八度）、域扭曲、旋度噪點	references/visual-effects.md § Noise
粒子系統	基於物理、群集、軌跡繪製、吸引子驅動、流場跟隨	references/visual-effects.md § Particles
形狀語言	幾何圖元、自定義頂點、貝塞爾曲線、SVG 路徑	references/shapes-and-geometry.md
運動風格	緩動、基於彈簧、噪點驅動、物理模擬、線性插值、步進	references/animation.md
排版	系統字體、加載的 OTF、textToPoints() 粒子文本、動態排版	references/typography.md
著色器效果	GLSL 片段/頂點、濾鏡著色器、後處理、反饋循環	references/webgl-and-3d.md § Shaders
構圖	網格、徑向、黃金比例、三分法、有機散佈、平鋪	references/core-api.md § Composition
交互模型	鼠標跟隨、點擊生成、拖拽、鍵盤狀態、滾動驅動、麥克風輸入	references/interaction.md
混合模式	BLEND、ADD、MULTIPLY、SCREEN、DIFFERENCE、EXCLUSION、OVERLAY	references/color-systems.md § Blend Modes
分層	createGraphics() 離屏緩衝區、Alpha 合成、遮罩	references/core-api.md § Offscreen Buffers
紋理	Perlin 表面、點畫法、排線、半色調、像素排序	references/visual-effects.md § Texture Generation

單項目變體規則

切勿使用默認配置。對於每個項目：

• 自定義調色板 — 絕不使用原始的 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 步：創意願景

在編寫任何代碼之前，明確闡述：

• 情緒/氛圍：觀眾應該感受到什麼？沉思？充滿活力？不安？ playful（趣味盎然）？
• 視覺故事：隨著時間的推移（或在交互過程中）會發生什麼？構建？衰變？變換？振盪？
• 色彩世界：暖色/冷色？單色？互補色？主色調是什麼？強調色是什麼？
• 形狀語言：有機曲線？銳利幾何？點？線？混合？
• 運動詞彙：緩慢漂移？爆炸式迸發？呼吸脈衝？機械精度？
• 獨特之處：讓這幅草圖獨一無二的那個要素是什麼？

將用戶的提示映射到美學選擇上。“放鬆的生成式背景”與“故障數據可視化”需要完全不同的處理方式。

第 2 步：技術設計

• 模式 — 上表中的 7 種模式之一
• 畫布尺寸 — 橫向 1920x1080，縱向 1080x1920，正方形 1080x1080，或響應式 windowWidth/windowHeight
• 渲染器 — P2D（默認）或 WEBGL（用於 3D、著色器、高級混合模式）
• 幀率 — 60fps（交互式），30fps（環境動畫），或 noLoop()（靜態生成式）
• 導出目標 — 瀏覽器顯示、PNG 靜幀、GIF 循環、MP4 視頻、SVG 矢量
• 交互模型 — 被動（無輸入）、鼠標驅動、鍵盤驅動、音頻反應、滾動驅動
• 用戶界面 — 對於交互式生成藝術，從 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>Project Name</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/p5.js-svg@1.6.0"></script> -->  <!-- SVG export -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> -->  <!-- video capture -->
  <style>
    html, body { margin: 0; padding: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<script>
// === Configuration ===
const CONFIG = {
  seed: 42,
  // ... project-specific params
};

// === Color Palette ===
const PALETTE = {
  bg: '#0a0a0f',
  primary: '#e8d5b7',
  // ...
};

// === Global State ===
let particles = [];

// === Preload (fonts, images, data) ===
function preload() {
  // font = loadFont('...');
}

// === Setup ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  colorMode(HSB, 360, 100, 100, 100);
  // Initialize state...
}

// === Draw Loop ===
function draw() {
  // Render frame...
}

// === Helper Functions ===
// ...

// === Classes ===
class Particle {
  // ...
}

// === Event Handlers ===
function mousePressed() { /* ... */ }
function keyPressed() { /* ... */ }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
</script>
</body>
</html>

關鍵實現模式：

• ** seeded 隨機性**：始終使用 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 步中的概念相匹配

第 5 步：導出

格式	方法	命令
PNG	在 keyPressed() 中使用 saveCanvas('output', 'png')	按 's' 保存
高分辨率 PNG	Puppeteer 無頭捕獲	node scripts/export-frames.js sketch.html --width 3840 --height 2160 --frames 1
GIF	saveGif('output', 5) — 捕獲 N 秒	按 'g' 保存
幀序列	saveFrames('frame', 'png', 10, 30) — 30fps 下 10 秒	然後執行 ffmpeg -i frame-%04d.png -c:v libx264 output.mp4
MP4	Puppeteer 幀捕獲 + ffmpeg	bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 30
SVG	使用 p5.js-svg 的 createCanvas(w, h, SVG)	save('output.svg')

第 6 步：質量驗證

• 是否符合願景？ 將輸出與創意概念進行比較。如果看起來平庸通用，請返回第 1 步
• 分辨率檢查：在目標顯示尺寸下是否清晰？有無鋸齒偽影？
• 性能檢查：在瀏覽器中是否能保持 60fps？（動畫最低要求 30fps）
• 色彩檢查：色彩搭配是否協調？在亮色和暗色顯示器上進行測試
• 邊界情況：在畫布邊緣會發生什麼？調整大小時？運行 10 分鐘後？

關鍵實現說明

性能 — 首先禁用 FES

友好錯誤系統（FES）會增加高達 10 倍的開銷。在每個生產環境草圖中禁用它：

p5.disableFriendlyErrors = true;  // BEFORE setup()

function setup() {
  pixelDensity(1);  // prevent 2x-4x overdraw on retina
  createCanvas(1920, 1080);
}

在熱點循環（粒子、像素操作）中，使用 Math.* 而非 p5 封裝函數——速度提升顯著：

// In draw() or update() hot paths:
let a = Math.sin(t);          // not sin(t)
let r = Math.sqrt(dx*dx+dy*dy); // not dist() — or better: skip sqrt, compare magSq
let v = Math.random();        // not random() — when seed not needed
let m = Math.min(a, b);       // not min(a, b)

切勿在 draw() 中使用 console.log()。切勿在 draw() 中操作 DOM。參見 references/troubleshooting.md § Performance。

種子隨機性 — 始終使用

每個生成式草圖都必須可復現。相同的種子，相同的輸出。

function setup() {
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  // All random() and noise() calls now deterministic
}

切勿對生成內容使用 Math.random() — 僅用於對性能敏感的非視覺代碼。視覺元素始終使用 random()。如果需要隨機種子：CONFIG.seed = floor(random(99999))。

生成藝術平臺支持（fxhash / Art Blocks）

對於生成藝術平臺，將 p5 的偽隨機數生成器（PRNG）替換為平臺的確定性隨機數生成器：

// fxhash convention
const SEED = $fx.hash;              // unique per mint
const rng = $fx.rand;               // deterministic PRNG
$fx.features({ palette: 'warm', complexity: 'high' });

// In setup():
randomSeed(SEED);   // for p5's noise()
noiseSeed(SEED);

// Replace random() with rng() for platform determinism
let x = rng() * width;  // instead of random(width)

參見 references/export-pipeline.md § Platform Export。

顏色模式 — 使用 HSB

HSB（色相、飽和度、亮度）在生成藝術中比 RGB 更易於使用：

colorMode(HSB, 360, 100, 100, 100);
// Now: fill(hue, sat, bri, alpha)
// Rotate hue: fill((baseHue + offset) % 360, 80, 90)
// Desaturate: fill(hue, sat * 0.3, bri)
// Darken: fill(hue, sat, bri * 0.5)

切勿硬編碼原始 RGB 值。定義調色板對象，以程序化方式派生變體。參見 references/color-systems.md。

噪聲 — 多倍頻程，而非原始噪聲

原始 noise(x, y) 看起來像平滑的斑點。分層倍頻程以獲得自然紋理：

function fbm(x, y, octaves = 4) {
  let val = 0, amp = 1, freq = 1, sum = 0;
  for (let i = 0; i < octaves; i++) {
    val += noise(x * freq, y * freq) * amp;
    sum += amp;
    amp *= 0.5;
    freq *= 2;
  }
  return val / sum;
}

對於流動的有機形態，使用域扭曲（domain warping）：將噪聲輸出反饋作為噪聲輸入座標。參見 references/visual-effects.md。

createGraphics() 用於圖層 — 非可選

扁平的單次渲染看起來平淡無奇。使用離屏緩衝區進行合成：

let bgLayer, fgLayer, trailLayer;
function setup() {
  createCanvas(1920, 1080);
  bgLayer = createGraphics(width, height);
  fgLayer = createGraphics(width, height);
  trailLayer = createGraphics(width, height);
}
function draw() {
  renderBackground(bgLayer);
  renderTrails(trailLayer);   // persistent, fading
  renderForeground(fgLayer);  // cleared each frame
  image(bgLayer, 0, 0);
  image(trailLayer, 0, 0);
  image(fgLayer, 0, 0);
}

性能 — 儘可能向量化

p5.js 的繪製調用開銷很大。對於數千個粒子：

// SLOW: individual shapes
for (let p of particles) {
  ellipse(p.x, p.y, p.size);
}

// FAST: single shape with beginShape()
beginShape(POINTS);
for (let p of particles) {
  vertex(p.x, p.y);
}
endShape();

// FASTEST: pixel buffer for massive counts
loadPixels();
for (let p of particles) {
  let idx = 4 * (floor(p.y) * width + floor(p.x));
  pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = 255;
}
updatePixels();

參見 references/troubleshooting.md § Performance。

多草圖使用實例模式

全局模式會汙染 window 對象。在生產環境中，使用實例模式：

const sketch = (p) => {
  p.setup = function() {
    p.createCanvas(800, 800);
  };
  p.draw = function() {
    p.background(0);
    p.ellipse(p.mouseX, p.mouseY, 50);
  };
};
new p5(sketch, 'canvas-container');

當在一個頁面上嵌入多個草圖或與框架集成時，這是必需的。

WebGL 模式注意事項

• createCanvas(w, h, WEBGL) — 原點位於中心，而非左上角
• Y 軸反轉（在 WEBGL 中正 Y 向上，在 P2D 中正 Y 向下）
• 使用 translate(-width/2, -height/2) 以獲得類似 P2D 的座標
• 每次變換周圍都要使用 push()/pop() — 矩陣棧溢出是靜默發生的
• 在 rect()/plane() 之前調用 texture() — 而不是之後
• 自定義著色器：createShader(vert, frag) — 在多種瀏覽器上測試

導出 — 按鍵綁定約定

每個草圖都應在 keyPressed() 中包含以下內容：

function keyPressed() {
  if (key === 's' || key === 'S') saveCanvas('output', 'png');
  if (key === 'g' || key === 'G') saveGif('output', 5);
  if (key === 'r' || key === 'R') { randomSeed(millis()); noiseSeed(millis()); }
  if (key === ' ') CONFIG.paused = !CONFIG.paused;
}

無頭視頻導出 — 使用 noLoop()

對於通過 Puppeteer 進行的無頭渲染，草圖必須在 setup 中使用 noLoop()。否則，p5 的 draw 循環會自由運行，而截圖速度較慢 — 草圖運行過快，導致幀跳過或重複。

function setup() {
  createCanvas(1920, 1080);
  pixelDensity(1);
  noLoop();                    // capture script controls frame advance
  window._p5Ready = true;      // signal readiness to capture script
}

bundled 的 scripts/export-frames.js 會檢測 _p5Ready 並在每次捕獲時調用一次 redraw()，以實現精確的 1:1 幀對應。參見 references/export-pipeline.md § Deterministic Capture。

對於多場景視頻，使用每片段架構：每個場景一個 HTML 文件，獨立渲染，使用 ffmpeg -f concat 拼接。參見 references/export-pipeline.md § Per-Clip Architecture。

Agent 工作流

構建 p5.js 草圖時：

1. 編寫 HTML 文件 — 單個自包含文件，所有代碼內聯
2. 在瀏覽器中打開 — macOS 使用 open sketch.html，Linux 使用 xdg-open sketch.html
3. 本地資源（字體、圖片）需要服務器：在項目目錄中運行 python3 -m http.server 8080，然後打開 http://localhost:8080/sketch.html
4. 導出 PNG/GIF — 添加上述 keyPressed() 快捷鍵，告知用戶按哪個鍵
5. 無頭導出 — node scripts/export-frames.js sketch.html --frames 300 用於自動幀捕獲（草圖必須使用 noLoop() + _p5Ready）
6. MP4 渲染 — bash scripts/render.sh sketch.html output.mp4 --duration 30
7. 迭代優化 — 編輯 HTML 文件，用戶刷新瀏覽器以查看更改
8. 按需加載參考文檔 — 使用 skill_view(name="p5js", file_path="references/...") 在實現過程中按需加載特定參考文件

性能目標

指標	目標
幀率（交互式）	持續 60fps
幀率（動畫導出）	最低 30fps
粒子數量（P2D 形狀）	60fps 下 5,000-10,000
粒子數量（像素緩衝區）	60fps 下 50,000-100,000
畫布分辨率	最高 3840x2160（導出），1920x1080（交互式）
文件大小（HTML）	< 100KB（不包括 CDN 庫）
加載時間	< 2s 至首幀

參考資料

文件	內容
references/core-api.md	Canvas 設置、座標系、繪製循環、push()/pop()、離屏緩衝區、合成模式、pixelDensity()、響應式設計
references/shapes-and-geometry.md	2D 基本圖形、beginShape()/endShape()、貝塞爾/Catmull-Rom 曲線、vertex() 系統、自定義形狀、p5.Vector、有符號距離場、SVG 路徑轉換
references/visual-effects.md	噪聲（Perlin、分形、域扭曲、旋度）、流場、粒子系統（物理、群聚、軌跡）、像素操作、紋理生成（點畫、影線、半色調）、反饋循環、反應擴散
references/animation.md	基於幀的動畫、緩動函數、lerp()/map()、彈簧物理、狀態機、時間軸序列、基於 millis() 的計時、過渡模式
references/typography.md	text()、loadFont()、textToPoints()、動態排版、文本遮罩、字體度量、響應式文本大小調整
references/color-systems.md	colorMode()、HSB/HSL/RGB、lerpColor()、paletteLerp()、程序化調色板、色彩和諧、blendMode()、漸變渲染、精選調色板庫
references/webgl-and-3d.md	WEBGL 渲染器、3D 基本圖形、相機、光照、材質、自定義幾何體、GLSL 著色器（createShader()、createFilterShader()）、幀緩衝區、後處理
references/interaction.md	鼠標事件、鍵盤狀態、觸摸輸入、DOM 元素、createSlider()/createButton()、音頻輸入（p5.sound FFT/振幅）、滾動驅動動畫、響應式事件
references/export-pipeline.md	saveCanvas()、saveGif()、saveFrames()、確定性無頭捕獲、ffmpeg 幀轉視頻、CCapture.js、SVG 導出、每片段架構、平臺導出（fxhash）、視頻注意事項
references/troubleshooting.md	性能分析、每像素預算、常見錯誤、瀏覽器兼容性、WebGL 調試、字體加載問題、像素密度陷阱、內存洩漏、CORS
templates/viewer.html	交互式查看器模板：種子導航（上一個/下一個/隨機/跳轉）、參數滑塊、下載 PNG、響應式 Canvas。從此起步構建可探索的生成藝術

---

創意發散（僅在用戶請求實驗性/創造性/獨特輸出時使用）

如果用戶要求創造性、實驗性、令人驚訝或非傳統的輸出，請選擇最合適的策略，並在生成代碼之前逐步推理。

• 概念融合 — 當用戶指名要組合兩件事物或想要混合美學時
• SCAMPER — 當用戶想要對已知的生成藝術模式進行變奏時
• 遠距離聯想 — 當用戶給出單一概念並希望進行探索時（“製作關於時間的作品”）

概念融合

1. 命名兩個不同的視覺系統（例如，粒子物理 + 手寫體）
2. 映射對應關係（粒子 = 墨滴，力 = 筆壓，場 = 字母形態）
3. 選擇性融合 — 保留能產生有趣湧現視覺效果的映射
4. 將融合作為統一系統進行編碼，而不是兩個系統並排存在

SCAMPER 變換

選取一個已知的生成模式（流場、粒子系統、L-系統、細胞自動機）並系統地對其進行變換：

• 替代 (Substitute)：用文本字符替換圓形，用漸變替換線條
• 結合 (Combine)：合併兩種模式（流場 + 沃羅諾伊圖）
• 適應 (Adapt)：將 2D 模式應用於 3D 投影
• 修改 (Modify)：誇張縮放比例，扭曲座標空間
• 目的 (Purpose)：將物理模擬用於排版，將排序算法用於色彩
• 消除 (Eliminate)：移除網格，移除顏色，移除對稱性
• 反向 (Reverse)：向後運行模擬，反轉參數空間

遠距離聯想

1. 錨定用戶的概念（例如，“孤獨”）
2. 在三個距離上生成聯想：
   • 近（顯而易見）：空房間、單個人物、寂靜
   • 中（有趣）：魚群中一條遊錯方向的魚、沒有通知的手機、地鐵車廂之間的間隙
   • 遠（抽象）：質數、漸近曲線、凌晨 3 點的顏色
3. 發展中距離聯想 — 它們具體到足以可視化，又意外到足以引人入勝