第3章Processing綜合應(yīng)用1深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室學(xué)習(xí)目標(biāo)1.掌握數(shù)組的基本概念和具體應(yīng)用2.掌握圖像處理的相關(guān)函數(shù)和具體應(yīng)用3.掌握交互設(shè)計(jì)的鼠標(biāo)交互和鍵盤交互2深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室3.1數(shù)組的應(yīng)用3深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室案例分析假設(shè)現(xiàn)在需要處理班級中50名同學(xué)的成績，在前面的學(xué)習(xí)中，我們知道保存這些成績，需要定義50個變量，如果給同學(xué)們一個一個進(jìn)行成績的處理，不僅麻煩耗時，還容易出錯，造成大量的代碼在后期維護(hù)困難。如果有了數(shù)組，就知道這些成績可以保存在一個數(shù)組中，而無須定義50個獨(dú)立的變量。我們可以將該數(shù)組命名為“score”，并按順序存儲和管理各位同學(xué)的成績，進(jìn)行統(tǒng)一操作以及實(shí)現(xiàn)具體的功能。4使用數(shù)組，我們需要先聲明數(shù)組、定義數(shù)組的長度、給數(shù)組賦值等，然后才能對數(shù)組進(jìn)行一系列的操作。本案例首先對數(shù)組進(jìn)行聲明、創(chuàng)建與賦值，接下來對數(shù)組進(jìn)行排序，讓數(shù)據(jù)變得規(guī)范有序，然后對數(shù)組數(shù)據(jù)進(jìn)行輸出。除了常規(guī)的把數(shù)據(jù)顯示在屏幕上，我們還可以用圖形方式顯示數(shù)據(jù)，讓數(shù)據(jù)變得更直觀和易于理解，數(shù)組數(shù)據(jù)圖形化制作效果如圖所示。實(shí)訓(xùn)目的（1）掌握Processing數(shù)組的聲明、創(chuàng)建和賦值（2）掌握Processing數(shù)組的排序和輸出（3）掌握Processing數(shù)組數(shù)據(jù)的圖形顯示5教學(xué)重點(diǎn)（1）聲明、創(chuàng)建、賦值數(shù)組（2）排序和輸出數(shù)組6教學(xué)難點(diǎn)（1）圖形顯示數(shù)組數(shù)據(jù)（2）用不同圖形顯示數(shù)據(jù)7目錄CONTENTS1.數(shù)組的聲明、創(chuàng)建與賦值2.數(shù)組排序和輸出3.數(shù)組數(shù)據(jù)圖形顯示8深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室9下面我們就開始任務(wù)的學(xué)習(xí)任務(wù)一描述任務(wù)一：數(shù)組的聲明、創(chuàng)建與賦值一維數(shù)組（以下簡稱數(shù)組），即只有一個維度的數(shù)組，例如一個教室里的任意一列或一行座位，就可以看作是一維數(shù)組。創(chuàng)建數(shù)組需要對它進(jìn)行聲明，定義數(shù)組的長度，然后創(chuàng)建、賦值。數(shù)組聲明比變量的聲明多了一對中括號“[]”，這樣會告訴編譯器是聲明了一個數(shù)組變量而不是單個變量。本次任務(wù)是先聲明和創(chuàng)建一個score數(shù)組，再給score數(shù)組賦值，最后進(jìn)行score數(shù)組數(shù)據(jù)輸出。10任務(wù)一實(shí)現(xiàn)步驟1：選擇“文件”→“新建”命令，在代碼編寫區(qū)輸入所示代碼，聲明和創(chuàng)建score數(shù)組。int[]score;//先聲明一個score數(shù)組，數(shù)據(jù)類型是int型score=newint[6];//通過new關(guān)鍵字在內(nèi)存的堆中開辟一部分空間用來存儲score數(shù)組的數(shù)據(jù)，數(shù)組的長度為611步驟2：在代碼編寫區(qū)繼續(xù)輸入所示代碼給score數(shù)組賦值。score[0]=65;score[1]=75;score[2]=88;score[3]=98;score[4]=68;score[5]=86;程序說明12score[0]=65;score[1]=75;score[2]=88;score[3]=98;score[4]=68;score[5]=86;score數(shù)組657588986886排列順序第1個第2個第3個第4個第5個第6個下標(biāo)順序第0個第1個第2個第3個第4個第5個（1）我們通過在“[]”里面填入整數(shù)來對數(shù)組的對應(yīng)位置的值進(jìn)行寫入和讀取的操作，這種方法我們稱為下標(biāo)法?！癧]”里面填入整數(shù)之后就是下標(biāo)，它是用來確定要寫入或者讀取數(shù)組的哪一個位置空間的，如表所示（2）在數(shù)組中，數(shù)據(jù)的標(biāo)記都是從0開始的，所以第一位同學(xué)的成績下標(biāo)順序?yàn)?，第二位同學(xué)的成績下標(biāo)順序?yàn)?，以此類推，第6位同學(xué)成績在數(shù)組中的下標(biāo)順序?yàn)?，通過數(shù)組名加上“[下標(biāo)序號]”來訪問數(shù)組對應(yīng)的位置空間。（3）數(shù)組聲明與創(chuàng)建完成之后，用“=”對數(shù)組里的每個元素進(jìn)行了賦值操作，也可以改為連同數(shù)組的聲明一起賦值，上面的語句可以改為：int[]score=[65,75,88,98,68,86]；任務(wù)一實(shí)現(xiàn)步驟3：在代碼編寫區(qū)繼續(xù)輸入所示代碼，輸出score數(shù)組第3位和第6位同學(xué)的成績.步驟4：單擊按鈕，執(zhí)行代碼，結(jié)果如圖所示。步驟5：選擇“文件”→“保存”命令，將文件取名為“array1_1”。13println("第3位同學(xué)的成績是："+score[2]);//”+”在這里的作用是連接符println("第6位同學(xué)的成績是："+score[5]);在Processing中，數(shù)組（Array）是結(jié)構(gòu)化的一組數(shù)，用一個統(tǒng)一的數(shù)組名和下標(biāo)來唯一地確定數(shù)組中的元素。數(shù)組可以包含任意類型的數(shù)據(jù)，同一個數(shù)組中的每個元素都屬于同一個數(shù)據(jù)類型，并且每個元素都可以單獨(dú)被賦值和讀取。創(chuàng)建數(shù)組需要對它進(jìn)行聲明，定義數(shù)組的長度，然后再賦值。相關(guān)知識數(shù)組介紹141.數(shù)組的聲明變量類型[]數(shù)組名稱；【例1】數(shù)組的聲明。int[]number;//聲明一個名為number的整數(shù)數(shù)組float[]rate;//聲明一個名為rate的浮點(diǎn)數(shù)組相關(guān)知識152.定義數(shù)組的長度變量類型[]數(shù)組名稱=new變量類型[長度]聲明數(shù)組的名稱只是第一步，數(shù)組并未建完，需要定義數(shù)組的長度（數(shù)量）。每個數(shù)組都有一個固定的數(shù)量，這里要使用“new”定義數(shù)組的長度。值得注意的是：數(shù)組的第一位元素序號是0,[6]代表了0~5的6個元素。【例2】定義數(shù)組的長度。int[]number=newint[6];//定義整數(shù)數(shù)組number的長度為6在這個定義的數(shù)組包含了number[0]、number[1]、number[2]、number[3]、number[4]、number[5]這6個變量。相關(guān)知識163.給數(shù)組賦值數(shù)組的每一個變量應(yīng)被指定相應(yīng)的值，賦值的方式有兩種，第一種是采取逐一為每個變量指定值。這樣講可能有些抽象，我們可以想象成有6

