Comparingobjectsandchangingcolor

ThisisanmodificationoftheJuly2009/June2015changingcolor

tutorialbySusanRodger,ErinTaylor,andDavidYan

ByNatalieHuffmanUnderthedirectionofSusanRodger

DukeUniversityJune2017

Functions,parameters,properties,andrandom

numbers

Whatisafunction?

• Afunctionisasubsetofcodethatcanacceptinputs(calledparameters)andreturnoutputs

• Functionshelpsimplifycode• Examplesofbuilt-infunctionsaregetHeightandgetDistanceTo

• Inthistutorial,wewillwriteourownfunctions

Parts

• Part1:createfunctionthatcomparestwoobjectsandreturnstheshorter

• Part2:createaseagullfunctionthatchangesthecoloroftheseagullwhenitisclickedon

• Part3:createasnowmanfunctionthatturnsthesnowmanarandomcolorwhenitisclickedon

• Part4:createafunctionthatreturnsthecolorofthesnowman,asastring

PART1

• CreateanAliceworldandaddobjects• Createascenefunctionthatcanbeusedtocomparetheheightofobjects

• Createparameters

StartanAliceworldwithgrassandaddlioness(quadruped),bunny(biped),seagull(flyer),andsnowman(biped)

Clickon“editcode”andaddaScenefunction

Clickon“unset”underreturntypeandselect“GalleryClass”

Select“SJointedModel”fromthelistNoticethatallfourobjectshavechecksnexttotheirnames,meaningtheyareincluded

inthiscategory

ClickOK,andnamethefunction“objectThatIsShorter”

Whatdoesthisfunctiondo?

• Functionscalculateandreturnananswer• Becausewechose“SJointedModel”,ourfunctionmustreturnan“SJointedModel”,whichisacategoryallfourofourobjectsfallinto

• Ourfunctionwillcomparethesnowmanandtheseagullandreturntheshorterone

Draginanifstatementandchoose“true”

Clickonthedropdownmenuby“true”andchoose

Relational(DecimalNumber)à???<???à1à1

Youcanchooserandomnumbersinsteadofones,wewillreplace

them

Selectthis.seagull inthelefthanddrop-downmenu,andclickonthe

functionstab

• Ifyouhover yourmouseoverfunctions,Alicewillputboxesaroundplacesyoucandragthemto• Dragthis.seagull getHeight ontothefirst1.0

Repeatforthesnowman’sgetHeightfunction.Yourcodeshouldlooklike

thecodebelow

Wewanttoreturntheshorterobject,soiftheifstatementistrue,weshould

returnseagullOtherwise,wewanttoreturn

snowman

Nowweneedtocallourmethod

• ClickonmyFirstMethod.Rightnowitshouldonlyhaveadoinorderblock

• Clickontheseagullanddragin“say”• Havetheseagullsay“Iamshorter!”

Butwewanttheshorterobjecttosaythat,nottheseagull

Select“objectThatIsShorter”fromthisàFunctionsanddragitontothe

seagull

• Runyourcode.Theshorterobjectshouldsay“Iamshorter!”.• Tryresizingthesnowmanandtheseagullsotheotherisshorterandrerun.• Butwhatifwewanttotestanobjectotherthantheseagullorthesnowman?Parameters

GobacktotheobjectThatIsShorterfunctionandclick“AddParameter”

Undervaluetype,selectGalleryClass,thenclickonSJointedModel

