1.3 開始第一幅“碼繪”——開始使用p5.js，畫一個懵逼臉
下載P5.js並寫一段程式
下面我們就開始使用p5.js來畫點東西。
第一步，下載p5.js到本機。
到官網下載頁面（https://p5js.org/download/） ，從”Complete Library"下載完整包到本機，如下圖所示。
下載後，應該是一個名為"p5.zip“的壓縮包：
第二步，解壓壓縮包並執行和編輯”模板“程式：
然後解壓出來，應該呈現為下列檔案結構：
如上圖所示，找到資料夾"empty-example"，這是p5.js提供的一個”模板“程式，其實就是一個不做任何事情的js程式。
先試試執行程式，即用瀏覽器開啟檔案”index.html"，開啟後應該是看到一個完全空白的網頁：
現在可以開始編寫程式，用任意文字編輯器開檔案sketch.js，可以看到是完全空白。
第三步，寫第一個程式，即在sketch.js中輸入下列程式碼，注意不能寫錯一個字母，包括大小寫：
1 2 3 4 5 6 7 8 9 10 |
// 函式setup() ：準備階段function setup() { createCanvas(640,480);}// 函式draw()：作畫階段function draw() { fill(255);// 填充白色 ellipse(320,240,100,100); // 畫圓形} |
然後，再次開啟index.html檔案（或者重新整理顯示），可以看到在頁面上出現了一個圓形：
小目標達成！ Level UP!!!
查詢參考文件
為了更好的理解這段程式，我們要到官網查詢一下函式createCanvas()和ellipse()的具體用法：
p5.js的所有功能都包含在參考文件中：
https://p5js.org/reference/
其中，可以找到createCanvas()和ellipse():
點開createCanvas()可以檢視它的語法/示例程式和執行效果：
上面地描述都是英文，可能繪嚇跑一批小朋友。我這裡在做一個簡單地翻譯：
建立一個畫布，並設定它地尺寸。這個函式應該只在start()函式中呼叫一次。如果呼叫多次，可能造成難以預料的行為......
拖到頁面下方可以看到它的句法規範：
翻譯過來為：
Syntax (句法)
createCanvas(w,h,[renderer])Parameters (引數)
w |
數值：畫布的寬度，單位畫素 |
h |
數值：畫布的高度，單位畫素 |
renderer |
常量：
P2D or WEBGL |
此外，還要用用這裡的最酷功能——編輯示例程式碼看效果！並且若編輯出錯誤程式碼導致不知所措，可以很方便地恢復到最初狀態：
下面在看看ellipse()函式的參考文件：
簡單翻譯過來，大意就是“畫一個橢圓，前兩個引數指定中心位置，第三個引數為橫軸長度，第四個引數為縱軸長度。
以及它的句法：
翻譯一下，就是：
Syntax（句法）
ellipse(x,y,w,[h])
Parameters（句法）
x |
數值：中心點的橫座標 |
y |
數值：中心點的縱座標
. |
w |
數值：橢圓的寬度（橫軸長度） |
h |
數值：橢圓的長度（縱軸長度），不指定時預設與w取相同數值 |
改造程式，增強功能
有了它，就方便我們理解程式中具體呼叫ellipse的含義了，例如，我們程式中的語句”ellipse(320,240,100,100); // 畫圓形“的含義就是”畫橢圓，中心點座標（320，240），寬度高度均為100“。
現在考慮一個問題：若將320增大到400，圓形的位置會如何變化？若將240減小到140，圓形位置如何變化？
試試將程式碼改為如下：
1 2 3 4 5 6 7 8 9 10 11 12 |
// 函式setup() ：準備階段function setup() { createCanvas(640,480);}// 函式draw()：作畫階段function draw() { fill(255);// 填充白色 ellipse(320,240,100,100); // 畫圓形 ellipse(400,240,100,100); ellipse(320,140,100,100);} |
也就是增加兩行：
再次執行index.html，效果如下：
這三個圓圈和程式碼是如何對應的呢？請看下圖：
畫布座標系統
能否從上圖中看出來，ellipse()的第一個和第二個引數如何影響其位置？
目前為止，我們還並不瞭解畫布上的座標和具體位置的對應關係，而要畫出任何東西，都必須首先了解如何在畫布上定為，也就是畫布的座標系統，下圖便是解釋：
理解了座標系統，就能夠精確地在畫布上任意位置畫想要的橢圓了。
畫一些不同的表情
為了多賺一點經驗值，我們再試試去實現最先示例的那段懵逼頭像繪製程式，並且做一些小小的改造：
完整程式程式碼
下面貼出最原始的卡通頭像繪製程式碼，請自行嘗試修改，做出不同效果：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
// 函式setup() : 準備階段function setup() { // 建立畫布，寬度640畫素，高度480畫素 // 畫布的座標系統為，左上角座標為（0，0）， // x方向水平向右，y方向垂直向下，單位畫素 createCanvas(640,480);}// 函式draw()：作畫階段function draw() { fill(255);// 填充白色 // 1 畫臉 ellipse(320,240,200,200);// 圓圈 // 2 左眼 ellipse(280,240,50,50);// 另一個圓圈 // 3 右眼 ellipse(360,240,50,50); // 4 嘴巴 ellipse(320,300,80,40); fill(0);// 填充黑色 // 5 左眼珠 ellipse(280,240,20,20); // 6 右眼珠 ellipse(360,240,20,20); // 7 頭髮：從左到右畫一排豎線 line(260,180,260,100); line(280,180,280,100); line(300,180,300,100); line(320,180,320,100); line(340,180,340,100); line(360,180,360,100); line(380,180,380,100);} |
繪製效果為：