個人站成一排，他們的序號分別是0~5，0號的值是6，1號的值是8……依此類推。【例3】給數(shù)組賦值。int[]number=newint[6];number[0]=6;//第1個元素值為6number[1]=8;//第2個元素值為8number[2]=19;//第3個元素值為19number[3]=5;//第4個元素值為5number[4]=10;//第5個元素值為1number[5]=25;//第6個元素值為25

順序相關(guān)知識17第二種賦值的方式是把“聲明數(shù)組”與“賦值”整合在一起，在花括號{}內(nèi)直接填寫數(shù)組各元素的值。【例4】聲明數(shù)組與賦值整合。int[]numbers={6,8,19,5,10,25};//整數(shù)數(shù)組的值float[]rate={6.8,10.88,17.99,6.01,10.56,15.36};//浮點(diǎn)數(shù)組的值任務(wù)二描述任務(wù)二：數(shù)組排序和輸出在任務(wù)一中，我們寫了兩個println()語句來分別顯示第3位和第6位同學(xué)的成績。通過單個println()語句只能一個個顯示學(xué)生的成績。如果希望顯示所有同學(xué)的成績并且還是有序的，該如何實(shí)現(xiàn)呢？這里可以先用sort()函數(shù)對數(shù)組數(shù)據(jù)進(jìn)行排序，再用第二章學(xué)過的for循環(huán)語句來輸出數(shù)組數(shù)據(jù)。本次任務(wù)，使用sort()函數(shù)和for循環(huán)語句實(shí)現(xiàn)數(shù)組數(shù)據(jù)有序輸出。18任務(wù)二實(shí)現(xiàn)步驟1：對數(shù)組進(jìn)行排序，在代碼編寫區(qū)輸入如下代碼。19score=sort(score);【說明】sort()是數(shù)組常用的函數(shù)，是對數(shù)組內(nèi)容進(jìn)行正向排序，代碼score=sort(score);是對score數(shù)組進(jìn)行排序后，再賦值給score數(shù)組。任務(wù)二實(shí)現(xiàn)步驟2：用for循環(huán)輸出數(shù)組所有數(shù)據(jù)，在代碼編寫區(qū)修改代碼，輸出score數(shù)組所有同學(xué)的成績，完整代碼如下所示。20int[]score;//先聲明一個score數(shù)組，數(shù)據(jù)類型是intscore=newint[6];//數(shù)組賦值score[0]=65;score[1]=75score[2]=88;score[3]=98;score[4]=68;score[5]=86;//數(shù)組排序score=sort(score);//for循環(huán)顯示所有同學(xué)的成績for(inti=0;i<score.length;i++){println("第"+(i+1)+"位同學(xué)的成績是："+score[i]);}任務(wù)二實(shí)現(xiàn)步驟3：單擊21按鈕，執(zhí)行代碼，結(jié)果如圖所示步驟4：選擇“文件”→“另存為…”命令，將文件取名為“array1_2”。

sort()函數(shù)是對數(shù)組的內(nèi)容進(jìn)行正向排序。相關(guān)知識sort()函數(shù)語句結(jié)構(gòu)：sort(array)sort(array,count)array：是數(shù)組count：是設(shè)定從數(shù)組的哪一個位置開始進(jìn)行正向排序。22【例1】sort()函數(shù)正向排序數(shù)組示例int[]result1={2,12,6,43,21};int[]result2=sort(result1);println(result2);運(yùn)行結(jié)果如圖所示。程序說明23（1）通過for循環(huán)語句遍歷數(shù)組的每一個元素，并用println()函數(shù)完成輸出。for(inti=0;i<score.length;i++){println("第"+(i+1)+"位同學(xué)的成績是："+score[i]);}

