第2章Processing基礎(chǔ)應(yīng)用深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室1深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室教學(xué)目標(biāo)1.掌握基本圖形的繪制2.掌握重復(fù)圖形的繪制3.掌握動(dòng)畫的制作2深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室2.1基本圖形的繪制3深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室案例分析一幅繪畫作品能夠透射出畫者的內(nèi)心世界,展示畫者的心情、心緒、心意、心跡、心性。繪畫的本身就是畫者傾訴情感的一種方式。繪畫是通過線條、色彩等形象來(lái)傳達(dá)出畫者的情感,也能讓其他人體驗(yàn)到這種情感。點(diǎn)、線、面是平面藝術(shù)造型中的三種基本形態(tài)，這三種形態(tài)各有不同的視覺效果和藝術(shù)表現(xiàn)力。Processing提供了多種圖形繪制的函數(shù)，能方便快捷地創(chuàng)建圖形，只需要輸入簡(jiǎn)單的代碼就能創(chuàng)造出令人驚艷的作品。如圖所示的“TheBeautifulCity”繪畫就是一個(gè)例子，本節(jié)將帶領(lǐng)同學(xué)們學(xué)習(xí)圖形繪制的相關(guān)函數(shù)。4實(shí)訓(xùn)目的（1）掌握Procesing繪制點(diǎn)、線、圓、橢圓、矩形、三角形、四邊形、貝塞爾曲線以及自由圖形等基本繪圖函數(shù)及使用方法。（2）通過學(xué)習(xí)繪圖函數(shù)來(lái)完成二維圖形的繪制以及圖形坐標(biāo)的定位，掌握程序設(shè)計(jì)的順序結(jié)構(gòu)。5深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室教學(xué)重點(diǎn)Procesing繪制點(diǎn)、線、圓、橢圓、矩形、三角形、四邊形、貝塞爾曲線6深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室教學(xué)難點(diǎn)（1）貝塞爾曲線的制作（2）自由圖形的繪制7目錄CONTENTS1.繪制點(diǎn)和直線2.繪制圓和橢圓3.繪制矩形4.繪制三角形5.繪制四邊形6.繪制曲線7.自繪直線圖形—繪制樹9.綜合圖形—繪制“TheBeautifulCity”8.自繪曲線圖形—繪制月亮8下面我們就開始任務(wù)的學(xué)習(xí)9任務(wù)一描述任務(wù)一：繪制點(diǎn)和直線任務(wù)具體要求學(xué)會(huì)運(yùn)用point()函數(shù)和line()函數(shù)繪制點(diǎn)和一條直線10任務(wù)一實(shí)現(xiàn)步驟1：打開Processing，繪制線，在代碼編寫區(qū)輸入下面所示代碼。voidsetup(){size(800,600);//畫布的大小strokeWeight(2);//指定線條粗細(xì)為2像素}voiddraw(){point(300,200);line(0,0,500,500);}步驟2：?jiǎn)螕舭粹o，執(zhí)行代碼步驟3：選擇“文件”→“保存”命令，將文件取名為“l(fā)ine”。11

Processing主要有兩個(gè)窗口即運(yùn)行窗口和編輯窗口。相關(guān)知識(shí)Processing界面運(yùn)行窗口用來(lái)運(yùn)行編輯效果；編輯窗口主要用來(lái)編輯代碼和發(fā)布程序，包括工具欄、標(biāo)簽欄、代碼編輯區(qū)、消息區(qū)和控制臺(tái)，如圖所示。12

Processing的繪圖坐標(biāo)與像素緊密關(guān)聯(lián)，畫布是由像素組成的。有了坐標(biāo)系，圖形上的點(diǎn)就有了確定的位置。對(duì)于平面而言，確定平面上的一個(gè)點(diǎn)需要兩個(gè)參數(shù)，或者叫兩個(gè)坐標(biāo)，即橫坐標(biāo)和縱坐標(biāo)，可以用(x,y)表示。相關(guān)知識(shí)畫布與坐標(biāo)

使用Processing繪畫，本質(zhì)上就是對(duì)坐標(biāo)的設(shè)置，因?yàn)閳D形的形狀、位置、運(yùn)動(dòng)都是由坐標(biāo)來(lái)決定的。13

point()函數(shù)是是在屏幕上指定的x坐標(biāo)和y坐標(biāo)處繪制點(diǎn)，在Processing中是以像素為度量衡單位。相關(guān)知識(shí)point()函數(shù)語(yǔ)句結(jié)構(gòu)：point(x,y)x：點(diǎn)的x坐標(biāo)y：點(diǎn)的y坐標(biāo)14

