總目錄

第一章 導(dǎo)學：對寫代碼和編程進行概述
第二章 準備工作：學習JavaScript命令和操作的基礎(chǔ)來開啟p5.js的學習之旅
第三章 p5.js中的顏色：這一章是針對p5.js的，將學習如何在p5.js中定義顏色，并不適用于常規(guī)的JavaScript
第四章 操作符和變量：在p5.js 中使用第二章所學的JavaScript知識
第五章 條件語句和比較運算符：使用條件語句和比較運算符來編寫不同條件下的分支程序
第六章 p5.js中的更多變量：本章也是針對p5.js的，將學習針對某些特定庫的變量
第七章 循環(huán)：學習編寫可處理大量運算的循環(huán)程序
第八章 函數(shù)：函數(shù)是JavaScript的基石，我們更深入的學習函數(shù)來創(chuàng)建可擴展、模塊化的健壯程序
第九章 對象， 第十章 數(shù)組：對象和數(shù)組是JavaScript的數(shù)據(jù)結(jié)構(gòu)，通過它們可以更智能的方式組織代碼及處理復(fù)雜問題
第十一章 事件：事件處理讓我們可以編寫處理用戶交互的程序
第十二章 p5.js擴展知識：這也是僅針對p5.js的一章，在進入最終的項目前更深入的學習函數(shù)庫相關(guān)功能
第十三章 最終項目：使用全書所學知識創(chuàng)建一款游戲

安裝p5.js

開使使用p5.js和JavaScript有好幾種方式，其中一種是進入p5.js官網(wǎng)并在系統(tǒng)中下載p5.js的源代碼(見圖 2-1)。

在寫本教程時，下載頁中有一個名為p5.js complete的鏈接，其中包含p5.js庫以及一個示例項目。下載壓縮包，可在其中看到一個empty-example文件夾。該文件夾中有兩個文件：sketch.js文件用于編寫JavaScript代碼，index.html用于在Chrome等瀏覽器中打開并顯示sketch.js文件中的JavaScript代碼運行結(jié)果。還可通過作者的GitHub倉庫獲取相同的代碼。

雖然可通過像NotePad這樣的普通文本編輯器來修改sketch.js文件中的內(nèi)容，但建議使用Sublime Text等代碼編輯器來進行修改。

代碼編輯器與Notepad或Word這樣的文本編輯器非常相似，但它有著易于編碼的特殊功能，如對給定編程語言的特殊詞語進行語法高亮顯示，我們這里的編程語言是JavaScript。Sublime Text是你可以使用的一種代碼編輯器，可下載并免費試用。

或許入門p5.js最簡單的方式是在線編輯器。在線編輯器可在瀏覽器中使用，并且不需要在系統(tǒng)中進行任何安裝。我在學習時很喜歡這種方式，因為入門很輕松。

在準備本書時一款易于使用的在線代碼編輯器可通過如下鏈接獲取：

p5.js在線編輯器

如果出于某種原因無法訪問以上鏈接，也可以嘗試使用我的Codepen賬號中托管的p5.js模板：Codepen - p5.js簡單模板。CodePen是一個社交開發(fā)平臺，這里可以在瀏覽器中編寫代碼并分享給其它開發(fā)人員。它是一個很棒的開發(fā)和測試環(huán)境。Codepen和上述所提到的p5.js編輯器的區(qū)別在于p5.js編輯器中僅能運行p5.js相關(guān)的代碼，而Codepen上可以運行任意前端代碼。

圖2-1. 下載p5.js 源碼的網(wǎng)頁

圖2-2. p5.js在線編輯器

在線編輯器的使用方法是，在我們寫好代碼要運行時點擊頁面上方的播放按鈕鍵。按下按鈕后將在右側(cè)的窗口顯示代碼運行結(jié)果。Codepen的在線編輯器略有不同，只要做任何修改它都會自動執(zhí)行。現(xiàn)在按下播放按鈕不會看到什么效果，因為我們還沒有編碼在屏幕上畫任何形狀。此時生成的是一個空的畫面，但我們也看到編輯器里是有代碼的，這段代碼我?guī)缀踉谒械膒5.js程序中都會使用到，為讀者方便以下是這段代碼（示例2-1）。