（3）循環(huán)體語句“println("第"+(i+1)+"位同學(xué)的成績是："+score[i]);”是先輸出“第”字，“+”運(yùn)算符是用來連接字符串的，接下來同行輸出“i+1”的值，然后再同行原樣輸出“位同學(xué)的成績是：”，最后再輸出“score[i]”的值。只要條件表達(dá)式“i<score.length”成立，循環(huán)體語句就會重復(fù)執(zhí)行，當(dāng)條件表達(dá)式不成立時，退出循環(huán)。程序中，理解的難點(diǎn)是for循環(huán)語句：任務(wù)三描述任務(wù)三:數(shù)組數(shù)據(jù)圖形顯示24完成任務(wù)二后，我們就實(shí)現(xiàn)了score數(shù)組的聲明、創(chuàng)建、賦值、排序與輸出。好的數(shù)據(jù)展示，往往會讓數(shù)據(jù)分析結(jié)果更為直觀、生動和更具說服力，為此經(jīng)常會用線形圖、柱狀圖、餅圖、氣泡圖和直方圖等進(jìn)行顯示。在這里如果希望把每個同學(xué)的成績也用直方圖顯示，那么該如何實(shí)現(xiàn)呢？本次任務(wù)，使用rect()繪制矩形函數(shù)繪制直方圖。任務(wù)三實(shí)現(xiàn)步驟1：選擇“文件”→“新建”命令，在代碼編寫區(qū)輸入所示代碼。步驟2：單擊按鈕，執(zhí)行代碼，結(jié)果如圖所示步驟3：選擇“文件”→“保存”命令，將文件取名為“array2_1”。25int[]score={65,75,88,98,68,86};voidsetup(){

size(300,200);

background(255);}voiddraw(){fill(0);//畫直方圖

for(inti=0;i<score.length;i++){rect(0,i*10,score[i],8);//畫不同寬度的矩形

}}程序說明26（1）在這里數(shù)據(jù)圖形顯示是在for循環(huán)語句中通過畫矩形rect(0,i*10,score[i],8)函數(shù)來畫條形圖。（2）函數(shù)rect(0,i*10,score[i],8)的第一個參數(shù)為0，代表的是畫矩形的起始點(diǎn)的x坐標(biāo)為0；縱坐標(biāo)為i*10，當(dāng)i的值分別為0，1，2…5時，矩形的起始點(diǎn)的y坐標(biāo)分別為0，10，20…50；score[i]代表的是矩形的寬度，當(dāng)i的值分別為0，1，2…5時，score[i]的值分別為65，75，88…86；8為矩形的高度，即所有矩形的高度都是8。思考：27如果是畫縱向直方圖，且每個矩形之間有些距離，并能在矩形的正上方顯示這個矩形長度代表的數(shù)，如圖所示：又該如何編碼實(shí)現(xiàn)呢？任務(wù)三實(shí)現(xiàn)步驟4：在代碼編寫區(qū)修改為如下所示代碼。步驟5：單擊按鈕，執(zhí)行代碼，效果如圖所示。步驟6：選擇“文件”→“另存為”命令，將文件取名為“array2_2”。28int[]score={65,75,88,98,68,86};voidsetup(){size(300,200);background(255);}voiddraw(){fill(0);for(inti=0;i<score.length;i++){rect(i*20+60,200,16,-score[i]);//畫直方圖

text(score[i],i*20+60,200-score[i]-2}}程序說明：29（1）rect(i*20+60,200,16,-score[i]);函數(shù)的作用是畫縱向的矩形，i*20+60是矩形的x坐標(biāo)，當(dāng)i的值分別為0，1，2…5時，矩形的起始點(diǎn)的x坐標(biāo)分別為60，80，100…160；-score[i]是矩形的高度，圖形往上走時，y坐標(biāo)是減少的。（2）text(score[i],i*20+60,200-score[i]-2);是顯示每個矩形代表的數(shù)字，score[i]是遍歷數(shù)組里的所有數(shù)；i*20+60是數(shù)組里的數(shù)顯示的x坐標(biāo)，它和矩形的x坐標(biāo)保持一致，200-score[i]-2是數(shù)組里的數(shù)顯示的y坐標(biāo)，用畫布的height(200)-數(shù)組的數(shù)(score[i])，-2是讓數(shù)的y坐標(biāo)再往上移兩個像素，目的是和矩形的邊界隔開兩個像素寬度。Processing內(nèi)建了數(shù)組常用的函數(shù)，能夠幫助我們快速實(shí)現(xiàn)一些基本功能。相關(guān)知識數(shù)組常用的函數(shù)常見的有append()函數(shù)、arrayCopy()函數(shù)、contact()函數(shù)、expand()函數(shù)、sort()函數(shù)、reverse()函數(shù)、shorten()函數(shù)、splice()函數(shù)和subset()函數(shù)。30我們對每一個數(shù)組函數(shù)的使用都一一舉例進(jìn)行了詳細(xì)說明，具體使用方法請大家參考教材“數(shù)組應(yīng)用”的相關(guān)知識說明。知識點(diǎn)總結(jié)數(shù)組的創(chuàng)建數(shù)組的排序和輸出數(shù)組的聲明數(shù)組數(shù)據(jù)圖形顯示31數(shù)組的賦值課后作業(yè)1.請同學(xué)們給做好直方圖加上不同顏色，如圖所示。322.請同學(xué)們挑戰(zhàn)一下可否讓直方圖變動起來。謝謝觀看深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室33第3章Processing綜合應(yīng)用深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室34深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室2.2圖像的應(yīng)用35深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室案例分析在第2章中我們介紹了Processing運(yùn)用繪圖函數(shù)能方便快捷地創(chuàng)建圖形，但是在作品的制作中經(jīng)常需要用到圖片來美化和修飾作品。Processing可以很方便地導(dǎo)入或?qū)С鰣D片，同時可以對圖片進(jìn)行濾鏡和像素處理，Processing所支持的圖片格式有GIF、JPG、TGA和PNG。Processing將一副圖像顯示到屏幕上需要執(zhí)行以下四個步驟：（1）將圖像添加到程序的data文件夾中。（2）創(chuàng)建PImage變量來存儲圖像。（3）使用loadImage()函數(shù)將圖像加載到變量。（4）使用image()函數(shù)顯示圖像。本節(jié)將帶領(lǐng)你學(xué)習(xí)圖像處理以及圖像處理的相關(guān)函數(shù)，并制作如圖“川劇變臉”的作品。36實(shí)訓(xùn)目的（1）掌握Processing圖片文件的添加（2）掌握Processing圖片變量的創(chuàng)建、加載和顯示（3）掌握Processing圖片文件的動態(tài)顯示（4）了解Processing圖片文件的濾鏡和蒙版37教學(xué)重點(diǎn)（1）圖片文件的添加（2）圖片變量的創(chuàng)建、加載和顯示（3）生成動態(tài)戲曲臉譜圖像38教學(xué)難點(diǎn)（1）掌握Processing圖片文件的添加（2）掌握Processing圖片變量的創(chuàng)建、加載和顯示（3）掌握Processing圖片文件的動態(tài)顯示（4）生成動態(tài)戲曲臉譜圖像39目錄CONTENTS1.圖片文件的添加2.圖片變量的創(chuàng)建、加載和顯示3.生成動態(tài)戲曲臉譜圖像404.創(chuàng)建中文字體和顯示中文文本深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室41下面我們開始任務(wù)的學(xué)習(xí)任務(wù)一描述任務(wù)一：圖片文件的添加Processing除了可以繪制圖形和創(chuàng)建文本，還能夠在程序中加載圖片或矢量圖形。Processing加載的圖片需要放在指定的文件夾中才能正常顯示，Processing是使用一個命名為“data”的文件夾來存儲這些圖片文件，當(dāng)轉(zhuǎn)移草圖程序位置時，圖片文件也會自動轉(zhuǎn)移。本次任務(wù)是生成“data”的文件夾和添加素材里的圖片文件。42任務(wù)一實(shí)現(xiàn)步驟1：將圖片文件添加到程序的“data”文件夾中。選擇“文件”→“新建”，在Processing中創(chuàng)建一個程序，保存文件名為“image0”。43步驟2：選擇“速寫本”→“添加文件”，選擇并添加需要的圖片文件，如圖所示。任務(wù)一實(shí)現(xiàn)步驟3：檢查添加的文件，選擇“速寫本”→“打開程序目錄”命令，如圖3-24所示，就會看到一個名稱為“data”的文件夾。44程序說明45Processing使用一個命名為“data”的文件夾來存儲圖片文件，當(dāng)移動程序位置或者輸出它們的時候，就不用去考慮這些文件的位置。除了使用菜單“添加文件“命令之外，還可以通過直接將圖片文件拖拽到Processing窗口的編輯區(qū)來實(shí)現(xiàn)，圖片文件一樣會被復(fù)制到“data”文件夾中，如果原先沒有“data”文件夾，它會被自動創(chuàng)建。還可以在Processing程序之外創(chuàng)建“data”文件夾,同時復(fù)制圖片文件到“data”文件夾，當(dāng)要處理大量文件的時候，這種方法很有用?？梢詫⑿枰虞d的位圖、音頻、視頻、字體等很多文件存儲在“data”文件夾中，以方便組織和管理素材。任務(wù)二描述任務(wù)二：圖片變量的創(chuàng)建、加載和顯示在任務(wù)一準(zhǔn)備好圖片后，就要創(chuàng)建圖片變量，PImage是專門用于定義圖片變量的數(shù)據(jù)類型；接著是載入圖片至變量，使用函數(shù)loadImage()將圖片載入到圖片變量中；最后運(yùn)用函數(shù)image()顯示圖片。本次任務(wù)是使用PImage數(shù)據(jù)類型、loadImage()函數(shù)和image()函數(shù)實(shí)現(xiàn)圖片變量的創(chuàng)建、加載和顯示。46任務(wù)二實(shí)現(xiàn)步驟1：創(chuàng)建圖片變量。在“image0”程序文件的窗口編輯區(qū)寫上第一行代碼，如下所示：47PImageimg1；//創(chuàng)建圖片變量img1【說明】PImage用于存儲圖像的數(shù)據(jù)類型，處理可以顯示.gif、.jpg、.tga和.png圖像。圖像可以在2D和3D空間中顯示，img1是圖片變量名。圖片變量創(chuàng)建后，需使用loadImage()函數(shù)加載它。任務(wù)二實(shí)現(xiàn)步驟2：使用loadImage()函數(shù)加載圖片變量img1。在“image0”程序文件的窗口編輯區(qū)繼續(xù)寫上如下代碼：48PImageimg1;//創(chuàng)建圖片變量voidsetup(){size(600,900);img1=loadImage("10.png");//加載圖像文件10.png}loadImage()函數(shù)是將圖像“10.png”加載到數(shù)據(jù)類型為PImage的img1變量中?！?0.png”圖像必須位于當(dāng)前的“data”文件夾目錄中才能成功加載?！菊f明】任務(wù)二實(shí)現(xiàn)步驟3：“img1”圖片變量的顯示。在“image0”程序文件的窗口編輯區(qū)繼續(xù)寫上如下代碼：49voiddraw(){background(0);image(img1,0,0);//顯示圖像}