line()函數(shù)是在屏幕上繪制一條線(兩點(diǎn)之間的直接路徑)。相關(guān)知識(shí)line()函數(shù)語(yǔ)句結(jié)構(gòu)：line(x1,y1,x2,y2)line(x1,y1,z1,x2,y2,z2)x1：第一個(gè)點(diǎn)的x坐標(biāo)y1：第一個(gè)點(diǎn)的y坐標(biāo)x2：第二個(gè)點(diǎn)的x坐標(biāo)y2：第二個(gè)點(diǎn)的y坐標(biāo)z1：第一個(gè)點(diǎn)的z坐標(biāo)z2：第二個(gè)點(diǎn)的z坐標(biāo)15

舉例說明line()函數(shù)示例size(800,800);line(100,150,450,500);在上述例子中，語(yǔ)句“size(800,800);”是指畫布的寬度為800像素，高度為800像素。語(yǔ)句“l(fā)ine(100,150,450,500);”是通過兩點(diǎn)繪制直線，其中第一個(gè)點(diǎn)的x坐標(biāo)為100，第一個(gè)點(diǎn)的y坐標(biāo)為150；第二個(gè)點(diǎn)的x坐標(biāo)為450，第二個(gè)點(diǎn)的y坐標(biāo)為500。16任務(wù)二描述任務(wù)二：繪制圓和橢圓任務(wù)具體要求學(xué)會(huì)運(yùn)用ellipse()函數(shù)繪制圓和橢圓17任務(wù)二實(shí)現(xiàn)步驟1：將“l(fā)ine”文件中代碼刪除，重寫代碼，繪制圓和橢圓，代碼如下所示。步驟2：?jiǎn)螕舭粹o，執(zhí)行代碼步驟3：選擇“文件”→“另存為…”命令，將文件取名為“circle”。voidsetup(){

size(720,720);}voiddraw(){

ellipse(200,100,100,100);//繪制圓

ellipse(400,200,50,100);//繪制橢圓}18

ellipse()函數(shù)是在屏幕上繪制一個(gè)橢圓(圓)，等寬和等高的橢圓是圓。相關(guān)知識(shí)ellipse()函數(shù)語(yǔ)句結(jié)構(gòu)：ellipse(a,b,c,d)a：橢圓的x坐標(biāo)b：橢圓的y坐標(biāo)c：默認(rèn)橢圓的寬度d：默認(rèn)橢圓的高度默認(rèn)情況下，前兩個(gè)參數(shù)是設(shè)置位置，第三和第四個(gè)參數(shù)設(shè)置形狀的寬度和高度?？梢允褂胑llipseMode()函數(shù)更改原點(diǎn)。19

舉例說明ellipse()函數(shù)示例size(400,300);ellipse(100,100,100,100);//繪制圓

ellipse(300,200,50,100);//是繪制橢圓

20任務(wù)三描述任務(wù)三：繪制矩形任務(wù)具體要求學(xué)會(huì)運(yùn)用rect()函數(shù)繪制矩形21任務(wù)三實(shí)現(xiàn)步驟1：在draw()函數(shù)里添加一行繪制矩形的代碼，代碼如下所示。步驟2：?jiǎn)螕舭粹o，執(zhí)行代碼步驟3：選擇“文件”→“另存為…”命令，將文件取名為“rect”。voidsetup(){size(720,720);}voiddraw(){ellipse(200,100,100,100);//繪制圓ellipse(400,200,50,100);//繪制橢圓rect(150,150,200,200);//繪制矩形}22rect()函數(shù)在屏幕上繪制一個(gè)矩形。相關(guān)知識(shí)rect()函數(shù)語(yǔ)句結(jié)構(gòu)：rect(a,b,c,d)rect(a,b,c,d,r)rect(a,b,c,d,tl,tr,br,bl)a：默認(rèn)情況下矩形的x坐標(biāo)b：默認(rèn)情況下矩形的y坐標(biāo)c：默認(rèn)矩形的寬度d：默認(rèn)矩形的高度r：所有四個(gè)角的半徑tl：左上角的半徑tr：右上角的半徑br：右下角的半徑bl：左下角的半徑23

舉例說明rect()函數(shù)示例size(400,400);rect(100,100,200,200);例1：

例2：size(400,400);rect(80,80,220,220,18);

例3：size(400,400);rect(100,80,220,220,12,24,48,72);

在例3中，語(yǔ)句“rect(100,80,220,220,12,24,48,72);”是繪制圓角矩形，圓角矩形的x坐標(biāo)為100，y坐標(biāo)為80，矩形的寬度是220像素，高度是220像素，四個(gè)角的半徑從左上角開始，繞順時(shí)針移動(dòng)，分別為12，24，48，和72像素。24任務(wù)四描述任務(wù)四：繪制三角形任務(wù)具體要求學(xué)會(huì)運(yùn)用triangle()函數(shù)繪制三角形25任務(wù)四實(shí)現(xiàn)步驟1：在draw()函數(shù)里添加一行繪制三角形的代碼，代碼如下所示。步驟2：?jiǎn)螕舭粹o，執(zhí)行代碼步驟3：選擇“文件”→“另存為…”，文件取名為“triangle”。voidsetup(){size(720,720);}voiddraw(){ellipse(200,100,100,100);//繪制圓ellipse(400,200,50,100);//繪制橢圓rect(150,150,200,200);//繪制矩形triangle(100,50,200,250,30,200);//繪制三角形}26triangle()函數(shù)在屏幕上繪制三角形，三角形是通過連接三個(gè)點(diǎn)創(chuàng)建的平面。相關(guān)知識(shí)triangle()函數(shù)語(yǔ)句結(jié)構(gòu)：triangle(x1,y1,x2,y2,x3,y3)x1：第一個(gè)點(diǎn)的x坐標(biāo)y1：第一個(gè)點(diǎn)的y坐標(biāo)x2：第二個(gè)點(diǎn)的x坐標(biāo)y2：第二個(gè)點(diǎn)的y坐標(biāo)x3：第三個(gè)點(diǎn)的x坐標(biāo)y3：第三個(gè)點(diǎn)的y坐標(biāo)前兩個(gè)參數(shù)指定第一個(gè)點(diǎn)，中間兩個(gè)參數(shù)指定第二個(gè)點(diǎn)，最后兩個(gè)參數(shù)指定第三個(gè)點(diǎn)。27

舉例說明triangle()函數(shù)示例size(300,300);triangle(100,50,200,250,30,200);//繪制三角形

28任務(wù)五描述任務(wù)五：繪制四邊形任務(wù)具體要求學(xué)會(huì)運(yùn)用quad()函數(shù)繪制矩形29任務(wù)五實(shí)現(xiàn)步驟1：在draw()函數(shù)里添加一行繪制四邊形的代碼，代碼如下所示。步驟2：?jiǎn)螕舭粹o，執(zhí)行代碼步驟3：選擇“文件”→“另存為…”，文件取名為“quad”。voidsetup(){size(720,720);}voiddraw(){ellipse(200,100,100,100);//繪制圓ellipse(400,200,50,100);//繪制橢圓rect(150,150,200,200);//繪制矩形triangle(100,50,200,250,30,200);//繪制三角形quad(300,300,430,320,460,400,360,460);//繪制四邊形}30quad()函數(shù)在屏幕上繪制繪制四邊形。相關(guān)知識(shí)quad()函數(shù)語(yǔ)句結(jié)構(gòu)：quad(x1,y1,x2,y2,x3,y3,x4,y4)x1：第一個(gè)角的x坐標(biāo)y1：第一個(gè)角的y坐標(biāo)x2：第二個(gè)角的x坐標(biāo)y2：第二個(gè)角的y坐標(biāo)x3：第三個(gè)角的x坐標(biāo)y3：第三個(gè)角的y坐標(biāo)x3：第四個(gè)角的x坐標(biāo)y3：第四個(gè)角的y坐標(biāo)用于繪制四邊形，其中的八個(gè)參數(shù)分別代表四個(gè)端點(diǎn)的坐標(biāo)，端點(diǎn)的位置可以自由設(shè)置，因此可以繪制出各種不同規(guī)則的形狀。31

舉例說明Quad()函數(shù)示例size(420,360);quad(100,100,230,120,300,230,260,350);

32任務(wù)六描述任務(wù)六：繪制曲線任務(wù)具體要求學(xué)會(huì)運(yùn)用bezier()函數(shù)來(lái)繪制曲線33任務(wù)六實(shí)現(xiàn)步驟1：選擇“文件”→“新建”，在代碼編寫區(qū)輸入所示代碼。步驟2：?jiǎn)螕舭粹o，執(zhí)行代碼步驟3：選擇“文件”→“保存”命令，將文件取名為“bezier”。voidsetup(){size(600,600);}voiddraw(){noFill();bezier(100,300,200,400,400,200,500,300);}34在屏幕上繪制曲線。相關(guān)知識(shí)貝塞爾曲線bezier()函數(shù)語(yǔ)句結(jié)構(gòu)：bezier(x1,y1,cx1,cy1,cx2,cy2,x2,y2)x1：曲線起始點(diǎn)的x坐標(biāo)y1：曲線起始點(diǎn)的y坐標(biāo)x2：曲線終止點(diǎn)的x坐標(biāo)y2：曲線終止點(diǎn)的y坐標(biāo)cx1：曲線第一個(gè)控制點(diǎn)的x坐標(biāo)cy1：曲線第一個(gè)控制點(diǎn)的y坐標(biāo)cx2：曲線第二個(gè)控制點(diǎn)的x坐標(biāo)cy2：曲線第二個(gè)控制點(diǎn)的y坐標(biāo)

