comparing objects and changing color · comparing objects and changing color this is an...
TRANSCRIPT
![Page 1: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/1.jpg)
Comparingobjectsandchangingcolor
ThisisanmodificationoftheJuly2009/June2015changingcolor
tutorialbySusanRodger,ErinTaylor,andDavidYan
ByNatalieHuffmanUnderthedirectionofSusanRodger
DukeUniversityJune2017
Functions,parameters,properties,andrandom
numbers
Whatisafunction?
• Afunctionisasubsetofcodethatcanacceptinputs(calledparameters)andreturnoutputs
• Functionshelpsimplifycode• Examplesofbuilt-infunctionsaregetHeightandgetDistanceTo
• Inthistutorial,wewillwriteourownfunctions
![Page 2: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/2.jpg)
Parts
• Part1:createfunctionthatcomparestwoobjectsandreturnstheshorter
• Part2:createaseagullfunctionthatchangesthecoloroftheseagullwhenitisclickedon
• Part3:createasnowmanfunctionthatturnsthesnowmanarandomcolorwhenitisclickedon
• Part4:createafunctionthatreturnsthecolorofthesnowman,asastring
PART1
• CreateanAliceworldandaddobjects• Createascenefunctionthatcanbeusedtocomparetheheightofobjects
• Createparameters
![Page 3: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/3.jpg)
StartanAliceworldwithgrassandaddlioness(quadruped),bunny(biped),seagull(flyer),andsnowman(biped)
Clickon“editcode”andaddaScenefunction
Clickon“unset”underreturntypeandselect“GalleryClass”
![Page 4: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/4.jpg)
Select“SJointedModel”fromthelistNoticethatallfourobjectshavechecksnexttotheirnames,meaningtheyareincluded
inthiscategory
ClickOK,andnamethefunction“objectThatIsShorter”
![Page 5: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/5.jpg)
Whatdoesthisfunctiondo?
• Functionscalculateandreturnananswer• Becausewechose“SJointedModel”,ourfunctionmustreturnan“SJointedModel”,whichisacategoryallfourofourobjectsfallinto
• Ourfunctionwillcomparethesnowmanandtheseagullandreturntheshorterone
Draginanifstatementandchoose“true”
![Page 6: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/6.jpg)
Clickonthedropdownmenuby“true”andchoose
Relational(DecimalNumber)à???<???à1à1
Youcanchooserandomnumbersinsteadofones,wewillreplace
them
Selectthis.seagull inthelefthanddrop-downmenu,andclickonthe
functionstab
• Ifyouhover yourmouseoverfunctions,Alicewillputboxesaroundplacesyoucandragthemto• Dragthis.seagull getHeight ontothefirst1.0
![Page 7: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/7.jpg)
Repeatforthesnowman’sgetHeightfunction.Yourcodeshouldlooklike
thecodebelow
Wewanttoreturntheshorterobject,soiftheifstatementistrue,weshould
returnseagullOtherwise,wewanttoreturn
snowman
![Page 8: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/8.jpg)
Nowweneedtocallourmethod
• ClickonmyFirstMethod.Rightnowitshouldonlyhaveadoinorderblock
• Clickontheseagullanddragin“say”• Havetheseagullsay“Iamshorter!”
Butwewanttheshorterobjecttosaythat,nottheseagull
Select“objectThatIsShorter”fromthisàFunctionsanddragitontothe
seagull
![Page 9: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/9.jpg)
• Runyourcode.Theshorterobjectshouldsay“Iamshorter!”.• Tryresizingthesnowmanandtheseagullsotheotherisshorterandrerun.• Butwhatifwewanttotestanobjectotherthantheseagullorthesnowman?Parameters
GobacktotheobjectThatIsShorterfunctionandclick“AddParameter”
![Page 10: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/10.jpg)
Undervaluetype,selectGalleryClass,thenclickonSJointedModel
Fillinthenameasobject1andcheckthebox(thistellsusthatwecalledthisfunctionsomewhereandwewillhavetogoandfixit,sincenowwewantthemainfunctionto
givethisoneaparameter.
![Page 11: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/11.jpg)
Repeattheprocessforanotherparameter,namedobject2
Nowtoactuallyusetheparameters:
• Dragobject1over“this.seagull”andobject2over“this.snowMan”
![Page 12: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/12.jpg)
NowgobacktomyFirstMethod
• Yourcodeshouldlooklikethis:
• Noticethetwored“unset”places?Thosearewhereweneedtoselecttwoobjectstocompare
• Whenwecheckedthatboxwhencreatingparameters,wewerepromisingtocomebackandfillthesetwoplacesinwithrealobjects
Selecttwoobjectsandrunyourcode!Youshouldtryitmultipletimesto
makesureitworkswithalltheobjectsinyourworld
![Page 13: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/13.jpg)
PART2
• Createaseagullfunction• Createaseagullvariabletokeeptrackofcolor• Changetheseagullcolorinresponsetoaclick– Iftheseagulliswhite,wewantittobeblue– Ifitisblue,changetored– Ifred,changetogreen– Ifgreen,changebacktowhite
First,wewanttocreateanewseagullfunction
• Gotothedropdownmenutotherightofthesceneimage
• SelectseagullàAddseagullfunction
![Page 14: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/14.jpg)
Wewantthisfunctiontochangetheseagull’scolor,sosetreturntypeto
OtherTypesà Color
NamethefunctionchangeColor andclickOK
![Page 15: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/15.jpg)
Iftheseagulliswhite,wewanttoturnitblue
• Howdoweknowwhatcolortheseagullis?• InAlice3,youCANNOTcomparecolors• Instead,wewillcreateaseagullvariable(calledProperties)thatwillholdthenameofthecolorthattheseagullcurrentlyis
• WordvariablesarecalledStrings
• Gotothedropdownmenuagain
• SelectSeagullàAddSeagullProperty
![Page 16: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/16.jpg)
• Setthevaluetypeto“TextString”• Namethevariable“seagullColor”• Clickinitializer andfillin“White”– Thiswillbethewordthepropertyissetaswhentheworldbegins
Thepropertypopupshouldlooklikethis
![Page 17: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/17.jpg)
NowgotothechangeColor function
• Ifyouhavetroublefindingit,selectthis.seagull fromthedropdownmenuonthefarleft
• Clickonthefunctionstab• Atthetopyoushouldseethis.seagullchangeColor
• Clicktheeditbuttontotheleftofit• Draginanifstatementandselect“true”
ClickontrueandselectTextStringComparisonà ???contentEquals ???àthis.seagullColoràCustomTextString
Thiswillletussay“ifthewordinthis.seagullColor(whichis“White”right
now)isequaltoacustomstring”
![Page 18: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/18.jpg)
Aboxwillpopupforyoutofillinthecustomstring
• Wewanttocheckiftheseagulliswhite,sofillinWhite
• MakesuretokeepthecapitalizationthesameasintheseagullColor property!!
Iftheseagulliswhite,wewanttochangeittoblue
• Whenwecreateaproperty,Alice3automaticallymakesaprocedureandafunctiontogoalongwithit:setPropertyNameandgetPropertyName
• SoundertheProcedurestabyouwillseesetSeagullColor andundertheFunctionstabyouwillseegetSeagullColor
![Page 19: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/19.jpg)
Iftheseagulliswhite,wewanttochangeittoblue
• DraginsetSeagullColor fromtheprocedurestabandselectCustomTextString
• Fillin“Blue”• WestillwanttoreturnaColortype,sodraginthereturnstatementfromthebottombar,andselectBLUE
• (pictureonnextslide)
Yourcodeshouldlooklikethis
![Page 20: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/20.jpg)
Weareonefourthofthewaythere
• Iftheseagulliswhite,wewantittobeblue• Ifitisblue,changetored• Ifred,changetogreen• Ifgreen,changebacktowhite
Draganotherifblockundertheelseandrepeatasbefore
• Thistime,selectTextString Comparisonà ???contentEquals ???à this.seagullColoràCustomTextString andfillin“Blue”
• DraginsetSeagullColor andfillin“Red”• ReturnRED
![Page 21: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/21.jpg)
Draganotherifstatementundertheelse
• Thistime,selectTextString Comparisonà ???contentEquals ???à this.seagullColoràCustomTextString andfillin“Red”
• DraginsetSeagullColor andfillin“Green”• ReturnGREEN• Undertheelse– DraginsetSeagullColor andfillin“White”– ReturnWHITE
![Page 22: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/22.jpg)
Weonlywantthistohappeniftheseagullisclickedon
• GototheinitializeEventListeners function• ClickonAddEventListener
SelectMouseàaddMouseClickOnObjectListener
![Page 23: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/23.jpg)
Thislisteneristruewheneveryouclickonanyobject,butwewantittobe
trueforonly theseagull
• ClickonadddetailàsetOfVisualsàCustomArray
Addthis.seagull totheVisualarray
![Page 24: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/24.jpg)
Draginseagull’ssetPaint methodandselectBLACK
• Thiswillchangetheseagull’scolortoblack• ButwewanttowantchangeittothecolorreturnedbychangeColor
• DragthechangeColor functionoverBLACK
Runyourworld!Whenyouclickontheseagull,itshouldcyclethroughcolors
![Page 25: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/25.jpg)
PART3
• Createasnowmanfunction• Createasnowmanvariabletokeeptrackofcolor
• Changethesnowmancolorinresponsetothevalueofarandomvariable– Ifthenumberis1,wewantittobered– Ifitis2,changetoblue– If3,changetogreen– If4,changetowhite
Startbycreatinganewsnowmanfunction
• Clickonthedropdownmenu• SnowmanàAddSnowmanfunction
![Page 26: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/26.jpg)
Likebefore,setthereturntypetoOthertypesà Color
NamethefunctionchangeColorRandom
![Page 27: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/27.jpg)
Wewanttoclickalocalrandomnumbervariable
• Selectvariablefromthebottombar• Dragintothefunction
• Forvaluetype,selectWholeNumber• Forname,fillincolorNumber• Forinitializer,pick1
![Page 28: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/28.jpg)
Butwedon’twantthevaluetobeone,wewantthevaluetobearandom
number• Under1,selectRandomànextRandomIntegerFromAUpToAndIncludingB ???,???à1àCustomWholeNumber
• Wewantthenumberstobebetween1and4,sowhenthecustomnumbercalculatorpopsup,pick4
• Seenextslideforimages
![Page 29: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/29.jpg)
Yourcodeshouldlooklikethis
Nextdraginan ifblockandselecttrue
Undertrue,selectRelational(WholeNumber)à???==???à
colorNumberà1
Thisbasicallysays“ifcolorNumber =1”
![Page 30: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/30.jpg)
IfcolorNumber is1,wewanttoreturnred
Repeatforthefollowing
• IfcolorNumber==2returnBlue
• IfcolorNumber==3returnGreen
• ElsereturnWhite
• Giveitatrybeforeyoulookatthecodeonthenextslide!
![Page 31: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/31.jpg)
Wewantthesnowmantochangecolorwhenweclickit
• GotoinitializeEventListeners• PickmouseàobjectListener• AdddetailàsetofVisuals
àcustomArray
![Page 32: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/32.jpg)
Addthis.snowMan totheVisualarray
DraginsetPaint andselectBLACK,thendraginchangeColorRandom over
it
![Page 33: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/33.jpg)
Runyourcode!
• Doesitwork?• Howwouldweknow?• Whatifwehavethesnowmansaytherandomnumber,sowecancheck
GobacktochangeColorRandom• Draginsayandselect“hello”• Thenunder“hello”,select???+???àCustomTextStringàWholeNumberà colorNumber
• BecausecolorNumber isaNumbertypeandnotaStringtype,itdoesnotcomeupasanoptiontosay
• ButifwesayawordandthentackoncolorNumber,Alicewilltotheconversion
• IlefttheCustomTextString blank,butyoucouldalsofillinsomethingalongthelinesof“Therandomnumberis”.Justmakesureyouendwithanextraspace!
![Page 34: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/34.jpg)
Runyourcodeandmatchupthenumberthesnowmantellsyouwith
thecolorheturns
Whatifwewanttofind outwhatcolorthesnowmanturns?
![Page 35: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/35.jpg)
Part4
• Writeafunctiontoreturnthecurrentcolorofthesnowman
Addanewsnowmanfunction
![Page 36: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/36.jpg)
MakethereturntypeTextString andthenamegetNameOfColor
Nowweneedtocreatethevariable.GotoSnowmanàadd snowman
property• Valuetype=TextString• Name=snowmanColor• Initializer =White
![Page 37: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/37.jpg)
ForthesnowmanColor variabletohavetherightvariable,wehaveto
changeitwiththecolor• GotochangeColorRandom and,beforethereturnstatement,draginsetSnowmanColorandtype“Red”
• Dothesamefortheotherthreecolors
![Page 38: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/38.jpg)
GobacktogetNameOfColor
• Allweneedtodoisreturnthepropertywejustmade
• DraginareturnandselectsnowmanColor
Nowtohaveacharactersayit
• Sincewealreadyhavethesnowmansayingtherandomnumber,wewillhavethebunnysaythecolor
• Notethateventhoughthefunctionisthesnowman’s,otherobjectscanuseit
• GototheinitializeEventListeners function
![Page 39: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/39.jpg)
Wewantthebunnytosaythecoloreverytimethesnowmanturnscolor• DragasaystatementdirectlyunderthesnowmansetPaint line
• Pick“hello”• Thenunderhelloselect???+???àCustomTextStringà “hello”
![Page 40: Comparing objects and changing color · Comparing objects and changing color This is an modification of the July ... A box will pop up for you to fill in the custom string • We](https://reader033.vdocument.in/reader033/viewer/2022053004/5f08432e7e708231d42123c1/html5/thumbnails/40.jpg)
• Forthecustomtext,type“Thesnowmanis”• Makesuretoleaveaspaceafter“is”!• ThenselectsnowmanfromtheleftdropdownmenuanddraggetNameOfColor over“hello”
Runyourprogram!
• Clickonthesnowmanandwatchthebunnytellyouhiscolor!