步驟4：運(yùn)行“image0”程序文件，得到如圖所示的效果。任務(wù)二實(shí)現(xiàn)步驟5：顯示多張圖片變量生成完整的背景。在“image0”程序文件的窗口編輯區(qū)繼續(xù)寫上如下代碼：50步驟6：運(yùn)行“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類型的變量用于引用圖片。51PImageimg1；//創(chuàng)建圖片變量img1例如要創(chuàng)建圖片變量img1，那就是：將圖像加載到類型為PImage的變量中相關(guān)知識loadImage()函數(shù)語句結(jié)構(gòu)：loadImage(filename)loadImage(filename,extension)filename：要加載的文件的名稱。extension：要加載的圖像類型，例如“png”、“gif”、“jpg”。52

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

當(dāng)一張圖片從原始尺寸放大或縮小的時候，它有可能被拉伸扭曲，為避免這種情況，我們可以使用image()函數(shù)改變圖像的尺寸和位置。任務(wù)三描述任務(wù)三:生成動態(tài)戲曲臉譜圖像54通過任務(wù)二，我們就將戲曲臉譜的背景圖片顯示在指定的位置了。要制作動態(tài)戲曲臉譜圖像，首先需要提前準(zhǔn)備好多張臉譜圖像的素材，放在“data”文件夾內(nèi)；其次為了方便使用多張臉譜圖像，可以用本章案例一的數(shù)組的方式來管理實(shí)現(xiàn)。本次任務(wù)是使用數(shù)組生成動態(tài)戲曲臉譜圖像。任務(wù)三實(shí)現(xiàn)步驟1：修改“image0”文件，加載臉譜圖片，在代碼編寫區(qū)輸入所示代碼。55PImageimg1,img2,img3,img4;//創(chuàng)建變量PImage[]images;//先聲明一個images數(shù)組，數(shù)據(jù)類型是PImageintImageIndex=0;//圖片數(shù)組的下標(biāo)賦初值為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}56voiddraw(){//背景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[下標(biāo)]顯示圖片，下標(biāo)ImageIndex的初值為0ImageIndex=(ImageIndex+1)%images.length;//數(shù)組下標(biāo)除以images.length數(shù)組的長度取余數(shù)，讓數(shù)組的下標(biāo)只在0~7取值image(img2,0,100);image(img3,0,0);image(img4,0,100);}程序說明57（1）要做動態(tài)戲曲臉譜圖像，需要提前準(zhǔn)備好多張臉譜圖像素材，放在“data”文件夾內(nèi)。（2）為了更加方便管理多張臉譜圖像，可以用數(shù)組方式來處理。在程序中，通過“PImage[]images;”定義圖片型數(shù)組。（3）通過“image(images[ImageIndex],0,100);”代碼的數(shù)組下標(biāo)“ImageIndex”每次運(yùn)行增加1顯示不同下標(biāo)的數(shù)組變量來顯示不同的圖像，從而呈現(xiàn)動態(tài)臉譜圖片顯示的效果。（4）由于“images”數(shù)組下標(biāo)只能在0~7之間變換，否則會下標(biāo)溢出導(dǎo)致程序報(bào)錯，而通過“(ImageIndex+1)%images.length”即用數(shù)組下標(biāo)加1的值除以數(shù)組的長度取余數(shù)的方法，從而實(shí)現(xiàn)了“images”數(shù)組下標(biāo)在0~7之間變換。任務(wù)三實(shí)現(xiàn)單擊“運(yùn)行”按鈕，執(zhí)行代碼，效果如圖所示。58任務(wù)四描述任務(wù)四:創(chuàng)建中文字體和顯示中文文本59任務(wù)三實(shí)現(xiàn)后，可以看到“川劇變臉”動態(tài)效果已經(jīng)呈現(xiàn)出來，和最終的效果對比，還沒有顯示中文“川劇變臉”的說明，接下來添加中文文本來介紹“川劇變臉”。在Processing中不能直接顯示中文，需要先創(chuàng)建中文字體，然后將顯示文本使用的字體設(shè)置為已創(chuàng)建的中文字體，才能正確顯示中文。本次任務(wù)是創(chuàng)建中文字體和顯示中文文本。任務(wù)四實(shí)現(xiàn)步驟1：創(chuàng)建中文字體。修改“image0”文件，在代碼編寫區(qū)添加所示代碼。60PFontfont;//字體PFont設(shè)定font=createFont("SansSerif",16,true);//創(chuàng)建中文字體textFont(font);//將文本使用的字體設(shè)置為已創(chuàng)建的font字體【說明】漢字在Processing不能直接使用和顯示，需要先創(chuàng)建漢字字體，分為以下三步：第一步：“PFontfont;”，設(shè)置字體為中文。第二步：“font=createFont("SansSerif",16,true);”，使用“SansSerif”這個字體文件。第三步：“textFont(font);”，將使用的字體設(shè)置為“font”字體。任務(wù)四實(shí)現(xiàn)步驟2：顯示中文文本。修改“image0”文件，在代碼編寫區(qū)添加所示代碼。61textSize(25);//設(shè)置字體大小為25text("中國文化瑰寶",10,30);//在x坐標(biāo)為10，y坐標(biāo)為30處顯示“中國文化瑰寶”任務(wù)四實(shí)現(xiàn)步驟3：運(yùn)行代碼，結(jié)果如圖所示。62【說明】這樣我們就完整實(shí)現(xiàn)了“川劇變臉”案例的制作。在這里我們是用frameRate()函數(shù)來控制圖像切換的速度。有很多種方法可以控制序列幀動畫播放的速度，使用frameRate()函數(shù)是其中最為簡單的一種。如果想要序列圖像以自定義的速度切換的話，可以設(shè)置一個計(jì)數(shù)器，當(dāng)計(jì)時器的數(shù)值超過預(yù)定值時，新的一幀才會被播放。知識點(diǎn)總結(jié)loadImage()函數(shù)圖片數(shù)組平面圖片繪制PImage顯示中文文本63image()函數(shù)課后作業(yè)1.請同學(xué)們收集圖片素材，自行設(shè)計(jì)和實(shí)現(xiàn)一個圖片動態(tài)效果642.知識拓展：請同學(xué)們圖片加濾鏡和蒙版效果謝謝觀看深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室65第3章Processing綜合應(yīng)用深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室66深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室3.3鼠標(biāo)和鍵盤交互設(shè)計(jì)67深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室案例分析交互是學(xué)習(xí)Processing最核心的特點(diǎn)，使平常的代碼能夠帶來視覺和體驗(yàn)上的沖擊和樂趣，用戶交互是創(chuàng)造沉浸式體驗(yàn)的關(guān)鍵。代碼和平臺只是載體和實(shí)現(xiàn)藝術(shù)創(chuàng)想的手段，而核心依舊是藝術(shù)創(chuàng)想力、科技創(chuàng)造藝術(shù)，藝術(shù)融入科技。與Processing程序進(jìn)行互動，最直接也是最簡單的方法就是使用鼠標(biāo)和鍵盤，結(jié)合鼠標(biāo)和鍵盤，Processing可以完成多種交互設(shè)計(jì)。本節(jié)將帶領(lǐng)你學(xué)習(xí)鼠標(biāo)移動縮放圖片和鍵盤交互上下左右鍵移動圖形，并制作如圖“蝶戀花”、“孔明燈”等作品。68實(shí)訓(xùn)目的（1）掌握鼠標(biāo)交互的鼠標(biāo)移動縮放圖片（2）掌握鼠標(biāo)交互的鼠標(biāo)按鍵實(shí)現(xiàn)圖形切換（3）掌握鍵盤交互的讀取鍵盤按鍵（4）掌握鍵盤交互的上下左右鍵移動圖形（5）熟悉鼠標(biāo)交互系統(tǒng)變量及鼠標(biāo)事件函數(shù)（6）熟悉鍵盤交互系統(tǒng)變量及鍵盤事件函數(shù)69教學(xué)重點(diǎn)（1）鼠標(biāo)交互的鼠標(biāo)移動縮放圖片（2）鼠標(biāo)交互的鼠標(biāo)按鍵實(shí)現(xiàn)圖形切換（3）鍵盤交互的讀取鍵盤按鍵（4）鍵盤交互的上下左右鍵移動圖形70教學(xué)難點(diǎn)（1）圖片文件的旋轉(zhuǎn)制作（2）通過keyCode關(guān)鍵字讀取鍵盤功能鍵71目錄CONTENTS1.鼠標(biāo)交互的鼠標(biāo)移動縮放圖片2.鼠標(biāo)交互的鼠標(biāo)按鍵實(shí)現(xiàn)圖形切換3.鍵盤交互的讀取鍵盤按鍵724.鍵盤交互的上下左右鍵移動圖形深圳職業(yè)技術(shù)學(xué)院計(jì)算機(jī)與網(wǎng)絡(luò)基礎(chǔ)教研室73下面我們開始任務(wù)的學(xué)習(xí)任務(wù)一描述任務(wù)一：鼠標(biāo)交互的鼠標(biāo)移動縮放圖片在使用網(wǎng)站、軟件、消費(fèi)產(chǎn)品、各種服務(wù)的時候，使用過程中的感覺就是一種交互體驗(yàn)。隨著網(wǎng)絡(luò)和新技術(shù)的發(fā)展，各種新產(chǎn)品和交互方式越來越多，人們也越來越重視對交互的體驗(yàn)。Processing結(jié)合鼠標(biāo)，可以完成多種豐富的用戶互動。本次任務(wù)是通過改變鼠標(biāo)所在的水平坐標(biāo)mouseX、鼠標(biāo)所在的垂直坐標(biāo)mouseY、先前幀的水平坐標(biāo)pmouseX、先前幀的垂直坐標(biāo)pmouseY值的大小實(shí)現(xiàn)鼠標(biāo)移動縮放圖片。74案例引言1、坐標(biāo)轉(zhuǎn)移前面講解了圖形的基本運(yùn)動，主要是通過改變圖形的坐標(biāo)參數(shù)來實(shí)現(xiàn)運(yùn)動的。而這里所說的“坐標(biāo)轉(zhuǎn)移”是通過改變坐標(biāo)原點(diǎn)的位置來實(shí)現(xiàn)圖形運(yùn)動的。translate(x,y)函數(shù)用于轉(zhuǎn)換坐標(biāo)原點(diǎn)，其中的x、y決定了坐標(biāo)原點(diǎn)的位置。

