1.5 開始第一幅“碼繪”——自定變數與函式,創一招“懵逼表情塗”
引言——想要重複繪製內容應該怎麼辦?
目前我們已經清晰地理解了如何用程式碼繪製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
掌握了自定義變數,我們對原來的程式碼進行改造。原始程式碼為: