第3章Processing綜合應(yīng)用深圳職業(yè)技術(shù)學院計算機與網(wǎng)絡(luò)基礎(chǔ)教研室1深圳職業(yè)技術(shù)學院計算機與網(wǎng)絡(luò)基礎(chǔ)教研室2.2圖像的應(yīng)用2深圳職業(yè)技術(shù)學院計算機與網(wǎng)絡(luò)基礎(chǔ)教研室案例分析在第2章中我們介紹了Processing運用繪圖函數(shù)能方便快捷地創(chuàng)建圖形，但是在作品的制作中經(jīng)常需要用到圖片來美化和修飾作品。Processing可以很方便地導入或?qū)С鰣D片，同時可以對圖片進行濾鏡和像素處理，Processing所支持的圖片格式有GIF、JPG、TGA和PNG。Processing將一副圖像顯示到屏幕上需要執(zhí)行以下四個步驟：（1）將圖像添加到程序的data文件夾中。（2）創(chuàng)建PImage變量來存儲圖像。（3）使用loadImage()函數(shù)將圖像加載到變量。（4）使用image()函數(shù)顯示圖像。本節(jié)將帶領(lǐng)你學習圖像處理以及圖像處理的相關(guān)函數(shù)，并制作如圖“川劇變臉”的作品。3實訓目的（1）掌握Processing圖片文件的添加（2）掌握Processing圖片變量的創(chuàng)建、加載和顯示（3）掌握Processing圖片文件的動態(tài)顯示（4）了解Processing圖片文件的濾鏡和蒙版4教學重點（1）圖片文件的添加（2）圖片變量的創(chuàng)建、加載和顯示（3）生成動態(tài)戲曲臉譜圖像5教學難點（1）掌握Processing圖片文件的添加（2）掌握Processing圖片變量的創(chuàng)建、加載和顯示（3）掌握Processing圖片文件的動態(tài)顯示（4）生成動態(tài)戲曲臉譜圖像6目錄CONTENTS1.圖片文件的添加2.圖片變量的創(chuàng)建、加載和顯示3.生成動態(tài)戲曲臉譜圖像74.創(chuàng)建中文字體和顯示中文文本深圳職業(yè)技術(shù)學院計算機與網(wǎng)絡(luò)基礎(chǔ)教研室8下面我們開始任務(wù)的學習任務(wù)一描述任務(wù)一：圖片文件的添加Processing除了可以繪制圖形和創(chuàng)建文本，還能夠在程序中加載圖片或矢量圖形。Processing加載的圖片需要放在指定的文件夾中才能正常顯示，Processing是使用一個命名為“data”的文件夾來存儲這些圖片文件，當轉(zhuǎn)移草圖程序位置時，圖片文件也會自動轉(zhuǎn)移。本次任務(wù)是生成“data”的文件夾和添加素材里的圖片文件。9任務(wù)一實現(xiàn)步驟1：將圖片文件添加到程序的“data”文件夾中。選擇“文件”→“新建”，在Processing中創(chuàng)建一個程序，保存文件名為“image0”。10步驟2：選擇“速寫本”→“添加文件”，選擇并添加需要的圖片文件，如圖所示。任務(wù)一實現(xiàn)步驟3：檢查添加的文件，選擇“速寫本”→“打開程序目錄”命令，如圖3-24所示，就會看到一個名稱為“data”的文件夾。11程序說明12Processing使用一個命名為“data”的文件夾來存儲圖片文件，當移動程序位置或者輸出它們的時候，就不用去考慮這些文件的位置。除了使用菜單“添加文件“命令之外，還可以通過直接將圖片文件拖拽到Processing窗口的編輯區(qū)來實現(xiàn)，圖片文件一樣會被復(fù)制到“data”文件夾中，如果原先沒有“data”文件夾，它會被自動創(chuàng)建。還可以在Processing程序之外創(chuàng)建“data”文件夾,同時復(fù)制圖片文件到“data”文件夾，當要處理大量文件的時候，這種方法很有用?？梢詫⑿枰虞d的位圖、音頻、視頻、字體等很多文件存儲在“data”文件夾中，以方便組織和管理素材。任務(wù)二描述任務(wù)二：圖片變量的創(chuàng)建、加載和顯示在任務(wù)一準備好圖片后，就要創(chuàng)建圖片變量，PImage是專門用于定義圖片變量的數(shù)據(jù)類型；接著是載入圖片至變量，使用函數(shù)loadImage()將圖片載入到圖片變量中；最后運用函數(shù)image()顯示圖片。本次任務(wù)是使用PImage數(shù)據(jù)類型、loadImage()函數(shù)和image()函數(shù)實現(xiàn)圖片變量的創(chuàng)建、加載和顯示。13任務(wù)二實現(xiàn)步驟1：創(chuàng)建圖片變量。在“image0”程序文件的窗口編輯區(qū)寫上第一行代碼，如下所示：14PImageimg1；//創(chuàng)建圖片變量img1【說明】PImage用于存儲圖像的數(shù)據(jù)類型，處理可以顯示.gif、.jpg、.tga和.png圖像。圖像可以在2D和3D空間中顯示，img1是圖片變量名。圖片變量創(chuàng)建后，需使用loadImage()函數(shù)加載它。任務(wù)二實現(xiàn)步驟2：使用loadImage()函數(shù)加載圖片變量img1。在“image0”程序文件的窗口編輯區(qū)繼續(xù)寫上如下代碼：15PImageimg1;//創(chuàng)建圖片變量voidsetup(){size(600,900);img1=loadImage("10.png");//加載圖像文件10.png}loadImage()函數(shù)是將圖像“10.png”加載到數(shù)據(jù)類型為PImage的img1變量中?！?0.png”圖像必須位于當前的“data”文件夾目錄中才能成功加載?！菊f明】任務(wù)二實現(xiàn)步驟3：“img1”圖片變量的顯示。在“image0”程序文件的窗口編輯區(qū)繼續(xù)寫上如下代碼：16voiddraw(){background(0);image(img1,0,0);//顯示圖像}

步驟4：運行“image0”程序文件，得到如圖所示的效果。任務(wù)二實現(xiàn)步驟5：顯示多張圖片變量生成完整的背景。在“image0”程序文件的窗口編輯區(qū)繼續(xù)寫上如下代碼：17步驟6：運行“image0”程序文件，得到如圖所示的效果。PImageimg1,img2,img3,img4;//創(chuàng)建變量voidsetup(){size(600,900);img1=loadImage("10.png");//加載圖像文件img2=loadImage("11.png");img3=loadImage("12.png");img4=loadImage("13.png");}voiddraw(){background(0);//背景image(img1,0,0);//顯示圖像image(img2,0,100);image(img3,0,0);image(img4,0,100);}PImage用于存儲圖像的數(shù)據(jù)類型，處理可以顯示.gif、.jpg、.tga和.png圖像。相關(guān)知識平面圖片繪制PImage要顯示圖片，首先要創(chuàng)建一個PImage類型的變量用于引用圖片。18PImageimg1；//創(chuàng)建圖片變量img1例如要創(chuàng)建圖片變量img1，那就是：將圖像加載到類型為PImage的變量中相關(guān)知識loadImage()函數(shù)語句結(jié)構(gòu)：loadImage(filename)loadImage(filename,extension)filename：要加載的文件的名稱。extension：要加載的圖像類型，例如“png”、“gif”、“jpg”。19

image()函數(shù)是將圖像顯示到窗口，圖像必須在“data”目錄中才能正確加載。相關(guān)知識image()函數(shù)語句結(jié)構(gòu)：image(img,a,b)image(img,a,b,c,d)20

