Step 14: p5.js 程式設計基礎學習合集【1】
不知道你是否瞭解過 Processing 語言的家譜(如下圖所示)。與人類語言一樣,程式語言同樣屬於相關語言的家族。而今天,我要引出的,即其家族成員之一的 p5.js(官網)。
Introduction
簡單來講,p5.js 是一個庫配上許多工具,它讓程式設計愛好者、藝術家、設計師們可以輕鬆使用 JavaScript 語言進行創意程式設計。
庫是 JavaScript 庫。
為什麼選擇 JavaScript?其優勢在於 JavaScript 廣泛的可用性和無處不在的支援——每個 Web 瀏覽器都內建了 JavaScript 直譯器,也就意味著 p5.js 程式通常可以在任何Web瀏覽器中執行。作為一種簡單而友善的環境,p5.js 提供了一種通過建立互動式圖形來學習程式設計的方法,這也大大降低了學習 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>
可這時候的連結地址是不正確的,至於如何修改,我找到了兩種方案:
方案一:
改為連結到線上託管的 p5.js 檔案。所有版本的p5.js都儲存在 CDN 中。即:
<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 的使用——
- 實時預覽功能,即在瀏覽器中執行程式碼。下圖示記處的功能等效。
修改軟體語言。Brackets 預設的語言是英語,如果你想改為漢語,請通過 Debug>Switch Language 修改。
使用 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? 我覺得最好的兩個地方,就是官網和論壇了。(官方手冊尤為重要)