Hahow 好學校

前端開發、後端開發、後端設計、程式開發、軟體程式設計、前端設計、程式撰寫

Hahow 好學校

關注

Hahow 小蛙編輯

創作內容編輯

2022/08/19

網頁互動創作新手必讀：快速上手 p5.js

對網頁互動創作有興趣？你可以試試更方便的 p5.js！五步驟簡單上手程式創作，學習資源一次整理給你！

當我們想要在網頁上繪圖，最常用的除了 CSS 之外，就是 HTML5 提供的 Canvas 了，Canvas 的 API 接口讓我們可以實現有效率、高靈活性在網頁上繪圖的夢想，Canvas 的許多基礎都在《動畫互動網頁特效入門（JS/CANVAS）》中提到，讓你可以從頭開始，完成豐富的網頁互動創作。

但是對於想要快速開始互動網站、藝術創作的人來說，Canvas 上像是繪圖、形狀、物理模擬或是常用的數學公式等功能都需要自己從頭處理。有沒有更快的方式呢？

你可以試試 p5.js！

答案是有的，就是今天要介紹的 p5.js，p5 是由 Processing 延伸而成的 JavaScript 函式庫，Processing 是設計給沒有程式基礎的人快速進行創作的平台，而 p5.js 可以理解為 Processing 的 JavaScript 版本。它將許多繪圖、數學、物理模擬等函式封裝好讓我們可以直接使用，如此一來我們可以在享受 Canvas 繪圖的同時不用費心思處理瑣碎的工具！

在本篇文章中我們將會實作一個簡單的畫布，把滑鼠當作筆刷，滑鼠經過的路徑會留下彩色的軌跡，點擊的狀況下軌跡則變成方形的圖案，增加繪製的多樣性。

我們將以 OpenProcessing 作為本次範例的平台，這是一個像是 Code Pen 的線上程式碼編輯器，可以在創作的同時即時看到程式碼運做的狀況，十分方便！

詳見原文>

https://hahow.in/cafeteria/articles/609232e5cacb075c79620906