用 ChatGPT 加速 p5.js 創作 — 提示工程在程式藝術中的應用

前言

身為一個喜歡用程式碼做視覺創作的人，我對 AI 輔助程式設計的態度經歷了一段轉變。一開始有點抗拒——「程式藝術的重點不就是自己寫程式嗎？」後來我慢慢理解了：AI 是工具，就像從手寫 PostScript 到用 Processing，從 Processing 到 p5.js，每一次工具的演進都讓創作者能更快速地把腦中的畫面變成現實。

重點從來不是「程式碼本身」，而是「最終的視覺效果」和「探索的過程」。如果 ChatGPT 能幫你在 5 分鐘內搭好一個骨架，讓你把剩下的 55 分鐘花在微調色彩、動態和構圖上，那何樂而不為？

這篇文章分享我使用 ChatGPT（以及其他大型語言模型）加速 p5.js 創作的經驗，包括有效的 prompt 寫法、迭代式精煉的流程、以及 AI 的限制和需要注意的地方。

有效的 Prompt 寫法

原則一：描述視覺效果，不是實作細節

新手常犯的錯誤是告訴 AI 怎麼寫程式，而不是告訴它你想要什麼效果。

不好的 prompt：

用 p5.js 寫一個 for loop，在 canvas 上畫 100 個圓，
用 random 設定它們的位置和大小

好的 prompt：

用 p5.js 創作一個生成式藝術作品：

深色背景上散佈著大小不一的半透明圓形
圓形的顏色使用暖色系漸層（橙到粉紅）
較大的圓在畫面中央聚集，越往邊緣越小
整體感覺像是顯微鏡下的細胞
Canvas 大小 800x800

第二個 prompt 描述的是「視覺結果」而非「實作步驟」。這讓 AI 可以選擇最適合的技術手段。

原則二：提供具體的美學參考

AI 理解視覺風格的能力比你想像的好。善用這一點：

用 p5.js 創作一個動態粒子系統，風格參考：

色彩像 James Turrell 的光裝置（柔和的漸層光暈）
動態像水母在深海中漂浮（緩慢、優雅、有韻律感）
構圖靈感來自日本枯山水（大面積留白，焦點集中）
粒子數量 200-300，有微妙的互動行為

原則三：設定明確的技術約束

技術要求：

純 p5.js，不使用外部函式庫
需要在 60fps 下流暢運行
使用 createGraphics 做多層合成
色彩使用 HSB 模式
Canvas 800x600

原則四：分階段請求

不要一次要求太多。把複雜的作品分成幾個階段：

第一階段：先做基本的粒子系統

200 個粒子從畫面中心向外擴散
粒子有生命週期，逐漸淡出
背景不清除，讓軌跡累積


（收到程式碼並確認基本行為正確後）

第二階段：加入互動

滑鼠位置會吸引附近的粒子
點擊會產生一波新的粒子爆發
加入微妙的噪音擾動讓軌跡更有機

實際範例：從 Prompt 到作品

範例一：流場視覺化

我的 prompt：

用 p5.js 做一個 Perlin noise 流場視覺化：

背景 #1a1a2e（深藍黑）
粒子沿著噪音場的方向流動，留下軌跡
粒子顏色根據它們的速度從冷色（藍）漸變到暖色（橙）
噪音場隨時間緩慢演變
粒子數量 1000，壽命 100-200 幀
整體風格像風場圖或海流圖

ChatGPT 生成的骨架（我做了一些修改後的版本）：

let particles = [];
const NUM_PARTICLES = 1000;
const NOISE_SCALE = 0.005;
let flowField;
let cols, rows;
const CELL_SIZE = 10;

function setup() {
  createCanvas(800, 800);
  colorMode(HSB, 360, 100, 100, 100);
  background(230, 60, 12);  // 深藍黑

cols = ceil(width / CELL_SIZE);
  rows = ceil(height / CELL_SIZE);

for (let i = 0; i < NUM_PARTICLES; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  // 不完全清除背景，讓軌跡累積
  // 用半透明矩形慢慢淡化舊軌跡
  noStroke();
  fill(230, 60, 12, 2);
  rect(0, 0, width, height);

let time = frameCount * 0.003;

for (let p of particles) {
    p.follow(time);
    p.update();
    p.display();
    p.checkEdge();
  }
}

class Particle {
  constructor() {
    this.reset();
  }

reset() {
    this.pos = createVector(random(width), random(height));
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = random(1, 3);
    this.life = random(100, 200);
    this.age = 0;
  }

follow(time) {
    let angle = noise(
      this.pos.x * NOISE_SCALE,
      this.pos.y * NOISE_SCALE,
      time
    )  TWO_PI  2;

let force = p5.Vector.fromAngle(angle);
    force.mult(0.5);
    this.acc.add(force);
  }

update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    this.acc.mult(0);
    this.age++;

if (this.age > this.life) {
      this.reset();
    }
  }

display() {
    let speed = this.vel.mag();
    // 速度映射到色相：藍(200) -> 橙(30)
    let hue = map(speed, 0, this.maxSpeed, 200, 30);
    let alpha = map(this.age, 0, this.life, 80, 0);

stroke(hue, 80, 90, alpha);
    strokeWeight(1);
    point(this.pos.x, this.pos.y);
  }

checkEdge() {
    if (this.pos.x < 0 || this.pos.x > width ||
        this.pos.y < 0 || this.pos.y > height) {
      this.reset();
    }
  }
}

