The Junior Woodchuck Manuel of Processing Programming for Android Devices

Transcription

1 Page1of15 TheJuniorWoodchuck Manuel of ProcessingProgramming for AndroidDevices TheImage JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

2 Page2of15 Chapter6 AlmostHome... TheImage First,ACodeCleanup(andreview) InChapter3weintroducedfunctionsthatwewriteandweuse.The functionwewrotewasnamedfigure()anditdrewthis: JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

3 Page3of15 Onereasonwewrotethefigure()functionwassowecouldreuseitto drawasmanyfiguresaswewantedtowithouthavingtocopyandpast thefigurecodeoverandoveragain.writingthefigure()functionletus drawthisimage: andkeepourdraw()functionverysimpleandshort: voiddraw() //BigFigure drawfigure(); //Preparationforsmallfigures w=80; h=80; y=580; //SmallFigure fartherestleft x=50; drawfigure(); //SmallFiguresecondfromleft x=180; drawfigure(); //SmallFigurethirdfromleft x=310; drawfigure(); //SmallFigurefourthfromleft x=440; drawfigure(); JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

4 Page4of15 Wefollowedthisideainthecodewewrotelasttimetheclassmetwhen wewrotethiscode: //Wrap And Bounce //Day 3 App Lab //QVHS and MHS float x, y, deltax; float px, py, deltapy; PImage p; void setup( ) size( 400, 400 ); imagemode( CENTER ); nostroke( ); p = loadimage( "Jim.jpg"); x = 0; y = height/2; px = width/2; py = 0; deltax = 3; deltapy = 4; void draw( ) preparescreen( ); drawbouncingfigure( ); drawwrappingfigure( ); void drawwrappingfigure( ) fill( 0, 0, 200 ); ellipse( px, py, 40, 40 ); image ( p, px, py, 30, 30 ); void changebouncingfigure( ) x = x + deltax; if( x > width ) // too far right //x = 0; //deltax = deltax + 2; deltax = -deltax; if ( x < 0 ) // too far left deltax = -deltax; void changewrappingfigure( ) py = py + deltapy; if ( py > height + 40 ) py = -40; changebouncingfigure( ); changewrappingfigure( ); void preparescreen( ) fill( 200, 200, 0, 30 ); rect(0, 0, width, height); void drawbouncingfigure( ) fill( 200, 0, 0 ); ellipse( x, y, 33, 22 ); JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

5 Page5of15 Thiscodedrawsthefollowing: Thisishowwewriteanduserourownfunctions.Thecodeinthedraw() functionshownbelowtellsprocessingexactlywhattodo.however,these functionsarenotdefinedinprocessing sapisowehavetowritethecode thatdefines(tellsprocessinghowtodo)thebehaviorrequested. void draw( ) preparescreen( ); drawbouncingfigure( ); drawwrappingfigure( ); changebouncingfigure( ); changewrappingfigure( ); Herearethedefinitionsfortwoofthesefunctions: void drawwrappingfigure( ) fill( 0, 0, 200 ); ellipse( px, py, 40, 40 ); image ( p, px, py, 30, 30 ); void changebouncingfigure( ) x = x + deltax; if( x > width ) // too far right //x = 0; //deltax = deltax + 2; deltax = -deltax; if ( x < 0 ) // too far left deltax = -deltax; Thesyntaxthatisrequiredisshowninblue.Thecodeinblackisuptous. Inourcodetheparenthesesareempty.Ifyoutakea real programming course,youwilllearnhowandwhentoputstuffintotheparentheses. Wedonothavetimetostudythatpartofprogramming. JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

6 Page6of15 Comparetheotherfunctiondefinitionsonpage4tothesetwodefinitions toseehowtheyarethesameandhowtheyaredifferent. Whydowedothis?Thereareseveralreasons.Oneisthatitmakesthe codewewanttowritemucheasiertoworkwith,debug,modify,and explaintoothers. Anotherthingthatwedidlasttime.Wehaveusedsomevariablesinthe codethatweown. Herearethevariables: float x, y, deltax; float px, py, deltapy; PImage p; Hereishowweinitializetheminoursetup()function: void setup( ) size( 400, 400 ); imagemode( CENTER ); nostroke( ); p = loadimage( "Jim.jpg"); x = 0; y = height/2; px = width/2; py = 0; deltax = 3; deltapy = 4; ThefunctioncallslikeimageMode(CENTER)and loadimage( Jim.jpg )areexplainedintheapi.lookthemupif youarenotsurewhattheyaredoing. Youcanlookattheotherfunctiondefinitionstoseehowweusedthese variables. JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