示例2-1. p5.js默認代碼

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

function draw() {
  background(220);
}

我們先刪除這段代碼。在使用p5.js學習JavaScript之前，我們先來了解一些JavaScript的基礎(chǔ)。通過GitHub倉庫可查看本書的所有示例代碼。

JavaScript簡易入門

我們可以在屏幕上編寫簡單如1 + 1的語句。這一個加兩個數(shù)據(jù)加和的合法JavaScript代碼。但如果這時按下播放按鈕執(zhí)行代碼還是不會有任何輸出。這有點讓人泄氣，因為我們覺得至少應(yīng)輸出計算的結(jié)果才對。

要在屏幕上看到JavaScript運行的結(jié)果，我們可以使用console.log()函數(shù)。

函數(shù)是一種編輯結(jié)構(gòu)，其中包含執(zhí)行特定操作的其它代碼。通過調(diào)用所定義的函數(shù)名可執(zhí)行復(fù)雜的操作。在我們調(diào)用函數(shù)（或稱作執(zhí)行函數(shù)）時，可以寫下它的名字，本處為console.log，并在其后添加小括號。如果需要輸入來運行其功能，我們只需像本例中那樣將輸入內(nèi)容放在括號內(nèi)。

console.log是一個內(nèi)置JavaScript函數(shù)，用于在編輯器下方控制臺中顯示（或記錄）函數(shù)內(nèi)的給定值。我說內(nèi)置的意思是大部分JavaScript執(zhí)行環(huán)境都包含該函數(shù)。例如，瀏覽器界面中有一個稱作控制臺的區(qū)域，通過開發(fā)者工具可訪問。p5.js和Codepen在線編輯器在編輯器下方也有這個叫作控制臺的區(qū)域。

我們還可以有用戶定義的函數(shù)，由我們自己創(chuàng)建，除非分享給其它人否則只能自己使用。p5.js這樣的函數(shù)庫有很多專屬的函數(shù)。我們將使用p5.js的函數(shù)來在屏幕上畫圖形，并創(chuàng)建各類交互和動畫視效。后面我們會深入到函數(shù)的概念，但現(xiàn)在只需要知道JavaScript有一個console.log函數(shù)，它接收一個值并在編輯器下方的控制臺中顯示該值。一開始我們學習的函數(shù)名字中間都不會有點號。在這個層面console.log有些不一樣，但后面我們會解釋為什么使用點號。

我們來在代碼中添加更多的console.log語句(示例2-2)。

示例2-2. console.log語句

console.log(1 + 1)
console.log(5 + 10)
console.log(213 * 63)
console.log(321314543265 + 342516463155)

示例2-3中為示例2-2中代碼執(zhí)行后控制臺中顯示的信息。

示例2-3. console.log語句執(zhí)行結(jié)果

2
15
13419
663831006420

可以看到代碼是從上到下按順序執(zhí)行的。有些編程結(jié)構(gòu)可以改變這種順序，這后面我們將會了解到。還可以看出計算機絲毫不介意處理大的數(shù)值。我們可以把人類要花上幾天的運算交給計算機來執(zhí)行。

示例2-2中的最后一條console.log語句處理的是非常大的數(shù)字。如果我們要在下一行對運算結(jié)果再減去10該怎么做呢？以我們現(xiàn)在的知識要進行這一運算還需要重復(fù)輸入這些數(shù)字：

console.log(321314543265 + 342516463155 - 10)

這顯然非常浪費時間。幸運的是計算很擅于存儲和記住數(shù)值。因此我們可以創(chuàng)建被稱為變量的東西來存儲該值。

在編程語言中，變量是引用一個值的名稱。

我們可以使用一個變量名在引入該值，這樣無需再次輸入這些值。如下所示：

var bigNumber = 321314543265 + 342516463155
console.log(bigNumber)
console.log(bigNumber - 10)

我們通過關(guān)鍵詞 var 創(chuàng)建了一個名為bigNumber的變量，var關(guān)鍵詞用于創(chuàng)建變量時使用。在var之后跟變量名，我們這里選用的是bigNumber。

