p5.js in one line

This is a plain p5.js sketch. Its first line is the whole integration. Click the 🎹 at the bottom right, turn a knob, hit a pad, press a key. No hardware needed.

這是一份普通的 p5.js 草圖。它的第一行就是全部的接線。點右下角的 🎹，轉旋鈕、敲打擊墊、按琴鍵，不需要任何硬體。

↓ the line, and how to use it in your own sketch↓ 那一行，和怎麼用在你自己的草圖

The line那一行

This is the exact file running behind this page (sketch.js), read live, not a copy. Line 1 is highlighted. Everything under it is ordinary p5.js.

下面是這個頁面正在跑的那份檔案（sketch.js），現場讀出來，不是另外抄的。第一行標亮；它底下全是普通的 p5.js。

loading sketch.js …

What you can play here這張草圖裡能彈什麼

readwhat it does做什麼
knob1 … knob5colour · petals · size · trails · spin (0..1, read like mouseX)顏色・花瓣數・大小・殘影・轉速（0..1，像 mouseX 直接讀）
padPressed(n, v), pad(n)pad 1–8: a ring bursts from its spot on the outer circle; the marker glows while held打擊墊 1–8：在外圈對應的位置炸出一圈，按著時圓點發亮
notePressed, noteReleased, noteIsDown(n)keys: sparks fly up, a beam stays while held and fades on release, the strip at the bottom lights琴鍵：噴火花，按著有光柱、放開淡出，底部那條會亮

Use it in your own sketch用在你自己的草圖

  1. OpenProcessing:OpenProcessing： paste the line as the first line of your sketch. Or: Sketch → Libraries → + → paste https://openaudiovisual.com/p5/oav-p5.js. 把那一行貼在草圖的第一行。或：Sketch → Libraries → + → 貼上 https://openaudiovisual.com/p5/oav-p5.js。
  2. p5 editor (editor.p5js.org):p5 editor（editor.p5js.org）： paste it at the top of sketch.js.貼在 sketch.js 的最上面。
  3. Your own page:自己的網頁： the same line, first in the sketch file, after the p5 script tag. The sketch file should be the last <script> on the page. 同一行，放在草圖檔的第一行，p5 的 script 之後；草圖檔放在頁面最後一個 <script>。

Then read the controller like the mouse: knob1 (0..1), pad1, note, velocity, and define notePressed(), noteReleased(), knobMoved(), padPressed() like keyPressed(). Nothing to call in setup(). p5 1.x and 2.x, global mode.

之後像讀滑鼠一樣讀控制器：knob1（0..1）、pad1、note、velocity；像寫 keyPressed() 一樣定義 notePressed()、noteReleased()、knobMoved()、padPressed()。setup() 裡什麼都不用叫。支援 p5 1.x 與 2.x 的 global mode。

OP Configurator (OPC)

On OpenProcessing, if you already name your variables with OPC, the controller is wired to them in order: knobs drive the sliders, pads flip toggles and press buttons. OPC exists only on OpenProcessing; on other pages the lines below have nothing to run on.

在 OpenProcessing 上，如果你本來就用 OPC 宣告變數，控制器會依序接上去：旋鈕推 slider，打擊墊切換 toggle、按 button。OPC 只有 OpenProcessing 有，在其他頁面這幾行沒有東西可接。

OPC.slider('radius', 60, 10, 300);    // knob 1
OPC.slider('speed', 1, 0, 5, 0.1);    // knob 2
OPC.toggle('trails', true);           // pad 1 (flips on each hit)

Don't name an OPC variable after a p5 function (hue, fill, …).

OPC 的變數別取 p5 已有的函式名（hue、fill……）。

No hardware? Three ways in沒有硬體也能玩

🎹 opens a controller on screen (it follows the one you plug in). 📱 Phone inside that panel shows a QR code: scan it and your phone becomes the controller, over the public relay. A real MIDI controller works in Chrome, Edge and Firefox; the browser asks once. Safari and iPad have no Web MIDI, but the screen and the phone still work.

🎹 打開螢幕上的控制器（你接上實體控制器時它會跟著變）。面板裡的 📱 手機 會出現 QR code，掃了手機就是控制器（走公開 relay）。實體 MIDI 控制器在 Chrome、Edge、Firefox 可用，瀏覽器只問一次；Safari 與 iPad 沒有 Web MIDI，螢幕和手機照樣能彈。

The sketch can't tell the three apart. That is the point: write it once.
草圖分不出這三種輸入，這就是重點：寫一次，三種都能彈。

Docs: p5.js in one line 文件：p5.js 一行指令 p5/README 01 hello particles 09 midi controllers