7 Page7of15 Whydowedothis?Youjustreadthisabovebuthereitisagain: Itmakesthecodewewanttowritemucheasiertoworkwith,debug, modify,andexplaintoothers.italsoletsourprogramchangesit behaviorasitisrunning. WealsousedsomevariablesownedbyProcessing.Twoofthese many more arewidthandheight.thesevariablesareinitially100and100.but whenweusethesize( )function,theyhavedifferentvalues.processing s variablewidthusesthefirstargumentasitsvalueanditsvariableheight usesthesecondargumentforitsvalue.youcanseehowweusedthese variablesinthecodebelow: //Wrap And Bounce //Day 3 App Lab //QVHS and MHS float x, y, deltax; float px, py, deltapy; PImage p; void setup( ) size( 400, 400 ); imagemode( CENTER ); nostroke( ); p = loadimage( "Jim.jpg"); x = 0; y = height/2; px = width/2; py = 0; deltax = 3; deltapy = 4; void drawbouncingfigure( ) fill( 200, 0, 0 ); ellipse( x, y, 33, 22 ); void drawwrappingfigure( ) fill( 0, 0, 200 ); ellipse( px, py, 40, 40 ); image ( p, px, py, 30, 30 ); void changebouncingfigure( ) x = x + deltax; if( x > width ) // too far right //x = 0; //deltax = deltax + 2; void draw( ) preparescreen( ); drawbouncingfigure( ); drawwrappingfigure( ); changebouncingfigure( ); changewrappingfigure( ); void preparescreen( ) fill( 200, 200, 0, 30 ); rect(0, 0, width, height); deltax = -deltax; if ( x < 0 ) // too far left deltax = -deltax; void changewrappingfigure( ) py = py + deltapy; if ( py > height + 40 ) py = -40; JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

8 Page8of15 IfweuseProcessing svariableslikethis,thenifwechangethesizeofthe window,wedonothavetochangeanythingelseinourcode. Wehavejustspent10pagesblatheringaboutsomethingthat programmerscall style. Youdonothavetowritefunctions.Youcanputallofyourcodeinsetup( )anddraw( ). Youdonothavetousevariables.Youcanusenumberseverywhere. Thisdecisioninthisclassisyours. BUTifyouwanttobeabletoquicklyfinemistakes,orquicklymodifyyour program,orreusetodosomethingrelatedbutdifferent,orexplainitto someoneelse,thisstylewillmakeyoulifeasaprogrammermucheasier. Andotherprogrammersthatmightlookatyourcodewillhavemuch greaterrespectforyourwork. Now..ontosomereallynewstuff... JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

9 Page9of15 SomeReallyNewStuff Wehavewrittencodethatwrapsamovingfigureandcodethatbounces amovingfigure.let stakethecodethatwrapsamovingfigureandadd usercontroltothemovement. Thewaywealterthespeedanddirectionoftherectistoalterthevalues ofthevariablesdeltaxfortheellipseanddeltapyforthepicture.itis possibletodothiswhiletheprogramisrunning.wesawthatlasttime. Sincewecandothat,wecanputinsomecodethatwilllettheuser drive theimageonthescreen. Thisquestionbringsustoanewkindoffunction.Let sreview wehave seenthreekindsoffunctions: Processingwritesthemandweusedthem:rect(),fill(),... WewritethemandProcessingusesthem:setup(),draw(). Wewritethemandweusethem:figure(),moveRectFigure(),... Letusintroduceyoutoafourthkindoffigure: WewriteitandProcessingwilluseitwhenthe userdoes something. Anytimea userdoessomething withortothecomputer,itiscalledan event.thetypicaleventshappenwhentheuserpressesakeyormoves themouse.therearemanydifferentevents.wearegoingtouseone thatworkswiththecomputer,intheandroidemulator,andyourandroid device. Theeventwearegoingtousehappenswhentheuserdragsthemouse (draggingmeansthatthemousebuttonisdown)ormovestheirfingeron theandroidscreen.hereishowwedoit. Ifwewriteafunctionnamed mousedragged( ) JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

10 Page10of15 thenwhenevertheuser: pressesthemousebuttonandmovesthemouseonthecomputer, pressesthemousebuttonandmovesthemouseintheemulator,or putsandmovestheirfingerontheandroiddevicescreen Processingwillusethisfunction. Itmustbenamedexactlyasshowandtheparenthesesmustbeempty. Insidethebraceswecandoanythingthatwewanttodo. Whatwewanttodoischangethespeedofthemovementoftherect. Question, Howdowedothat? JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