選擇的關(guān)鍵詞在當前上下文中能講得通這點很重要。本例中可能還不會有什么問題，但在程序變得越來越復(fù)雜之后，能明確含義的變量會有助于在閱讀代碼時能夠理解意圖。如查我們把存儲這種大數(shù)的變量命名為cat就講不通，其他人在閱讀我們的代碼時也會摸不著頭腦。我們自己幾個月后再來看代碼也會搞不清狀況。程序員一直致力于讓自己的代碼可讀性盡可能強。

一但聲明了變量，就可以使用等號運算符進行賦值。這初看起來可能有些不正常。在數(shù)學中，等號運算符用于表示等號兩邊的值相等。而這里我們用它來賦值，它將右邊的運算值賦值給左邊的變量。在很多編程語言中這都是非常普通的步驟。

既然我們的變量已經(jīng)指向了值，我們就可以使用變量名來代替值進行操作。前面也提到過，變量名最后是有意義的。還有一些規(guī)則來規(guī)定變量名中有哪些字符可用哪些不可用。比如，在變量名中不能使用中間杠、感嘆號或空格等特殊字符。另一個限制是我們不能使用JavaScript的保留字作為變量名，如不能JavaScript中用的var來作為變量名。如果嘗試使用var作為變量名，如var var = 5，JavaScript會拋出一個錯誤。

譯者注：我們中國人還應(yīng)注意不要使用中文輸入法的標點符號，如，；等，因輸入法的原因造成的錯誤很多時候不容易排錯，所以在寫代碼時請保持使用英文輸入法

這里提到了規(guī)則可能會讓有些人不安。編程不是應(yīng)該是件很有趣的事嗎？但不用擔心，保留字的清單很短的，所以我們無需記憶。在不斷深入學習編程語言的過程中，我們會漸漸很自然的知道哪些名稱不能使用。

關(guān)于規(guī)則，還需提到另外一條規(guī)則。JavaScript需要我們在每條語句后加分號。其實不加程序也能正常運行，但在某些極端情況下可以會執(zhí)行失敗，后面也很難排查。所以雖然會顯得略為麻煩，推薦在每條語句結(jié)束時添加分號。前面的代碼實際上應(yīng)該像示例2-4這么寫：

示例2-4.使用分號

console.log(1 + 1);
console.log(5 + 10);
console.log(213 * 63);
var bigNumber = 321314543265 + 342516463155;
console.log(bigNumber);
console.log(bigNumber - 10);

注意執(zhí)行bigNumber - 10并不會修改變量bigNumber的初始值。下例中，console.log語句的輸出結(jié)果還是10：

var x = 10;
x + 5;
console.log(x);

如果想要修改變量值，需要重新對其賦值（示例2-5）。

var bigNumber = 321314543265 + 342516463155;
console.log(bigNumber);
bigNumber = 3;
console.log(bigNumber);

上例中第二個console.log輸出的值是3，因為我們重新賦值變量值為3覆蓋了初始值。

JavaScript中有數(shù)據(jù)類型的概念用于區(qū)別不同值的類型（其它語言中也有）。我們這里使用的數(shù)字屬于數(shù)值類型。還有一種用于展示文本信息的數(shù)據(jù)類型稱為字符串。

在JavaScript中，我們不能隨便寫一個詞就希望它代表數(shù)據(jù)。比如，在console.log中放入單詞hello。如果現(xiàn)在這么做，會出現(xiàn)報錯信息。JavaScript還不知道hello代表什么意思，它會假設(shè)這是一個尚未定義的變量。

console.log(hello);
> Uncaught ReferenceError: hello is not defined (sketch: line 1)

譯者注：不同編輯器下報錯信息可能會存在細微差別

但如果我們就是要在電腦上輸出hello該怎么辦呢？很多程序都會需要處理文本數(shù)據(jù)，比如處理給定姓名或地址等。這時我們可以在數(shù)據(jù)兩邊加上引號，用于表示該值是一個字串。

console.log('hello');

JavaScript這次就不會報錯了。每當處理文本數(shù)據(jù)時，就需要在兩邊加上引號，這會將其注冊為字串。這里所說的文本數(shù)據(jù)，也包含數(shù)字。字串也可由數(shù)值來構(gòu)成：

