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

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

（3）循環(huán)體語句“println("第"+(i+1)+"位同學的成績是："+score[i]);”是先輸出“第”字，“+”運算符是用來連接字符串的，接下來同行輸出“i+1”的值，然后再同行原樣輸出“位同學的成績是：”，最后再輸出“score[i]”的值。只要條件表達式“i<score.length”成立，循環(huán)體語句就會重復執(zhí)行，當條件表達式不成立時，退出循環(huán)。程序中，理解的難點是for循環(huán)語句：任務(wù)三描述任務(wù)三:數(shù)組數(shù)據(jù)圖形顯示24完成任務(wù)二后，我們就實現(xiàn)了score數(shù)組的聲明、創(chuàng)建、賦值、排序與輸出。好的數(shù)據(jù)展示，往往會讓數(shù)據(jù)分析結(jié)果更為直觀、生動和更具說服力，為此經(jīng)常會用線形圖、柱狀圖、餅圖、氣泡圖和直方圖等進行顯示。在這里如果希望把每個同學的成績也用直方圖顯示，那么該如何實現(xiàn)呢？本次任務(wù)，使用rect()繪制矩形函數(shù)繪制直方圖。任務(wù)三實現(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，代表的是畫矩形的起始點的x坐標為0；縱坐標為i*10，當i的值分別為0，1，2…5時，矩形的起始點的y坐標分別為0，10，20…50；score[i]代表的是矩形的寬度，當i的值分別為0，1，2…5時，score[i]的值分別為65，75，88…86；8為矩形的高度，即所有矩形的高度都是8。思考：27如果是畫縱向直方圖，且每個矩形之間有些距離，并能在矩形的正上方顯示這個矩形長度代表的數(shù)，如圖所示：又該如何編碼實現(xiàn)呢？任務(wù)三實現(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坐標，當i的值分別為0，1，2…5時，矩形的起始點的x坐標分別為60