11 Page11of15 Hereisonewaywemightsolvethis: user moves mouse right horizontal speed increases user moves mouse left horizontal speed decreases Thismightwork.Youmayhaveabetterideabutyourteacheriswriting thissoitwillhavetodo sigh AnotherQuestion Howdoweknowwhichwaythemouseismoving? Whenwehaveaproblemlikethisandwearenotsurehowtodoitorwe haveneversolvedaproblemlikethis,agoodwaytostartistolistallof thedatawehave(variables)andseewhatmightbehelpful. Let ssee wehaveourvariablesinthecode: float x, y, deltax; float px, py, deltapy; PImage p; Whichvariableorvariablesdoweneedtochangesowecanspeedup andslowdownthepicture(nottheellipse)?thinkaboutit. JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

12 Page12of15 Didyoureallythinkaboutit? deltapy Thisisthevariablethatcontrolsthespeedofthepicture.Ifwechangeit, wechangethespeedofthepicture. NowwhichProcessingvariablescanweusetohelpusalterourvariables? width, height, mousex, mousey Again,thinkaboutit. Weareworkingwiththeverticalmovementonly youwillworkonthe horizontalmovementduringthenextweek. Itseemsreasonabletochecktheverticalmovementofthemouse.So,we willusemousey. Butweonlyknowwherethemouseisnow(mouseX and mousey).inorder toknowwhichwaytheusermovedit,weneedtoknowwhereitwas.if weknowwhereitwas,wecancomparewhereitwastowhereitisand figureoutwhichwayitismoving. Well,wherewasit? ItturnsoutthatProcessing remembers wherethemousewasinthe previousframe.processingstoresthatinformationintwoothervariables thatwecanuse: pmousex and pmousey which stands for Previous Mouse X and Previous Mouse Y. We know you are probably thinking, Is there anything Processing does not know? Great,nowathirdquestion Howdoweusethesevariables? Weareworkingwiththeverticalmovement.Theverticalmovements shouldbeverysimilar. JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

13 Page13of15 Iftheuserismovingthemousedownthentheycoordinateofthemouse wouldbegettinglargerfromthepastframetothecurrentframe.thetop edgeispositionzeroandthebottomedgeispositionheightorinthis code,400 void setup( ) size( 400, 800 );... sowhentheuserismovingthemousetothedown,mouseywillget bigger.weneedtoaskthequestion, IsthevalueofmouseYisgetting bigger? RememberthatthewayweaskquestionsinProcessingistousetheif( ) sowecandothatwithsomecodelikethis: if ( mousey > pmousey) ThissaysinEnglish Ifthevalueofthevariable,mouseYisbiggerthanthe valueofthevariable,pmousey whichiswhatwewanttoknow. Iftheansweristrue,thenwewanttoincreasethevalueofthevariable deltapy Howmuchweincreaseitisupeachofus.Wecanincreaseitbyasmall amountlike0.1orbyalargeramountlike1,orbyahugeamountlike10. Wehavetotrydifferentvaluesandseewhatwelike.Ideallythisvalue willbeavariablesowecanfindandchangeiteasilyaswetinkerand tuneourcode.let sassumewehaveavariablenamedchangeamountand itissettoasmallvaluelike0.1. Ifwedo,wecanwritethecodelikethis: if ( mousey > pmousey) deltapy = deltapy + changeamount; JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

14 Page14of15 ThenewmouseDragged( )wouldlooklikethis: void mousedragged ( ) if ( mousey > pmousey) deltapy = deltapy + changeamount; Ifthemovementupward,wecansubtractchangeAmount fromdeltapy. Thissamepatterncanbeusedforthehorizontalmovementofthemouse. Rememberthatyouneedtoaddhorizontalmovement.Youwillneeda deltapxvariableandyouwillneedaddcodetothe changewrappingfigure( ) functiontocreatehorizontalmovement.weleavethemforyoutowrite. Onthenextpageisyourteacher sversionofthiscode.hehasleftalong traceonthewindowsoyoucanseehowthemovementworks. JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA

15 Page15of15 IntheNextExcitingChapter Wearegoingtotrytoputthiscodetogetherwiththefunctionsthat bouncethecircleofftheedgesofthewindowandusetheresultingcode forthebasisforagame.youwilltrytodrivetherectaroundthescreen andcollidewiththebouncingcircle.ifyoudocollide,youwill dramatize thecollisionandincreaseyourscore.youwilldisplayyour scoreonthescreenand,possiblyhowlongyouhavebeenplayingthe game. Wewillhavetofigureouthowtodetectthecollisionandhowtodisplay textandtimethegame.wecandothat! So,gobackoverthisandthepreviouschaptersandtrytounderstandthe code.ifyoudonot,writeyourquestionsdownandbringthemtoclass. ifyouhavetime,lookupthedistance(),text(),andmillis()functionsin theapi. Goodprogramming... JuniorWoodchuckManuelforProcessingProgramming Version1 CopyrightDavidNassarandJimRoberts,December2011,PittsburghPA