Fillinthenameasobject1andcheckthebox(thistellsusthatwecalledthisfunctionsomewhereandwewillhavetogoandfixit,sincenowwewantthemainfunctionto

givethisoneaparameter.

Repeattheprocessforanotherparameter,namedobject2

Nowtoactuallyusetheparameters:

• Dragobject1over“this.seagull”andobject2over“this.snowMan”

NowgobacktomyFirstMethod

• Yourcodeshouldlooklikethis:

• Noticethetwored“unset”places?Thosearewhereweneedtoselecttwoobjectstocompare

• Whenwecheckedthatboxwhencreatingparameters,wewerepromisingtocomebackandfillthesetwoplacesinwithrealobjects

Selecttwoobjectsandrunyourcode!Youshouldtryitmultipletimesto

makesureitworkswithalltheobjectsinyourworld

PART2

• Createaseagullfunction• Createaseagullvariabletokeeptrackofcolor• Changetheseagullcolorinresponsetoaclick– Iftheseagulliswhite,wewantittobeblue– Ifitisblue,changetored– Ifred,changetogreen– Ifgreen,changebacktowhite

First,wewanttocreateanewseagullfunction

• Gotothedropdownmenutotherightofthesceneimage

• SelectseagullàAddseagullfunction

Wewantthisfunctiontochangetheseagull’scolor,sosetreturntypeto

OtherTypesà Color

NamethefunctionchangeColor andclickOK

Iftheseagulliswhite,wewanttoturnitblue

• Howdoweknowwhatcolortheseagullis?• InAlice3,youCANNOTcomparecolors• Instead,wewillcreateaseagullvariable(calledProperties)thatwillholdthenameofthecolorthattheseagullcurrentlyis

• WordvariablesarecalledStrings

• Gotothedropdownmenuagain

• SelectSeagullàAddSeagullProperty

• Setthevaluetypeto“TextString”• Namethevariable“seagullColor”• Clickinitializer andfillin“White”– Thiswillbethewordthepropertyissetaswhentheworldbegins

Thepropertypopupshouldlooklikethis

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”

Aboxwillpopupforyoutofillinthecustomstring

• Wewanttocheckiftheseagulliswhite,sofillinWhite

• MakesuretokeepthecapitalizationthesameasintheseagullColor property!!

Iftheseagulliswhite,wewanttochangeittoblue

• Whenwecreateaproperty,Alice3automaticallymakesaprocedureandafunctiontogoalongwithit:setPropertyNameandgetPropertyName

• SoundertheProcedurestabyouwillseesetSeagullColor andundertheFunctionstabyouwillseegetSeagullColor

Iftheseagulliswhite,wewanttochangeittoblue

• DraginsetSeagullColor fromtheprocedurestabandselectCustomTextString

• Fillin“Blue”• WestillwanttoreturnaColortype,sodraginthereturnstatementfromthebottombar,andselectBLUE

• (pictureonnextslide)

Yourcodeshouldlooklikethis

Weareonefourthofthewaythere

• Iftheseagulliswhite,wewantittobeblue• Ifitisblue,changetored• Ifred,changetogreen• Ifgreen,changebacktowhite

Draganotherifblockundertheelseandrepeatasbefore

• Thistime,selectTextString Comparisonà ???contentEquals ???à this.seagullColoràCustomTextString andfillin“Blue”

• DraginsetSeagullColor andfillin“Red”• ReturnRED

Draganotherifstatementundertheelse

• Thistime,selectTextString Comparisonà ???contentEquals ???à this.seagullColoràCustomTextString andfillin“Red”

• DraginsetSeagullColor andfillin“Green”• ReturnGREEN• Undertheelse– DraginsetSeagullColor andfillin“White”– ReturnWHITE

Weonlywantthistohappeniftheseagullisclickedon

• GototheinitializeEventListeners function• ClickonAddEventListener

SelectMouseàaddMouseClickOnObjectListener

Thislisteneristruewheneveryouclickonanyobject,butwewantittobe

trueforonly theseagull

• ClickonadddetailàsetOfVisualsàCustomArray

Addthis.seagull totheVisualarray

Draginseagull’ssetPaint methodandselectBLACK

• Thiswillchangetheseagull’scolortoblack• ButwewanttowantchangeittothecolorreturnedbychangeColor

• DragthechangeColor functionoverBLACK

Runyourworld!Whenyouclickontheseagull,itshouldcyclethroughcolors

PART3

• Createasnowmanfunction• Createasnowmanvariabletokeeptrackofcolor

• Changethesnowmancolorinresponsetothevalueofarandomvariable– Ifthenumberis1,wewantittobered– Ifitis2,changetoblue– If3,changetogreen– If4,changetowhite

Startbycreatinganewsnowmanfunction

• Clickonthedropdownmenu• SnowmanàAddSnowmanfunction

Likebefore,setthereturntypetoOthertypesà Color

NamethefunctionchangeColorRandom

Wewanttoclickalocalrandomnumbervariable

• Selectvariablefromthebottombar• Dragintothefunction

• Forvaluetype,selectWholeNumber• Forname,fillincolorNumber• Forinitializer,pick1

Butwedon’twantthevaluetobeone,wewantthevaluetobearandom

number• Under1,selectRandomànextRandomIntegerFromAUpToAndIncludingB ???,???à1àCustomWholeNumber

• Wewantthenumberstobebetween1and4,sowhenthecustomnumbercalculatorpopsup,pick4

• Seenextslideforimages

Yourcodeshouldlooklikethis

Nextdraginan ifblockandselecttrue

Undertrue,selectRelational(WholeNumber)à???==???à

colorNumberà1

Thisbasicallysays“ifcolorNumber =1”

IfcolorNumber is1,wewanttoreturnred

Repeatforthefollowing

• IfcolorNumber==2returnBlue

• IfcolorNumber==3returnGreen

• ElsereturnWhite

• Giveitatrybeforeyoulookatthecodeonthenextslide!

Wewantthesnowmantochangecolorwhenweclickit

• GotoinitializeEventListeners• PickmouseàobjectListener• AdddetailàsetofVisuals

àcustomArray

Addthis.snowMan totheVisualarray

DraginsetPaint andselectBLACK,thendraginchangeColorRandom over

it

Runyourcode!

• Doesitwork?• Howwouldweknow?• Whatifwehavethesnowmansaytherandomnumber,sowecancheck

GobacktochangeColorRandom• Draginsayandselect“hello”• Thenunder“hello”,select???+???àCustomTextStringàWholeNumberà colorNumber

• BecausecolorNumber isaNumbertypeandnotaStringtype,itdoesnotcomeupasanoptiontosay

• ButifwesayawordandthentackoncolorNumber,Alicewilltotheconversion

• IlefttheCustomTextString blank,butyoucouldalsofillinsomethingalongthelinesof“Therandomnumberis”.Justmakesureyouendwithanextraspace!

Runyourcodeandmatchupthenumberthesnowmantellsyouwith

thecolorheturns

Whatifwewanttofind outwhatcolorthesnowmanturns?

Part4

• Writeafunctiontoreturnthecurrentcolorofthesnowman

Addanewsnowmanfunction

MakethereturntypeTextString andthenamegetNameOfColor

Nowweneedtocreatethevariable.GotoSnowmanàadd snowman

property• Valuetype=TextString• Name=snowmanColor• Initializer =White

ForthesnowmanColor variabletohavetherightvariable,wehaveto

changeitwiththecolor• GotochangeColorRandom and,beforethereturnstatement,draginsetSnowmanColorandtype“Red”

• Dothesamefortheotherthreecolors

GobacktogetNameOfColor

• Allweneedtodoisreturnthepropertywejustmade

• DraginareturnandselectsnowmanColor

Nowtohaveacharactersayit

• Sincewealreadyhavethesnowmansayingtherandomnumber,wewillhavethebunnysaythecolor

• Notethateventhoughthefunctionisthesnowman’s,otherobjectscanuseit

• GototheinitializeEventListeners function

Wewantthebunnytosaythecoloreverytimethesnowmanturnscolor• DragasaystatementdirectlyunderthesnowmansetPaint line

• Pick“hello”• Thenunderhelloselect???+???àCustomTextStringà “hello”

• Forthecustomtext,type“Thesnowmanis”• Makesuretoleaveaspaceafter“is”!• ThenselectsnowmanfromtheleftdropdownmenuanddraggetNameOfColor over“hello”

Runyourprogram!

• Clickonthesnowmanandwatchthebunnytellyouhiscolor!