75案例引言

例1：未轉(zhuǎn)移坐標(biāo)（左圖1所示）:size(300,300);rect(100,100,100,100)；例2：size(300,300);translate(100,100);rect(100,100,100,100);76案例引言

例3：voidsetup(){size(800,800);}voiddraw(){translate(100,100);rect(0,0,100,100);translate(200,100);rect(0,0,100,100);}77圖形之間不獨(dú)立案例引言

例3修改：voidsetup(){size(800,800);}voiddraw(){push();translate(100,100);rect(0,0,100,100);pop();push();translate(200,100);rect(0,0,100,100);pop();}78加上push()和pop（）圖形之間獨(dú)立案例引言

792.旋轉(zhuǎn)rotate(角度)需要注意的是，rotate()函數(shù)是以弧度來衡量角度的，即參數(shù)范圍為?？梢允褂胷adians()函數(shù)將角度轉(zhuǎn)換為弧度。rotate()函數(shù)以順時針方向轉(zhuǎn)動形狀，圖形圍繞原點(diǎn)旋轉(zhuǎn)。在默認(rèn)狀態(tài)下，原點(diǎn)位于左上角。案例引言

80旋轉(zhuǎn)舉例1：voidsetup(){size(300,300);}voiddraw(){rotate(radians(45));rect(0,0,150,150);}圖形圍繞原點(diǎn)旋轉(zhuǎn)案例引言