當一張圖片從原始尺寸放大或縮小的時候，它有可能被拉伸扭曲，為避免這種情況，我們可以使用image()函數(shù)改變圖像的尺寸和位置。任務(wù)三描述任務(wù)三:生成動態(tài)戲曲臉譜圖像21通過任務(wù)二，我們就將戲曲臉譜的背景圖片顯示在指定的位置了。要制作動態(tài)戲曲臉譜圖像，首先需要提前準備好多張臉譜圖像的素材，放在“data”文件夾內(nèi)；其次為了方便使用多張臉譜圖像，可以用本章案例一的數(shù)組的方式來管理實現(xiàn)。本次任務(wù)是使用數(shù)組生成動態(tài)戲曲臉譜圖像。任務(wù)三實現(xiàn)步驟1：修改“image0”文件，加載臉譜圖片，在代碼編寫區(qū)輸入所示代碼。22PImageimg1,img2,img3,img4;//創(chuàng)建變量PImage[]images;//先聲明一個images數(shù)組，數(shù)據(jù)類型是PImageintImageIndex=0;//圖片數(shù)組的下標賦初值為0voidsetup(){size(600,900);img1=loadImage("10.png");//加載圖像文件“10.png”并賦值給img1變量img2=loadImage("11.png");img3=loadImage("12.png");img4=loadImage("13.png");frameRate(5);//刷屏的速度為5}23voiddraw(){//背景background(0);image(img1,0,0);//顯示臉譜圖片//加載臉譜圖片到images數(shù)組

images=newPImage[8];//images數(shù)組的長度為8images[0]=loadImage("1.png");//加載圖像文件"1.png"并賦值給數(shù)組images[0]images[1]=loadImage("2.png");//加載圖像文件"2.png"并賦值給數(shù)組images[1]images[2]=loadImage("3.png");//加載圖像文件"3.png"并賦值給數(shù)組images[2]images[3]=loadImage("4.png");//加載圖像文件"4.png"并賦值給數(shù)組images[3]images[4]=loadImage("5.png");//加載圖像文件"5.png"并賦值給數(shù)組images[4]images[5]=loadImage("6.png");//加載圖像文件"6.png"并賦值給數(shù)組images[5]images[6]=loadImage("7.png");//加載圖像文件"7.png"并賦值給數(shù)組images[6]images[7]=loadImage("8.png");//加載圖像文件"8.png"并賦值給數(shù)組images[7]image(images[ImageIndex],0,100);//按照images[下標]顯示圖片，下標ImageIndex的初值為0ImageIndex=(ImageIndex+1)%images.length;//數(shù)組下標除以images.length數(shù)組的長度取余數(shù)，讓數(shù)組的下標只在0~7取值image(img2,0,100);image(img3,0,0);image(img4,0,100);}程序說明24（1）要做動態(tài)戲曲臉譜圖像，需要提前準備好多張臉譜圖像素材，放在“data”文件夾內(nèi)。（2）為了更加方便管理多張臉譜圖像，可以用數(shù)組方式來處理。在程序中，通過“PImage[]images;”定義圖片型數(shù)組。（3）通過“image(images[ImageIndex],0,100);”代碼的數(shù)組下標“ImageIndex”每次運行增加1顯示不同下標的數(shù)組變量來顯示不同的圖像，從而呈現(xiàn)動態(tài)臉譜圖片顯示的效果。（4）由于“images”數(shù)組下標只能在0~7之間變換，否則會下標溢出導致程序報錯，而通過“(ImageIndex+1)%images.length”即用數(shù)組下標加1的值除以數(shù)組的長度取余數(shù)的方法，從而實現(xiàn)了“images”數(shù)組下標在0~7之間變換。任務(wù)三實現(xiàn)單擊“運行”按鈕，執(zhí)行代碼，效果如圖所示。25任務(wù)四描述任務(wù)四:創(chuàng)建中文字體和顯示中文文本26任務(wù)三實現(xiàn)后，可以看到“川劇變臉”動態(tài)效果已經(jīng)呈現(xiàn)出來，和最終的效果對比，還沒有顯示中文“川劇變臉”的說明，接下來添加中文文本來介紹“川劇變臉”。在Processing中不能直接顯示中文，需要先創(chuàng)建中文字體，然后將顯示文本使用的字體設(shè)置為已創(chuàng)建的中文字體，才能正確顯示中文。本次任務(wù)是創(chuàng)建中文字體和顯示中文文本。任務(wù)四實現(xiàn)步驟1：創(chuàng)建中文字體。修改“image0”文件，在代碼編寫區(qū)添加所示代碼。27PFontfont;//字體PFont設(shè)定font=createFont("SansSerif",16,true);//創(chuàng)建中文字體textFont(font);//將文本使用的字體設(shè)置為已創(chuàng)建的font字體【說明】漢字在Processing不能直接使用和顯示，需要先創(chuàng)建漢字字體，分為以下三步：第一步：“PFo