console.log('1234');

這時，就不能把它當成代數(shù)數(shù)字來執(zhí)行數(shù)學運算了，而是當成文本處理。

我們可以對字串執(zhí)行操作，但產(chǎn)生的結(jié)果與對數(shù)字的操作不同，其實我們可以對字串進行相加操作：

console.log('hello' + 'world');
> 'helloworld'

這會將兩個單詞進行合并。前面我說對包含數(shù)值的字串不能進行數(shù)據(jù)運算的意思如下：

console.log('1' + '1');
> '11'

這時，數(shù)據(jù)不會作為數(shù)字而是作為字串看待，并沒有進行求和運算而是進行了合并。這種對字串的合并在編程中通常稱作連接（concatenation）。

字串聽起來非常奇怪，它實際上指的是字符串。字符串在計算機世界中是由一個個字符組成的集合。我們既可以通過單引號'也可以通過雙引號"來定義字符串，但結(jié)束符要和開頭的符號一致。同時在編程中，我們不應(yīng)對一個字符串使用一種引號，對另一個字符串使用另一種引號。對于開發(fā)程序而言，保持一致性非常的重要。

在結(jié)束這一部分前還要提注釋的概念。注釋允許我們在程序里編寫不被計算機執(zhí)行的內(nèi)容，參見示例2-6。

示例2-6.在程序中使用注釋

// 各類示例(這是一條注釋)
console.log(1 + 1);
console.log(5 + 10);
console.log(213 * 63);
var bigNumber = 321314543265 + 342516463155;
console.log(bigNumber);
console.log(bigNumber - 10);

以雙斜線//開頭的語句在JavaScript中會被忽略。雙斜線讓我們可以對單行進行注釋，如何對多行進行注釋，可以在每行開頭使用雙斜線，也可以使用/* */ 符號，參見示例2-7。

示例2-7. 使用//和/* */進行注釋

// 各類示例
// 通過多行注釋來禁用前3行
/*
console.log(1 + 1);
console.log(5 + 10);
console.log(213 * 63);
*/
var bigNumber = 321314543265 + 342516463155;
console.log(bigNumber);
console.log(bigNumber - 10);

不管你信不信，這些JavaScript知識已經(jīng)足夠我們學習使用p5.js了。如果你使用的是代碼編輯器，點擊新建項目按鈕在新的編輯器窗口創(chuàng)建帶有p5.js模板的代碼。

p5.js入門

在p5.js代碼編輯器中新建項目時會看到包含這兩個名稱的函數(shù)聲明：setup和draw（示例2-8）。

示例2-8. 默認函數(shù)聲明

function setup() {
}
function draw() {
}

這兩個函數(shù)在我們編寫的幾乎所有p5.js程序中都需要進行聲明。p5.js會查找這些函數(shù)定義并執(zhí)行其內(nèi)的內(nèi)容。這兩個函數(shù)的執(zhí)行方式是有區(qū)別的。

setup函數(shù)內(nèi)的區(qū)塊（大括號中間的區(qū)域），用于編寫初始化程序所執(zhí)行的代碼。setup函數(shù)的代碼僅在draw函數(shù)之前執(zhí)行一次。

function setup() {
    // 在這個大括號內(nèi)編寫setup函數(shù)
}

draw函數(shù)才是見證奇跡的地方。draw函數(shù)內(nèi)編寫的任何代碼都會由p5.js重復(fù)執(zhí)行。這讓我們可以創(chuàng)建各種動畫和交互作品。

p5.js會確保setup函數(shù)在draw函數(shù)之前執(zhí)行。重復(fù)說明下，p5.js只執(zhí)行一次setup函數(shù)，而draw函數(shù)則會被反復(fù)執(zhí)行（其實是接近每秒60次）。這也我們?nèi)绾瓮ㄟ^p5.js來創(chuàng)建交互和動畫內(nèi)容。

我們可以通過在代碼的不同地方放置console.log來查看這一效果。使用不同值分別在setup函數(shù)內(nèi)、draw函數(shù)內(nèi)以及兩個函數(shù)之外來放置console.log()語句（示例2-9）。