81旋轉(zhuǎn)舉例2：voidsetup(){size(300,300);}voiddraw(){translate(150,150);rotate(radians(45));rectMode(CENTER);rect(0,0,150,150);}圖形圍繞中心點(diǎn)轉(zhuǎn)案例引言

82旋轉(zhuǎn)舉例4：畫畫模式floatangle;voidsetup(){size(300,300);}voiddraw(){translate(150,150);rotate(radians(angle));rectMode(CENTER);rect(0,0,150,150);angle=angle+1;}案例引言

83旋轉(zhuǎn)舉例5：動畫模式floatangle;voidsetup(){size(300,300);}voiddraw(){background(128,128,128);translate(150,150);rotate(radians(angle));rectMode(CENTER);rect(0,0,150,150);angle=angle+1;}案例引言

843.圖形縮放scale();舉例：voidsetup(){size(600,800);}voiddraw(){scale(2);rect(0,0,100,100);}案例引言

85鼠標(biāo)坐標(biāo)變量mouseX變量指的是當(dāng)前鼠標(biāo)所在的水平坐標(biāo)。mouseY變量指的是當(dāng)前鼠標(biāo)所在的垂直坐標(biāo)。案例引言

86鼠標(biāo)坐標(biāo)變量舉例voidsetup(){size(640,480);}voiddraw(){background(255);strokeWeight(4);rect(60,60,mouseX,mouseY);}任務(wù)一實(shí)現(xiàn)步驟1：圖片變量的創(chuàng)建、字體PFont設(shè)定以及變量的初始化。選擇“文件”→“新建”命令，在代碼編寫區(qū)輸入所示代碼。87PImageflower,lan;//

創(chuàng)建圖片變量flower,lanintringAngle=0;//設(shè)定圖片旋轉(zhuǎn)角度初值PFontfont;//字體PFont設(shè)定floatscaleFactor=1;//設(shè)定圖片縮放比例初值floatscaleSpeed=0.01;//設(shè)定圖片縮放的速度值