35

舉例說明bezier()函數(shù)示例bezier(50,220,230,260,70,40,250,80);該例中，曲線起始點(diǎn)的x坐標(biāo)為50，曲線起始點(diǎn)的y坐標(biāo)為220；曲線終止點(diǎn)的x坐標(biāo)為250，曲線終止點(diǎn)的y坐標(biāo)為80；曲線第一個(gè)控制點(diǎn)的x坐標(biāo)為230，曲線第一個(gè)控制點(diǎn)的y坐標(biāo)為260；曲線第二個(gè)控制點(diǎn)的x坐標(biāo)為70，曲線第二個(gè)控制點(diǎn)的y坐標(biāo)為40。36任務(wù)七描述任務(wù)七：自繪直線圖形—繪制樹任務(wù)具體要求學(xué)會(huì)運(yùn)用beginShape()、vertex()和endShape()三個(gè)函數(shù)繪制樹37任務(wù)七實(shí)現(xiàn)步驟1：選擇“文件”→“新建”，在代碼編寫區(qū)輸入所示代碼。步驟2：?jiǎn)螕舭粹o，執(zhí)行代碼步驟3：選擇“文件”→“保存”，文件取名為“tree”。voidsetup(){size(300,300);background(150,210,255);smooth();}voiddraw(){fill(150,113,60);beginShape();//繪制樹干開始vertex(125,160);//各節(jié)點(diǎn)vertex(112,230);vertex(158,233);vertex(150,165);endShape(CLOSE);//結(jié)束繪制自由圖形fill(0,230,0);beginShape();//繪制樹葉開始vertex(147,60);//各節(jié)點(diǎn)vertex(96,120);vertex(120,117);vertex(70,175);vertex(200,178);vertex(160,116);vertex(184,120);endShape(CLOSE);//結(jié)束繪制自由圖形，CLOSE指閉合圖形

}38繪制直線邊框自由圖形的有beginShape()、vertex()和endShape()三個(gè)函數(shù)。函數(shù)在屏幕上繪制一個(gè)矩形。相關(guān)知識(shí)繪制直線邊框自由圖形函數(shù)beginShape()指繪制自由圖形開始，vertex(x，y)指連接圖形的節(jié)點(diǎn)，兩個(gè)參數(shù)是節(jié)點(diǎn)的坐標(biāo)，endShape(CLOSE)表示繪制自由圖形結(jié)束，其中的參數(shù)CLOSE指閉合圖形。39