AI 給出的骨架大約 80% 是我要的。我再手動微調了：

噪音的 scale 參數（讓流場更或更不密集）
色彩映射的具體數值（AI 選的冷暖色可能不夠好看）
淡化速度（那個 fill(230, 60, 12, 2) 中的 alpha 值）
粒子的尾跡效果（改用 line 連接前後位置，而非 point）

範例二：生成式花紋

prompt: 用 p5.js 做一個曼陀羅風格的生成式花紋：

從中心向外輻射的對稱圖案
8 重對稱（八等分圓）
圖案由曲線和圓弧組成，不要直線
配色使用 teal/gold 配色方案
靜態作品，可匯出 PNG
800x800 canvas

AI 會生成基本的旋轉對稱結構。你需要手動精煉的部分通常是：

曲線的具體形狀（貝茲曲線的控制點）
每一圈圖案的變化
不同層次間的大小和間距
線條粗細的漸變

迭代精煉流程（Iterative Refinement）

我總結出一套高效的 AI 輔助創作流程：

第一輪：概念骨架

向 AI 描述整體概念，拿到基本能跑的程式碼。這一輪不要求完美，只要方向對。

第二輪：技術修正

這段程式碼有幾個問題：粒子到邊緣會突然消失，需要平滑淡出背景淡化太快，軌跡幾乎看不到我想讓噪音場有兩個不同頻率的疊加

請修改這三個問題。

具體指出問題比模糊地說「不夠好」有效得多。

第三輪：美學微調

這一輪通常是自己手動做的，因為美學判斷是非常主觀的事。AI 可能給你「技術上正確」的色彩方案，但你的眼睛才是最終裁判。

第四輪：優化

這個 sketch 在粒子數超過 2000 時幀率掉到 30fps 以下。
請幫我優化效能，可能的方向：

空間分區（只計算鄰近粒子的互動）
離屏 canvas 的使用
減少不必要的三角函數計算

AI 的強項

1. 數學公式轉程式碼

「幫我用 p5.js 實作一個 Lissajous 曲線動畫」——AI 馬上就能把 x = A sin(at + δ) 和 y = B sin(bt) 轉成可執行的程式碼。

2. API 查詢

「p5.js 中怎麼做模糊效果？」——AI 可以告訴你用 filter(BLUR, radius) 或者用著色器（shader）做高斯模糊，比查文件快。

3. 演算法框架

粒子系統、boid flocking、反應擴散（reaction-diffusion）、L-system⋯⋯這些經典演算法的框架，AI 都能快速生成。

4. Debug

把有 bug 的程式碼貼給 AI，描述預期行為和實際行為的差異，AI 通常能快速定位問題。

AI 的弱項與注意事項

1. 美學判斷

AI 生成的配色和構圖往往「安全但平庸」。它傾向於使用教科書上的配色方案，而非大膽的、出人意料的色彩組合。永遠自己微調色彩。

2. 原創性

AI 傾向於生成「常見的」視覺效果。如果你要的是真正獨特的作品，需要在 AI 的基礎上加入你自己的創意。

3. 複雜的空間關係

當你的描述涉及精確的空間佈局（「這個圓要在那個矩形的右上角，距離 20px」），AI 偶爾會搞混座標。

4. 效能意識

AI 生成的程式碼通常不太考慮效能。對於粒子數量大或計算量大的 sketch，你幾乎一定需要自己做優化。

5. 幻覺

AI 偶爾會使用不存在的 p5.js API（比如把 Processing 的語法混進來）。收到程式碼後一定要實際跑跑看。

我的最佳實踐

先自己想清楚要什麼：在開啟 ChatGPT 之前，先手繪草圖或寫下文字描述。不然你會在 AI 的建議中迷失方向。

不要把 AI 的第一個回覆當最終結果：它是起點，不是終點。

學習 AI 生成的程式碼：不要只是複製貼上。閱讀它，理解它。這是免費的教學材料。

保留你的審美判斷：技術上可以外包給 AI，但藝術決策必須是你自己的。

善用不同模型：ChatGPT 和 Claude 各有長處。有時候同一個 prompt 丟給不同模型，會得到截然不同但都有啟發性的結果。

紀錄有效的 prompt：建立你自己的 prompt 範本庫，以後類似的需求可以快速修改重用。

Prompt 範本

以下是我常用的 p5.js 創作 prompt 範本，可以根據需要修改：

用 p5.js 創作一個 [動態/靜態] 的生成式藝術作品。

視覺描述：

[整體氛圍和風格]
[主要的視覺元素]
[色彩方案]
[動態行為（如果是動態的）]


技術要求：

Canvas 大小: [寬]x[高]
色彩模式: [RGB/HSB]
純 p5.js，不使用外部函式庫
[其他技術限制]


參考：

風格參考: [藝術家或作品]
技術參考: [演算法或技術名稱]

小結

AI 不會取代程式藝術家的創造力，但它確實改變了創作的工作流程。以前你可能要花一個下午搭骨架，現在可以花五分鐘拿到骨架，然後用一整個下午探索和精煉。

最重要的是，不要讓 AI 限制了你的想像力。AI 的建議是基於它見過的既有作品，而真正好的創作往往來自未曾見過的組合和嘗試。把 AI 當成一個精通技術但缺乏藝術品味的助手——讓它處理技術實作，你來做藝術決策。

前言