作為一個互動藝術的工具，p5.js 自然不能少了事件處理相關的特性，在〈Events〉中列出了 p5.js 支援的事件以及取得相關資料的變數。
來看看如何使用滑鼠畫折線：
當滑鼠點選在畫布上時，會執行 mousePressed，滑鼠游標位置可以藉由 mouseX、mouseY 得知，line 可以進行線的繪製，雖然說線在數學上是沒有寬度的，不過繪圖時預設都會以一個像素寬表示，你可以在畫布上隨意點選畫出折線。
嗯？這邊的範例怎麼沒有 draw，draw 雖然名為 draw，然而它只是個每次要更新畫面時執行的函式，通常你會在 draw 函式中執行繪圖的函式，然而要在其他函式中執行繪圖函式也是可以的，就像這個範例。
按照 p5.js 的慣例，除非真的必要，基本上是不鼓勵在 draw 以外的地方實作繪圖的，如果想遵守這個實例，可以如下：
mouseIsPressed 會在滑鼠點選的時候為 true，這個範例不同的是，預設 draw 每秒會執行 60 次，也就是說，測試 mouseIsPressed 會在每次執行 draw 時進行；另一方面，混合繪圖與事件發生時的邏輯，雖然一開始看似寫來比較簡單，然而在程式開始複雜後就不是好事。
如果要分開繪圖與事件處理的話，可以自行控制何時該 redraw：
當然，p5.js 的使用者通常不會這麼龜毛，以直覺的方式撰寫程式就可以了，不過藉由以上的探討，也認識了運用事件的幾個方式。
滑鼠事件的資料並不僅有位置，還有按下哪個鍵的問題，這可以藉由 mouseButton 來得知，例如，在不同的鍵按下時設定線的顏色不同：
大致上，事件的使用有以上談到的幾種方式，鍵盤事件等更多的介紹，可以參考官方的〈Interactivity〉。
順便一提的是，你在這邊看到內嵌了 p5.js 編輯器，這是使用 p5.js-widget 達到的效果。