任務(wù)一實(shí)現(xiàn)88步驟2：圖片文件的加載和創(chuàng)建中文字體。在代碼編寫區(qū)輸入所示代碼。voidsetup(){size(600,800);//加載圖像文件flower1.png,lan.pngflower=loadImage("flower1.png");lan=loadImage("lan.png");imageMode(CENTER);//圖片顯示模式為居中font=createFont("楷體",80);

textFont(font);任務(wù)一實(shí)現(xiàn)89步驟3：圖片文件的旋轉(zhuǎn)制作。在代碼編寫區(qū)繼續(xù)輸入所示代碼。voiddraw(){background(218,245,220);//旋轉(zhuǎn)圖片push();translate(width/2,height/2);//移動畫布rotate(radians(ringAngle));//旋轉(zhuǎn)圖片image(flower,0,0);pop();ringAngle+=1;程序說明90為了讓每次旋轉(zhuǎn)效果獨(dú)立而不互相影響，需用push函數(shù)和pop函數(shù)組合實(shí)現(xiàn)?！皉otate(radians(ringAngle))”代碼中rotate()是在旋轉(zhuǎn)角度，可以用radians()函數(shù)轉(zhuǎn)換角度數(shù)值，它從角度數(shù)值中獲得角度的信息，并把它轉(zhuǎn)變?yōu)橄鄳?yīng)的弧度數(shù)值。圖片在旋轉(zhuǎn)時，角度如果不發(fā)生變化，那么就不會呈現(xiàn)動態(tài)旋轉(zhuǎn)的效果。為了呈現(xiàn)動態(tài)旋轉(zhuǎn)的效果，需要改變角度的數(shù)值，代碼“ringAngle+=1”的作用就是在改變角度的數(shù)值，每運(yùn)行一次就在原來角度的基礎(chǔ)上增加1。Processing使用一個命名為“data”的文件夾來存儲圖片文件，當(dāng)移動程序位置或者輸出它們的時候，就不用去考慮這些文件的位置。任務(wù)一實(shí)現(xiàn)步驟4：圖片跟隨鼠標(biāo)移動制作。在代碼編寫區(qū)繼續(xù)輸入所示代碼。91image(lan,mouseX,mouseY,400*scaleFactor,400*scaleFactor);scaleFactor+=scaleSpeed;if(scaleFactor<0.6||scaleFactor>2.6){//圖片大小的變化

scaleSpeed*=-1;}//顯示文字fill(#5f479a);//紫羅蘭

text("蝶戀花",180,120);}程序說明92代碼“image(lan,mouseX,mouseY,400*scaleFactor,400*scaleFactor);”是顯示圖片“l(fā)an”,圖片“l(fā)an”的x坐標(biāo)是“mouseX”，“mouseX”指的是當(dāng)前鼠標(biāo)所在的水平坐標(biāo)，意味著圖片“l(fā)an”的x坐標(biāo)是當(dāng)前鼠標(biāo)所在的水平坐標(biāo)；圖片“l(fā)an”的y坐標(biāo)是“mouseY”,“mouseY”指的是當(dāng)前鼠標(biāo)所在的垂直坐標(biāo),意味著圖片“l(fā)an”的y坐標(biāo)是當(dāng)前鼠標(biāo)所在的垂直坐標(biāo)；圖片“l(fā)an”的寬度為“400*scaleFactor”，“scaleFactor”是設(shè)定圖片縮放比例值，初值為1；圖片“l(fā)an”的高度為“400*scaleFactor”。要能使的圖片進(jìn)行縮放，“scaleFactor”值需要改變，代碼“scaleFactor+=scaleSpeed”就在改變圖片縮放比例“scaleFactor”的值，代碼每運(yùn)行一次，“scaleFactor”的值就增加“scaleSpeed”，“scaleSpeed”的值為0.01。語句if(scaleFactor<0.6||scaleFactor>2.6){scaleSpeed*=-1;}的作用是對“scaleFactor”的值進(jìn)行判斷，當(dāng)“scaleFactor”的值小于0.6或者大于2.6時，“scaleSpeed”的值就變?yōu)?0.01。任務(wù)一實(shí)現(xiàn)步驟5：單擊運(yùn)行

