p5.js 設計工具：使用說明

本工具及內附示例由 AI 協助製作，供課堂學習。不能直接作為符合本比賽「未使用 AI」聲明的參賽作品。

開啟

用 Chrome 直接雙擊 index.html。不用安裝，不用架設伺服器，離線也可以用（p5.js 1.6.0、p5.js-svg、jsPDF 已放在 lib/）。

你只需要改一個檔案：my_design.js

用 VS Code 打開 my_design.js，在 drawDesign(g, sheet, t) 裡寫設計。存檔後在瀏覽器按重新整理（⌘R）就會看到結果。

工具會自動：

1. 把你畫的東西只保留在白色面板內（鐵框斜線位、桶身圓孔、畫稿外的地方都會遮走）
2. 在上面蓋回專用畫稿原有線條（章程：不可改變原有線條）
3. 在畫稿 3 的指定位置排好作品題目和設計理念（在左邊欄輸入，會自動計字數）

所以你可以放心畫滿整張紙，不用自己計算形狀。

動態和隨機

• random()、noise() 可以直接用。工具每次重畫前會用介面上的 seed 重設，同一個 seed + t 永遠得到同一個畫面。
• 按「▶ 播放」看動態效果，找到最好看的一格就暫停，然後匯出。
• 不要用 millis()、frameCount、width、height、mouseX：匯出時解析度不同，畫面會不一致。

輔助和測試（不會出現在匯出檔）

• 邊沿風險帶（紅色）：面板邊緣 6 mm 內。重點元素和文字不要放在這裡（6 mm 是保守估計，章程只說「邊沿可能被裁剪」）。
• 10 mm 對位格：試印後用尺對照，確認比例正確。
• 灰階：明暗對比夠不夠。
• 遠看：縮小並模糊，模擬在街上遠看。主體還認得出嗎？

匯出

檔名會附上 seed 和 t，例如 壓縮桶飾面_A3列印_seed7_t2.35.pdf。請保留 my_design.js 和這兩個數字：得獎後要交的矢量檔必須與紙本完全一致。

列印效果提示

• 螢幕是 RGB 發光，紙張是 CMYK 反光。鮮綠、螢光藍、霓虹紫印出來會暗很多。一定要先試印一張。
• 大面積深色或黑底印出來容易偏灰、有條紋，也吸熱褪色。壓縮桶放在戶外，淺至中明度底色較耐看。
• blendMode(ADD)、發光、半透明疊加在紙上會變淡。
• 極細的線（< 0.3 mm）在 A3 上看得到，但放大裱貼在桶身後未必好看；也要考慮遠看時會否變成一片灰。

p5.js 常用語法（以 mm 為單位）

g.background(r, g, b)        // 整張填色（會被遮罩裁成面板形狀）
g.noStroke(); g.fill(r, g, b, a)
g.stroke(r, g, b); g.strokeWeight(0.8)   // 線寬 0.8 mm
g.rect(x, y, w, h); g.ellipse(x, y, w, h); g.line(x1, y1, x2, y2)
g.beginShape(); g.vertex(x, y); g.curveVertex(x, y); g.endShape(CLOSE)
g.push(); g.translate(x, y); g.rotate(a); /* ... */ g.pop()
noise(x * 0.01, y * 0.01)   // 0–1 平滑雜訊
random(a, b)                 // 隨機數（受 seed 控制）
lerpColor(color(...), color(...), 0.5)

（Graphics 的顏色函數：用 color() 建立顏色，再交給 g.fill()。）

檔案結構