在文章裡放 p5.js 作品

程式作品可以直接嵌在文章裡，不用截圖。有兩種做法，用途不一樣。

方法一：放自己 repo 裡的 sketch（推薦）

程式碼放在 src/assets/sketches/，文章裡寫一行就會執行：

上面那個作品的原始碼在 src/assets/sketches/wave.js。 打開它、把 LINE_COUNT 從 28 改成 8，存檔重新整理，就會看到差別。

寫法：

{% p5 "wave" %}
{% p5 "wave", "作品標題" %}
{% p5 "wave", "作品標題", 500 %}

第三個數字是高度（像素），不寫的話預設 420。

從 OpenProcessing 搬程式碼過來

OpenProcessing 上的程式通常長這樣（global mode）：

function setup() {
  createCanvas(400, 400);
}
function draw() {
  circle(mouseX, mouseY, 40);
}

搬過來要包一層，並在每個 p5 指令前面加 p.：

export default function (p) {
  p.setup = () => {
    p.createCanvas(400, 400);
  };
  p.draw = () => {
    p.circle(p.mouseX, p.mouseY, 40);
  };
}

看起來多此一舉，其實是為了讓同一頁能放好幾個作品而不打架。 需要畫布寬度自動跟著版面走的話，用 p.holder.clientWidth。

方法二：直接嵌入 OpenProcessing

已經發布在 OpenProcessing 上、懶得搬程式碼的作品，用這個：

{% openprocessing "2412345" %}
{% openprocessing "2412345", "作品標題" %}
{% openprocessing "2412345", "作品標題", 600 %}

數字是 OpenProcessing 網址最後那串編號： https://openprocessing.org/sketch/2412345 → 編號就是 2412345。

兩種怎麼選

	放自己 repo	嵌入 OpenProcessing
改程式	隨時改，存檔就生效	要回 OpenProcessing 改
載入速度	快	慢（要載整個外站頁面）
學 JavaScript	有幫助	沒有
搬運成本	要改寫成 instance mode	貼個編號就好

想練程式就用方法一，只是要展示成果就用方法二。