Processing 的網頁版函式庫 p5.js

2018 年底我在一本 Arduino 的書上看到用 Processing 語言顯示感測器資料的介紹, 在搜尋相關資料時找到 p5.js 函式庫, 這是 Processing 的 Javascript 網頁版本, 因為 Processing 本身是 Java 寫的, 所以使用 Processing 顯示Arduino 蒐集的感測器資料必須使用 Java 語法, 移植到 Javascript 後就可以在網頁上繪圖, 製作動畫或遊戲了, 不再需要 Java Applet 或 Flash 外掛, 這真的太棒了! 

p5.js 的前身是 John Rezig (jQuery 之父) 於 2008 年開發的 Processing.js 開放原始碼函式庫, 此函式庫用來在瀏覽器上顯示圖表與互動內容, 但此專案已在 2018 年底停止繼續開發了. 美國藝術家與電腦科學家 Lauren McCarthy 獲得 Processing 基金會的官方支援, 以 Processing.js 的成果為基礎於 2013 年開發了 p5.js 作為 Processing.js 的繼承者, 其命名源自 Processing 最早的網域名稱 proce55ing (因為 processing.org 當時已被註冊), 參考 :

# https://en.wikipedia.org/wiki/Processing.js

# https://en.wikipedia.org/wiki/Processing_(programming_language)#p5.js

p5.js 的官網與 GitHub 原始碼寄存參考 :

# http://p5js.org  

# https://github.com/processing/p5.js

目前市面上關於 p5.js 的書籍不多, 只有如下數本 : 

1. Learn JavaScript With p5.js: Coding for Visual Learners (Apress) : 

Source : 博客來

此書由淺入深循序漸進, 透過 p5.js 來學習 Javascript 語法, 是很不錯的入門書.

2. Make : Getting Started With P5.js: Making Interactive Graphics in Javascript and Processing

Source : 博客來

此書是 p5.js 開發者 Lauren McCarthy 所著, 著重於利用演算法製作數學或藝術圖形, 例如碎形, 葉片等等, 需要一些代數, 超越函數等數學基礎. 

3. Generative Design: Visualize, Program, and Create with Javascript in p5.js

Source : 博客來

此書也是 p5.js 的藝術應用, 屬於實用級. 

4. Creative Coding and Data Visualization with P5.JS: Drawing on the Web with JavaScript

Source : Amazon

此書似乎連 Amazon 都買不到. 

參考 : 

# p5.js 快速上手

# Level Up: Creative coding with p5.js – part 1

# https://github.com/onlylemi/awesome-processing