舉例說明繪制直線邊框自由圖形函數(shù)beginShape();//開始繪制圖形vertex(125,160);//各節(jié)點(diǎn)的坐標(biāo)vertex(112,230);vertex(158,233);vertex(150,165);endShape(CLOSE);//結(jié)束繪制自由圖形例1：例2：fill(0,230,0);beginShape();//開始繪制圖形

vertex(147,60);//各節(jié)點(diǎn)vertex(96,120);vertex(120,117);vertex(70,175);vertex(200,178);vertex(160,116);vertex(184,120);endShape(CLOSE);//結(jié)束繪制自由圖形，CLOSE指閉合圖形

40任務(wù)八描述任務(wù)八：自繪曲線圖形—繪制月亮任務(wù)具體要求運(yùn)用貝塞爾曲線bezierVertex()函數(shù)繪制云和月亮41任務(wù)八實(shí)現(xiàn)步驟1：選擇“文件”→“新建”，在代碼編寫區(qū)輸入所示代碼。步驟2：?jiǎn)螕舭粹o，執(zhí)行代碼步驟3：選擇“文件”→“保存”，文件取名為“moon”。voidsetup(){size(300,300);

background(50);

smooth();}

voiddraw(){//繪制月亮

fill(255,250,190);

beginShape();//開始繪制月亮

vertex(130,60);

bezierVertex(250,70,210,200,130,200);

bezierVertex(150,190,200,115,130,60

endShape(CLOSE);//結(jié)束繪制自由圖形，CLOSE指閉合圖形

textSize(26);//設(shè)置當(dāng)前字體大小26

text("TheMoon",20,40);//顯示"TheMoonandCloud"字符,字符的x坐標(biāo)是20，y坐標(biāo)是40}42繪制曲線自由圖形的有beginShape()、vertex()、

bezierVertex()和endShape()四個(gè)函數(shù)。函數(shù)在屏幕上繪制一個(gè)矩形。相關(guān)知識(shí)曲線繪制組合函數(shù)繪制曲線邊框自由圖形包含beginShape()、vertex()、bezierVertex()和endShape()四個(gè)函數(shù)。vertex(x,y)指圖形起始端點(diǎn)，bezierVertex(cx1,cy1,cx2,cy2,x,y)有六個(gè)參數(shù)，cx1