不知道你是否瞭解過 Processing 語言的家譜（如下圖所示）。與人類語言一樣，程式語言同樣屬於相關語言的家族。而今天，我要引出的，即其家族成員之一的 p5.js（官網）。

Introduction

簡單來講，p5.j​​s 是一個庫配上許多工具，它讓程式設計愛好者、藝術家、設計師們可以輕鬆使用 JavaScript 語言進行創意程式設計。

庫是 JavaScript 庫。

為什麼選擇 JavaScript？其優勢在於 JavaScript 廣泛的可用性和無處不在的支援——每個 Web 瀏覽器都內建了 JavaScript 直譯器，也就意味著 p5.js 程式通常可以在任何Web瀏覽器中執行。作為一種簡單而友善的環境，p5.j​​s 提供了一種通過建立互動式圖形來學習程式設計的方法，這也大大降低了學習 JavaScript 的難度。

有人把它看作是 Processing 的 Web 版本。這也並不無道理。它們都在構建草圖和原型方面有著無可替代的優勢，既好玩又方便，讓我們在很短的時間內能探索更多的想法。

工具是第三方庫的支援。

就像軟體的工具欄一樣，libraries 將 p5.js 進一步擴充套件到聲音和音樂的領域、使用HTML新增按鈕、滑塊、輸入框和網路攝像頭捕捉……

Workflow

那麼，如何進行 p5.js 專案的設定和編寫你的第一個草圖呢？這裡有官方教程，以下是我的做法——

方式一：線上編輯

這是我找到的線上編輯網址：

因為我並不常用，所以在這裡不多評價。

方式二：使用程式碼編輯器

我所採用的是 Brackets，官方還推薦了Atom等。下面我只介紹 Brackets，如果你安裝了其他的編輯器，也可以通過以下教程自行解決。

教程列表：

我如何做的——

第二步：用 Brackets 選擇你 html 和 js 檔案所在的資料夾（在你下載的 p5.js 庫中，一般叫 empty-example）。如果你檢視 index.html，你會注意到它是連結到了 p5.js 檔案。（如果你覺得載入速度慢，你可以使用壓縮版 p5.min.js）

<script src="../p5.js"></script>

可這時候的連結地址是不正確的，至於如何修改，我找到了兩種方案：
方案一：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

方案二：
在你 html 和 js 檔案所在文的件夾中，新建一個名為“libraries”資料夾。然後把你下載好的 p5.js 檔案（或是其他的）放到其中。最後請將連結地址更改為：

<script src="libraries/p5.js"></script>

第三步，用 Brackets 編寫 sketch.js 檔案，開始散播你的靈感了。舉個栗子：

function setup() {
  createCanvas(640, 480);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

PS：Brackets 的使用——

1. 實時預覽功能，即在瀏覽器中執行程式碼。下圖示記處的功能等效。
   

2. 修改軟體語言。Brackets 預設的語言是英語，如果你想改為漢語，請通過 Debug>Switch Language 修改。

3. 使用 ESLint 自動檢測 JavaScript 中的問題。Brackets 具有兩個查錯的工具。基本上 JSHint 是一個能夠完成所有工作的較老的工具，但 ESLint 能更好地完成了這項工作。藉助 ESLint，您可以配置所有內容，以您想要的方式工作。您還可以獲得新規則，這使得 ESLint 可以檢測更多問題。JSHint 的唯一優點是速度稍快。注意的是：這裡檢測出問題不一定就是錯誤，程式也許能夠正常地執行。它只是檢測出可能的錯誤，更方便我們找出錯誤。你也可以通過配置 ESLint，使其能夠更智慧地為我們服務，具體參看文章。

Basics of drawing

如同在 Processing 中一樣，setup() 函式（最開始呼叫的函式）只調用一次，在這裡我們需要建立畫布：createCanvas(width, height)；而 draw() 函式會不停地呼叫，我們一般在這裡寫上要顯示的內容。

至於一些簡單的圖形元素，你可以在這裡找到。（記住一點，官方手冊是非常重要的學習資料）

關於通過滑鼠和觸控互動的方法，這裡有個表格我覺得很實用：

Color

色彩很奇妙，水也很深。我想通過一個栗子，和大家簡單地瞭解一下：

function setup() {
  createCanvas(720, 400);
}

function draw() {
  background(127);
  noStroke();
  for (var i = 0; i < height; i += 20) {
    fill(129, 206, 15);  // 填充
    rect(0, i, width, 10);
    fill(255);
    rect(i, 0, 10, height);
  }
}

效果如下：

可以知道的是，p5.js 和 Processing 一樣，擁有 RGB 顏色模式，當然還有 HSB。不是很瞭解的朋友，可以自行查閱。這裡我們知道這麼多已經足夠了。

Learning

如何學習 p5.js? 我覺得最好的兩個地方，就是官網和論壇了。（官方手冊尤為重要）