1.5 開始第一幅“碼繪”——自定變數與函式，創一招“懵逼表情塗”
阿新 • • 發佈：2019-01-08
引言——想要重複繪製內容應該怎麼辦？
目前我們已經清晰地理解了如何用程式碼繪製1個懵逼臉。
現在升級一點難度，考慮一個問題：
如果要在螢幕上不同位置畫N個懵逼臉，怎麼辦？
若採用之前一樣的方法，我們可以在繪製完一個臉後，用重複的程式碼(不同引數)繪製另一個臉，比如：
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 畫臉 |
這樣就能繪製兩個臉：
但是......我想畫20個臉，咋辦？？？？？
不嫌累的話可以試試寫20遍重複程式碼......，希望不要勾起被老師罰抄課文的苦難記憶......
可見，這個辦法的侷限也是相當明顯的。
用自定義函式實現功能複用
為了解決這個麻煩，我們需要獲得一項新技能：自定義函式。
回顧一下1.1節中講到的“函式”，或者說“招數/方法/行為/職能/功能”，只要有了某個函式定義，也就是概括了某種做事的流程，然後在我們想要的地方便可以“呼叫”它，或者說是“施放/執行/行使/發招”。例如，我們可以設想已經定義了一個“DrawConfuseFace”的函式，然後，在draw()函式中就可以直接呼叫這個函式兩次，實現畫兩個懵逼臉。也就是，我們現在期望的draw()函式寫法：
// 函式draw()：作畫階段function draw() { // 在(200,140)位置畫第一個臉 drawConfuseFace(200,140); // 在(320,280)位置畫第二個臉 drawConfuseFace(320,280);}這當然是可行的！而且實現後效果如下：
為了實現這個drawConfuseFace函式，我們要依次搞清楚3項技能： 1.自定義函式；2.自定義變數；3.函式引數
自定義函式
在1.1節的講解中，已經瞭解到“函式定義”的基本辦法，也就是現有程式碼中函式setup()和draw()的寫法即函式定義。
那麼，我們仿照draw()函式的寫法，在其後新寫一個函式，並在draw()函式中直接呼叫它20遍！希望能畫出20個懵逼臉。
程式碼如下：
// 函式setup() : 準備階段function setup() { // 建立畫布，寬度640畫素，高度480畫素 // 畫布的座標系統為，左上角座標為（0，0）， // x方向水平向右，y方向垂直向下，單位畫素 createCanvas(640,480);}// 函式draw()：作畫階段function draw() { // 呼叫20遍，希望能畫20個臉 drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace(); drawConfuseFace();}// 自定函式：畫懵逼臉function drawConfuseFace() { 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);}然而，卻只能畫出來1個臉：
這是為啥？原來，我們雖然施放了20次drawConfuseFace()，但由於每一次施放中，drawConfuseFace()函式的執行過程用到的引數完全一樣，因此，上述程式碼相當於在相同位置重複畫了20次，每一次繪製都覆蓋掉前一次繪製的結果，那麼最終也只能看到1個臉。這並非我們想要的函式形態，我們更希望drawConfuseFace()能夠在不同位置畫臉。於是，drawConfuseFace()函式需要進行改造，讓它能夠在釋放時輸入引數，並且根據引數的具體數值來發揮不同的效果，例如，我們希望施放該函式時可以用以下形態：drawConfuseFace(100,200); //在(100,200)位置畫懵逼臉drawConfuseFace(300,50); // 在(300,50)位置畫懵逼臉......為了實現它，還需要對變數的認識更進一步，即學會“自定義變數”。
自定義變數
在之前實現的用滑鼠控制位置的程式碼中，我們用到了兩個變數mouseX和mouseY，它們是p5.js提供的可以在任意時刻任意位置直接訪問的變數。為了更加靈活地指定位置，我們可以用自定義變數。
下列程式碼示例了在程式中自定義變數：
varA,a;// 定義兩個變數 A和a, 特別注意，大小寫不同的名稱對應不同變數！var B = 1; // 定義變數B，賦值1var Haha = 100; // 定義變數Haha, 賦值100；var Jam = B; // 定義變數Jam, 用變數B的值為其賦值；
在定義了上述變數後，便可以在需要的時候使用它們，就如同使用變數mouseX和mouseY一般，例如：
ellipse(B,Haha,100,100); // 在位置(B,Haha)繪製長寬為100的圓形line(Jam,Haha,Haha,B); // 從(Jam,Haha)到(Haha,B)繪製一條線段此外，在變數定義中，用到了賦值符"="，要注意，它的作用有點像是“等於”，但其實應該理解為“賦值”，其目的是將右邊的表示式的計算結果賦予左邊的變數，下面列出一些用法示例： var A = 1; // 定義變數A並賦值1 var B = 2; // 定義變數B並賦值2 var C = A + 10;// 定義變數C， 計算表示式A+10的值，然後賦值給C var D = B - 5; // 定義變數D, 計算表示式B-5的值，然後賦值給D var E = A + B; // 定義變數E， 計算表示式A+B的值，然後賦值給E
掌握了自定義變數，我們對原來的程式碼進行改造。原始程式碼為：