示例2-9. 記錄setup和draw函數(shù)的行為

function setup() {
    console.log('setup');
}
function draw() {
    console.log('draw');
}
console.log('hello');

執(zhí)行這段代碼并立即停止。可以發(fā)現(xiàn) 輸出的第一條是hello，這是我們預(yù)期內(nèi)的行為。函數(shù)的調(diào)用應(yīng)由JavaScript來執(zhí)行。意料之外的可能是setup和draw函數(shù)也同時被執(zhí)行了。說意料之外是因為這些僅僅是函數(shù)聲明，它們定義函數(shù)的行為，我們?nèi)孕鑸?zhí)行函數(shù)才能進行相應(yīng)的使用。

這表示如果我們只是使用JavaScript，我們應(yīng)顯式地調(diào)用setup和draw函數(shù)來讓console.log輸出里面的信息：

setup();
draw();
console.log('hello');

但在使用p5.js庫時我們卻不需要這么做。因為這是p5.js庫的架構(gòu)方式，它查找名為setup和draw的函數(shù)聲明并替我們執(zhí)行這些函數(shù)。p5.js接管這一執(zhí)行的原因是它以一種特殊的方式對函數(shù)進行執(zhí)行。

p5.js 只執(zhí)行一次setup函數(shù)，然后只我們不手動停止就會反復(fù)執(zhí)行draw函數(shù)，只要不停止就會一直執(zhí)行。這對于任何圖形化界面屬于標準操作，想法瀏覽器、你玩的游戲或者使用的操作系統(tǒng)。這些程序會持續(xù)運行并在屏幕上進行顯示，除非你關(guān)閉掉程序。這也是為什么p5.js對draw函數(shù)循環(huán)執(zhí)行，這樣內(nèi)容才會一直在屏幕上顯示，不會只顯示一秒就消失。

函數(shù)進階

我們再來深入聊聊函數(shù)，因為它是我們所編寫程序的重要組成部分。

函數(shù)名通常是動詞。它代碼運行函數(shù)所會執(zhí)行的指定操作。打比方說，我們可能會有一個drawCat函數(shù)在屏幕上畫出一只貓：

drawCat();

但這其實不是虛構(gòu)的，因為我確實為本章創(chuàng)建了一個名為drawCat的函數(shù)（圖2-3）。我們可以在JavaScript中創(chuàng)建任意我們想創(chuàng)建的函數(shù)，這讓我們在編程時擁有了無限能力。

圖2-3.drawCat函數(shù)的圖形化輸出

好吧，坦白說這個函數(shù)并沒有畫出多好看的貓。

我們通過調(diào)用函數(shù)名并在其后加上括號來執(zhí)行函數(shù)。有時根據(jù)函數(shù)的創(chuàng)建或定義，可帶有參數(shù)。這代表所接收的輸入值會影響函數(shù)的輸出結(jié)果。例如，drawCat可接收一個數(shù)值，來決定所畫的貓的大小。或者該數(shù)字決定屏幕中所畫的貓的個數(shù)。這完全取決于函數(shù)是如何構(gòu)建的。

在本例中，我所創(chuàng)建的函數(shù)可接收一個輸入值來控制所畫的貓頭的大小（圖2-4）：

drawCat(2);

圖2-4.畫貓臉

很可惜p5.js并不會自帶drawCat函數(shù)，我需要自己創(chuàng)建，但它帶有很多有用的函數(shù)讓我們可以毫不費力地執(zhí)行復(fù)雜任務(wù)。要使用p5.js庫來編程，我們將使用它自帶的函數(shù)，這是由那些創(chuàng)建這個庫的聰明人所編寫的。

以下這個p5.js庫中的函數(shù)可能是編寫所有項目都會用到的：createCanvas函數(shù)。createCanvas為我們在網(wǎng)頁中創(chuàng)建一塊畫面來供我們使用。但要使用該函數(shù)，我們需要傳入兩個由逗號分隔的值：畫布區(qū)域的寬和高。我們應(yīng)在setup函數(shù)內(nèi)createCanvas，因為只需要在作畫前執(zhí)行一次即可。