按鈕，執(zhí)行代碼，可以看到鼠標(biāo)移動縮放圖片，效果如圖所示。93步驟6：選擇“文件”→“保存”命令，將文件取名為“mouse_1”。用戶使用鼠標(biāo)可以控制屏幕上光標(biāo)的位置并選擇界面元素，通過讀取光標(biāo)位置所獲取的值，可以控制程序界面上的各個元素。鼠標(biāo)交互的系統(tǒng)變量有鼠標(biāo)坐標(biāo)變量和鼠標(biāo)特殊坐標(biāo)變量。相關(guān)知識鼠標(biāo)交互系統(tǒng)變量1、鼠標(biāo)坐標(biāo)變量94mouseX變量：指的是當(dāng)前鼠標(biāo)所在的水平坐標(biāo)。mouseX的默認(rèn)值為0，Processing只能在指針位于當(dāng)前窗口上方時跟蹤鼠標(biāo)位置，在鼠標(biāo)移動到窗口之前，將返回0。mouseY變量：指的是當(dāng)前鼠標(biāo)所在的垂直坐標(biāo)。mouseY的默認(rèn)值為0，在鼠標(biāo)移動到窗口之前，將返回0。2、鼠標(biāo)特殊坐標(biāo)變量pmouseX變量：指的是先前幀的水平坐標(biāo)。pmouseY變量：指的是先前幀的垂直坐標(biāo)。在draw()函數(shù)中，pmouseX和pmouseY每幀更新一次，在鼠標(biāo)事件中，它們只會在事件被調(diào)用的時候更新。任務(wù)二描述任務(wù)二：鼠標(biāo)交互的鼠標(biāo)按鍵實(shí)現(xiàn)圖形切換在任務(wù)一中，是通過移動鼠標(biāo)改變鼠標(biāo)的水平坐標(biāo)、垂直坐標(biāo)以及先前幀的水平坐標(biāo)、先前幀的垂直坐標(biāo)的大小來實(shí)現(xiàn)鼠標(biāo)交互變化圖形，本次任務(wù)是通過鼠標(biāo)按鍵實(shí)現(xiàn)鼠標(biāo)交互圖形切換。95任務(wù)二實(shí)現(xiàn)步驟1：設(shè)置圖形畫布的大小和變量的初值。選擇“文件”→“新建”命令，在代碼編寫區(qū)輸入所示代碼。96intvalue;voidsetup(){size(640,480);value=0;}任務(wù)二實(shí)現(xiàn)步驟2：繪制黑色圓形和白色正方形。在代碼編寫區(qū)輸入所示代碼。97voiddraw(){fill(value);//通過value值來設(shè)定圖形填充顏色background(125);if(value==0){//如果value的值為0，就繪制圓ellipse(320,240,200,200);}else{//如果value的值不為0，就繪制矩形rectMode(CENTER);rect(320,240,200,200);}}任務(wù)二實(shí)現(xiàn)步驟3：在畫面中單擊鼠標(biāo)，完成黑色圓形和白色正方形之間的切換。在代碼編寫區(qū)輸入所示代碼。98voidmouseClicked(){//單擊鼠標(biāo)if(value==0){//如果value的值為0，就賦值value的值為255value=255;}else{如果value的值不為0，就賦值value的值為0value=0;}}任務(wù)二實(shí)現(xiàn)步驟4：單擊運(yùn)行按鈕，執(zhí)行代碼，效果如圖3-39所示。99步驟5：選擇“文件”→“保存”命令，將文件取名為“mouse_2”。Processing同樣提供了可以實(shí)現(xiàn)鼠標(biāo)手勢動作的事件函數(shù)，包括mousePressed()事件函數(shù)、mouseClicked()事件函數(shù)、mouseMoved()事件函數(shù)、mouseReleased()事件函數(shù)、mouseDragged()事件函數(shù)和mouseWheel()事件函數(shù)。相關(guān)知識鼠標(biāo)交互事件函數(shù)100mouseClicked()事件函數(shù)mouseClicked()事件函數(shù)是在鼠標(biāo)被按下然后松開的那一瞬間被調(diào)用的，它的格式為：voidmouseClicked(){//當(dāng)在鼠標(biāo)按下并釋放后要執(zhí)行的代碼}任務(wù)三描述任務(wù)三:鍵盤交互的讀取鍵盤按鍵101鍵盤交互也是常用的互動形式。鍵盤互動判斷按鍵是否按下是通過“keyPressed”關(guān)鍵字來實(shí)現(xiàn)的，當(dāng)在鍵盤上按下任意鍵的時候，該關(guān)鍵字會返回真值，否則會返回假值。“key”是系統(tǒng)變量，它指的是鍵盤上最近被使用的鍵。本次任務(wù)是通過“keyPressed”關(guān)鍵字和“key”關(guān)鍵字讀取鍵盤按鍵。任務(wù)三實(shí)現(xiàn)步驟1：選擇“文件”→“新建”命令，在代碼編寫區(qū)輸入所示代碼，運(yùn)行效果如圖所示。102voidsetup(){}voiddraw(){if(keyPressed){//是否按鍵if(key==97){//是否ASCII值為97textSize(48);textAlign(CENTER);

//居中顯示

text(str(key),0,0,80,80);

//顯示鍵盤按鍵的字母

println(key);}}}步驟2：選擇“文件”→“保存”命令，將文件取名為“key_1”。程序說明103key關(guān)鍵字的作用是讀取所按的鍵盤按鍵，簡單來說，當(dāng)按下鍵盤上的小寫字母a的時候，它其實(shí)是讀取a字母的ASCII碼，即97，也就是說當(dāng)按下a的時候，是傳輸了97給計(jì)算機(jī)，通過ASCII碼的比對，再將字母返回。因?yàn)樾懽帜竌的ASCII值為97，所以在本例中，只有按倒a字母的時候，才能夠正常打印輸出。但是key關(guān)鍵字只能夠讀取到非功能鍵，如果想控制的按鍵里有Shift、Ctrl、Alt以及光標(biāo)的“上下左右”鍵的時候，key關(guān)鍵字就顯得捉襟見肘了。keyCode關(guān)鍵字是專門來用作讀取功能鍵信息的。鍵盤交互也是常用的互動形式。鍵盤用于輸入字符，完成各種信息輸入或者使用方向鍵控制等。鍵盤交互系統(tǒng)變量有key系統(tǒng)變量、keyPressed系統(tǒng)變量、keyCode系統(tǒng)變量。相關(guān)知識鍵盤交互系統(tǒng)變量104(1)key系統(tǒng)變量key系統(tǒng)變量指的是鍵盤上最近被使用的鍵（無論是按下或者松開）。Key得到的是按鍵上代表的字符的ASCII碼。相關(guān)知識105【例1】key系統(tǒng)變量使用示例voidsetup(){size(300,300);smooth();}voiddraw(){background(200);if(key=='a'||key=='A'){//如果按下a鍵或者A鍵，就畫橢圓fill(190,100,0);ellipse(150,150,200,180);}elseif(key=='b'){//如果按下b鍵，就畫矩形rect(50,50,200,200);}}相關(guān)知識106(2)keyPressed系統(tǒng)變量keyPressed是一個布爾型系統(tǒng)變量。如果keyPressed的值是true，表示有鍵盤按鍵被按下；如果是false，表示沒有鍵盤按鍵被按下。【例2】keyPressed使用示例voidsetup(){size(300,300);smooth();}voiddraw(){background(200);//如果按下一個鍵,就畫橢圓

if(keyPressed){fill(190,100,0);ellipse(150,150,200,180);

}}相關(guān)知識107(3)keyCode系統(tǒng)變量keyCode是系統(tǒng)變量，它用于檢測鍵盤上的特殊功能鍵，包括ALT、CONTROL、SHIFT、方向鍵（UP、DOWN、LEFT、RIGHT）?！纠?】keyCode的方向鍵使用示例//使用鍵盤的上、下、左、右鍵控制矩形的上、下、左、右移動。intx=160;inty=160;voidsetup(){size(360,360);smooth();}voiddraw(){background(180);if(keyPressed&&(key==CODED)){if(keyCode==LEFT){x--;}elseif(keyCode==RIGHT){x++;}elseif(keyCode==UP){y--;}elseif(keyCode==DOWN){y++;}}rect(x,y,50,50);}任務(wù)三實(shí)現(xiàn)步驟3：通過keyCode關(guān)鍵字讀取鍵盤功能鍵，在代碼編寫區(qū)修改代碼如下所示，運(yùn)行結(jié)果如圖。108步驟4：選擇“文件”→“另存為…”命令，將文件取名為“key_2”。voidsetup(){}voiddraw(){if(keyPressed){//是否按鍵if(key==CODED){//是否功能鍵if(keyCode==ALT){textSize(48);textAlign(CENTER);//居中顯示text(str(keyCode),0,0,80,80);//顯示鍵盤按鍵的數(shù)字println(keyCode);}}}}程序說明109這里運(yùn)用了三個if語句嵌套，首先判斷鍵盤按鍵是否按下，再判斷按下的按鍵是否為功能鍵，最后再判斷按下的功能鍵是否為Alt鍵。當(dāng)按下Alt鍵時候，畫布上出現(xiàn)了18，這正是Alt鍵所對應(yīng)的ASCII碼。任務(wù)四描述任務(wù)四:鍵盤交互的上下左右鍵移動圖形110Processing同樣也提供了鍵盤控制的事件函數(shù)：keyPressed()事件函數(shù)、keyReleased()事件函數(shù)和keyTyped()事件函數(shù)。本次任務(wù)是通過keyPressed()事件函數(shù)實(shí)現(xiàn)圖形孔明燈上下左右移動。任務(wù)四實(shí)現(xiàn)步驟1：設(shè)置圖形畫布的大小和控制圖形“孔明燈”變化的變量的初值。