第3章Processing綜合應(yīng)用深圳職業(yè)技術(shù)學(xué)院計算機與網(wǎng)絡(luò)基礎(chǔ)教研室1深圳職業(yè)技術(shù)學(xué)院計算機與網(wǎng)絡(luò)基礎(chǔ)教研室3.3鼠標和鍵盤交互設(shè)計2深圳職業(yè)技術(shù)學(xué)院計算機與網(wǎng)絡(luò)基礎(chǔ)教研室案例分析交互是學(xué)習(xí)Processing最核心的特點，使平常的代碼能夠帶來視覺和體驗上的沖擊和樂趣，用戶交互是創(chuàng)造沉浸式體驗的關(guān)鍵。代碼和平臺只是載體和實現(xiàn)藝術(shù)創(chuàng)想的手段，而核心依舊是藝術(shù)創(chuàng)想力、科技創(chuàng)造藝術(shù)，藝術(shù)融入科技。與Processing程序進行互動，最直接也是最簡單的方法就是使用鼠標和鍵盤，結(jié)合鼠標和鍵盤，Processing可以完成多種交互設(shè)計。本節(jié)將帶領(lǐng)你學(xué)習(xí)鼠標移動縮放圖片和鍵盤交互上下左右鍵移動圖形，并制作如圖“蝶戀花”、“孔明燈”等作品。3實訓(xùn)目的（1）掌握鼠標交互的鼠標移動縮放圖片（2）掌握鼠標交互的鼠標按鍵實現(xiàn)圖形切換（3）掌握鍵盤交互的讀取鍵盤按鍵（4）掌握鍵盤交互的上下左右鍵移動圖形（5）熟悉鼠標交互系統(tǒng)變量及鼠標事件函數(shù)（6）熟悉鍵盤交互系統(tǒng)變量及鍵盤事件函數(shù)4教學(xué)重點（1）鼠標交互的鼠標移動縮放圖片（2）鼠標交互的鼠標按鍵實現(xiàn)圖形切換（3）鍵盤交互的讀取鍵盤按鍵（4）鍵盤交互的上下左右鍵移動圖形5教學(xué)難點（1）圖片文件的旋轉(zhuǎn)制作（2）通過keyCode關(guān)鍵字讀取鍵盤功能鍵6目錄CONTENTS1.鼠標交互的鼠標移動縮放圖片2.鼠標交互的鼠標按鍵實現(xiàn)圖形切換3.鍵盤交互的讀取鍵盤按鍵74.鍵盤交互的上下左右鍵移動圖形深圳職業(yè)技術(shù)學(xué)院計算機與網(wǎng)絡(luò)基礎(chǔ)教研室8下面我們開始任務(wù)的學(xué)習(xí)任務(wù)一描述任務(wù)一：鼠標交互的鼠標移動縮放圖片在使用網(wǎng)站、軟件、消費產(chǎn)品、各種服務(wù)的時候，使用過程中的感覺就是一種交互體驗。隨著網(wǎng)絡(luò)和新技術(shù)的發(fā)展，各種新產(chǎn)品和交互方式越來越多，人們也越來越重視對交互的體驗。Processing結(jié)合鼠標，可以完成多種豐富的用戶互動。本次任務(wù)是通過改變鼠標所在的水平坐標mouseX、鼠標所在的垂直坐標mouseY、先前幀的水平坐標pmouseX、先前幀的垂直坐標pmouseY值的大小實現(xiàn)鼠標移動縮放圖片。9案例引言1、坐標轉(zhuǎn)移前面講解了圖形的基本運動，主要是通過改變圖形的坐標參數(shù)來實現(xiàn)運動的。而這里所說的“坐標轉(zhuǎn)移”是通過改變坐標原點的位置來實現(xiàn)圖形運動的。translate(x,y)函數(shù)用于轉(zhuǎn)換坐標原點，其中的x、y決定了坐標原點的位置。

10案例引言

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

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

例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();}13加上push()和pop（）圖形之間獨立案例引言

142.旋轉(zhuǎn)rotate(角度)需要注意的是，rotate()函數(shù)是以弧度來衡量角度的，即參數(shù)范圍為。可以使用radians()函數(shù)將角度轉(zhuǎn)換為弧度。rotate()函數(shù)以順時針方向轉(zhuǎn)動形狀，圖形圍繞原點旋轉(zhuǎn)。在默認狀態(tài)下，原點位于左上角。案例引言

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

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