我們向函數(shù)內(nèi)傳入800和300并執(zhí)行來查看效果（示例2-10）。可能并沒有什么改變，僅僅打開的瀏覽器窗口會變大一些。它現(xiàn)在使用的正是我們所傳入的尺寸。我們再修改一下尺寸來查看窗口大小的變化。

示例2-10. 使用createCanvas函數(shù)

function setup() {
    createCanvas(800, 300);
}

function draw() {
}

還有一個經(jīng)常用到的函數(shù)，名為background。background函數(shù)使用給定值來設(shè)置畫面的顏色。我們會在另一章中講解p5.js中顏色值的使用，現(xiàn)在我們可以在該函數(shù)中傳入(220,220,220)來讓背景變成淡灰色（示例2-11）。

示例2-11. 使用background函數(shù)

function setup() {
    createCanvas(800, 300);
    background(220,220,220);
}

function draw() {
}

可以看到代碼會從上到下執(zhí)行。p5.js首先會為我們創(chuàng)建一塊畫布，然后將背景設(shè)置為灰色。

再次強調(diào)下，p5.js需要定義了setup和draw才能正常運作。在使用p5.js時，我們的任務(wù)是把相關(guān)內(nèi)容放在這些函數(shù)內(nèi)供p5.js執(zhí)行。這和p5.js的架構(gòu)有關(guān)。p5.js的創(chuàng)建者希望部分代碼只執(zhí)行一次，來滿足初始化和配置的需求，而另一些像作畫、動畫這樣的交互內(nèi)容則始終保持執(zhí)行。

我們在這兩個函數(shù)中使用p5.js庫中所自帶的函數(shù)，如createCanvas和background。這些函數(shù)已由其他人為我們定義好，我們沒不知道里面的具體代碼。但我們其實也不必知道這些細節(jié)，只關(guān)心函數(shù)能做什么以及如何使用。

函數(shù)讓我們輕松地執(zhí)行復(fù)雜任務(wù)。通過使用createCanvas函數(shù)，我們無需了解在頁面上創(chuàng)建畫布元素的運行原理。這些細節(jié)對我們是抽象隱藏起來的。我們只需要知道如何調(diào)用函數(shù)來為我們所用。

最后，我們將再調(diào)用一個函數(shù)，這次是在draw函數(shù)內(nèi)進行定義，來在頁面上畫出一個矩形（示例2-12）。

畫矩形需要使用到rect函數(shù)。rect函數(shù)中需要傳入四個值：畫布區(qū)域左上解的x和y軸位置，以及矩形的長和寬。

無需深入p5.js中坐標系如何運行，我們?yōu)楹瘮?shù)分別傳入這些值：x值50，y值100，寬200，高100（圖2-5）。

示例2-12. 畫一個矩形

function setup() {
    createCanvas(800, 300);
    background(220,220,220);
}

function draw() {
    rect(50, 100, 200, 100);
}

圖2-5.rect函數(shù)的輸出

通過調(diào)用該函數(shù)，我們在屏幕上畫出了第一個形狀。

p5.js中的坐標系

現(xiàn)在讓們花點時間來討論下p5.js中坐標系如何運作。

要定位平面上的任意一 hkko，我們需要使用一個兩軸組成的坐標系。縱軸稱為Y軸，橫軸稱為X軸，兩軸相交之處稱為原點。我們畫形狀的畫布中，原點位于左上角。從該點向下，Y值遞增，向右 X值遞增（圖2-6）。

圖2-6. 坐標原點

在屏幕上畫矩形時，所傳入的坐標值定義了矩形的左上角位置（示例2-13和圖2-7）。

示例2-13. 畫一個矩形

function setup() {
    createCanvas(800, 300);
    background(220,220,220);
}

function draw() {
    rect(400, 150, 100, 100);
}

圖2-7. 畫一個矩形

如果這和你的預(yù)期不同，可以調(diào)用p5.js的另一個函數(shù)rectMode，傳入值 CENTER來修改我們程序中矩形的繪制方式（示例2-14）。這個函數(shù)更多是配置和初始化相關(guān)的，因此我們將它放在setup函數(shù)內(nèi)。

示例2-14. 使用rectMode函數(shù)以及CENTER值

function setup() {
    createCanvas(800, 300);
    background(220,220,220);
    rectMode(CENTER);
}

function draw() {
    rect(400, 150, 100, 100);
}

圖2-8. 居中矩形輸出

p5.js中還有一個ellipse函數(shù)用于繪制（橢）圓形。ellipse使用方法與rect函數(shù)非常相似。前兩個參數(shù) x 和 y 是圓的中心坐標點，第三個參數(shù)是橫向半徑，第四個參數(shù)是縱向半徑。使用ellipse函數(shù)繪制正圓，我們需要為橫向半徑和縱向半徑傳入相同的值（示例2-15）。

譯者注：原文為 radius 半徑，實際測試應(yīng)為直徑

如果你測試在屏幕上繪制不同圖形時，可能會注意到調(diào)用的圖形繪制函數(shù)總是在之前圖形的上一層進行繪制。我們可以修改函數(shù)調(diào)用的順序來影響圖形疊放順序。

示例2-15. 使用ellipse函數(shù)

function setup() {
    createCanvas(800, 300);
    background(220,220,220);
    rectMode(CENTER);
}

function draw() {
    rect(400, 150, 100, 100);
    ellipse(350, 120, 100, 100);
}

圖2-9. 輸出圓形和居中矩形

我還想再介紹一個函數(shù) line。從名稱可以看出，line函數(shù)在屏幕上繪制直線。需要為該函數(shù)傳入四個參數(shù)：起始點x和y坐標、終止點x和y坐標。可以使用 line 函數(shù)做下測試，就能更好的理解p5.js中坐標系是如何運作的。比如，你可以在整個畫布繪制一個大大的 X。

譯者補充：

function setup() {
    createCanvas(300, 300);
    background(220,220,220);
}

function draw() {
    line(0, 0 , 300, 300);
    line(0, 300, 300, 0)
}

總結(jié)

本章中我們對p5.js進行了快速的入門，并且可以在屏幕上繪制圖形。

我們了解了需要名為setup和draw的兩個函數(shù)內(nèi)定義我們的代碼內(nèi)容。僅需執(zhí)行一次的代碼放在setup函數(shù)內(nèi)，需要動畫或交互的內(nèi)容放在draw函數(shù)內(nèi)。p5.js要求我們在這兩個函數(shù)內(nèi)編寫代碼。這并非編輯的準則、慣例之類的。我們可能使用另一個庫，恰恰不需要在代碼中遵循這種結(jié)構(gòu)。這種要求與p5.js這個庫本身的架構(gòu)有關(guān)。我們需要使用這兩個函數(shù)定義來通過p5.js繪制。

這類需重復(fù)書寫且不做修改的代碼，稱為樣板（boilerplate）代碼。有太多的樣板不是件好事，因為我們會發(fā)展自己重復(fù)大量的操作，但本例中樣板的數(shù)量還是非常利于管理的。

在這些函數(shù)的定義中我們使用了p5.js 庫所自帶的createCanvas, background函數(shù)，以及一些圖形函數(shù)如rect。如前所述，函數(shù)是一種將代碼整合在一起以供復(fù)用的編程結(jié)構(gòu)。函數(shù)也從大量的復(fù)雜性中進行了抽象。我們無需知道函數(shù)的運行機制，只需要知道如何使用它即可。我們可以完全不了解createCanvas是如何在網(wǎng)頁中創(chuàng)建畫布元素的，只要知道如何使用它就不成問題。想想我們開車時，不需要知道內(nèi)燃機的運行原理一樣可以開好。我們只需要知道如何使用方向盤、踏板等操作汽車即可。函數(shù)的道理與開車相似。

接下來，我們將創(chuàng)建自己函數(shù)來處理程序中的復(fù)雜問題并創(chuàng)建可復(fù)用的代碼塊。

嘗試繪制圖2-10中的圖形：

圖2-10. 圖像練習

譯者補充：

function setup() {
    createCanvas(800, 300);
    background(220,220,220);
}

function draw() {
    ellipse(0, 150, 300, 300);
    rect(150, 0, 500, 300);
    ellipse(800, 150, 300, 300);
}

本文首發(fā)地址：Alan Hou的個人博客