17旋轉(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;}案例引言

18旋轉(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;}案例引言

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

20鼠標坐標變量mouseX變量指的是當前鼠標所在的水平坐標。mouseY變量指的是當前鼠標所在的垂直坐標。案例引言

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

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

任務(wù)一實現(xiàn)23步驟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ù)一實現(xiàn)24步驟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;程序說明25為了讓每次旋轉(zhuǎn)效果獨立而不互相影響，需用push函數(shù)和pop函數(shù)組合實現(xiàn)。“rotate(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ù)值，每運行一次就在原來角度的基礎(chǔ)上增加1。Processing使用一個命名為“data”的文件夾來存儲圖片文件，當移動程序位置或者輸出它們的時候，就不用去考慮這些文件的位置。任務(wù)一實現(xiàn)步驟4：圖片跟隨鼠標移動制作。在代碼編寫區(qū)繼續(xù)輸入所示代碼。26image(lan,mouseX,mouseY,400*scaleFactor,400*scaleFactor);scaleFactor+=scaleSpeed;if(scaleFactor<0.6||scaleFactor>2.6){//圖片大小的變化

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

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

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

//居中顯示

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

//顯示鍵盤按鍵的字母

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

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

}}相關(guān)知識42(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ù)三實現(xiàn)步驟3：通過keyCode關(guān)鍵字讀取鍵盤功能鍵，在代碼編寫區(qū)修改代碼如下所示，運行結(jié)果如圖。43步驟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);}}}}程序說明44這里運用了三個if語句嵌套，首先判斷鍵盤按鍵是否按下，再判斷按下的按鍵是否為功能鍵，最后再判斷按下的功能鍵是否為Alt鍵。當按下Alt鍵時候，畫布上出現(xiàn)了18，這正是Alt鍵所對應(yīng)的ASCII碼。任務(wù)四描述任務(wù)四:鍵盤交互的上下左右鍵移動圖形45Processing同樣也提供了鍵盤控制的事件函數(shù)：keyPressed()事件函數(shù)、keyReleased()事件函數(shù)和keyTyped()事件函數(shù)。本次任務(wù)是通過keyPressed()事件函數(shù)實現(xiàn)圖形孔明燈上下左右移動。任務(wù)四實現(xiàn)步驟1：設(shè)置圖形畫布的大小和控制圖形“孔明燈”變化的變量的初值。選擇“文件”→“新建”命令，在代碼編寫區(qū)輸入所示代碼。46floatlanternX=600;//孔明燈的初始x坐標floatlanternY=700;//孔明燈的初始y坐標floatlanternSpeed=-10;//孔明燈上升的速度voidsetup(){size(800,900);}任務(wù)四實現(xiàn)步驟2：繪制圖形孔明燈。在代碼編寫區(qū)繼續(xù)輸入所示代碼。47voiddraw(){background(#F56060);//繪制孔明燈push();fill(#FCFC03);rect(lanternX,lanternY,100,100);//繪制孔明燈fill(#FC0317);arc(lanternX+50,lanternY+100,60,30,0,PI);arc(lanternX+50,lanternY,60,30,PI,TWO_PI);line(lanternX+50,lanternY+115,lanternX+50,lanternY+150);rect(lanternX+35,lanternY+135,30,50);pop();}任務(wù)四實現(xiàn)步驟3：keyPressed()事件函數(shù)控制圖形孔明燈上下左右移動。在代碼編寫區(qū)繼續(xù)輸入所示代碼。48voidkeyPressed(){if(key==CODED){//是否功能鍵if(keyCode==UP){//是否向上鍵lanternY+=lanternSpeed;

}if(keyCode==DOWN){//是否向下鍵lanternY-=lanternSpeed;}if(keyCode==LEFT){//是否向左鍵lanternX+=lanternSpeed;

}if(keyCode==RIGHT){//是否向右鍵lanternX-=lanternSpeed;}}}任務(wù)四實現(xiàn)步驟4：keyPressed()事件函數(shù)控制圖形孔明燈上下左右移動。在代碼編寫區(qū)繼續(xù)輸入所示代碼。運行代碼，如圖所示。49voidkeyPressed(){if(key==CODED){//是否功能鍵if(keyCode==UP){//是否向上鍵lanternY+=lanternSpeed;

}if(keyCode==DOWN){//是否向下鍵lanternY-=lanternSpeed;}if(keyCode==LEFT){//是否向左鍵lanternX+=lanternSpeed;