Transcript
Page 1: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Comparingobjectsandchangingcolor

ThisisanmodificationoftheJuly2009/June2015changingcolor

tutorialbySusanRodger,ErinTaylor,andDavidYan

ByNatalieHuffmanUnderthedirectionofSusanRodger

DukeUniversityJune2017

Functions,parameters,properties,andrandom

numbers

Page 2: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Whatisafunction?

• Afunctionisasubsetofcodethatcanacceptinputs(calledparameters)andreturnoutputs

• Functionshelpsimplifycode• Examplesofbuilt-infunctionsaregetHeightandgetDistanceTo

• Inthistutorial,wewillwriteourownfunctions

Page 3: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Parts

• Part1:createfunctionthatcomparestwoobjectsandreturnstheshorter

• Part2:createaseagullfunctionthatchangesthecoloroftheseagullwhenitisclickedon

• Part3:createasnowmanfunctionthatturnsthesnowmanarandomcolorwhenitisclickedon

• Part4:createafunctionthatreturnsthecolorofthesnowman,asastring

Page 4: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

PART1

• CreateanAliceworldandaddobjects• Createascenefunctionthatcanbeusedtocomparetheheightofobjects

• Createparameters

Page 5: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

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

Page 6: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Clickon“editcode”andaddaScenefunction

Clickon“unset”underreturntypeandselect“GalleryClass”

Page 7: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Select“SJointedModel”fromthelistNoticethatallfourobjectshavechecksnexttotheirnames,meaningtheyareincluded

inthiscategory

Page 8: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

ClickOK,andnamethefunction“objectThatIsShorter”

Page 9: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Whatdoesthisfunctiondo?

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

• Ourfunctionwillcomparethesnowmanandtheseagullandreturntheshorterone

Page 10: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Draginanifstatementandchoose“true”

Page 11: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Clickonthedropdownmenuby“true”andchoose

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

Youcanchooserandomnumbersinsteadofones,wewillreplace

them

Page 12: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Selectthis.seagull inthelefthanddrop-downmenu,andclickonthe

functionstab

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

Page 13: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Repeatforthesnowman’sgetHeightfunction.Yourcodeshouldlooklike

thecodebelow

Page 14: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Wewanttoreturntheshorterobject,soiftheifstatementistrue,weshould

returnseagullOtherwise,wewanttoreturn

snowman

Page 15: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Nowweneedtocallourmethod

• ClickonmyFirstMethod.Rightnowitshouldonlyhaveadoinorderblock

• Clickontheseagullanddragin“say”• Havetheseagullsay“Iamshorter!”

Page 16: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Butwewanttheshorterobjecttosaythat,nottheseagull

Select“objectThatIsShorter”fromthisàFunctionsanddragitontothe

seagull

Page 17: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

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

Page 18: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

GobacktotheobjectThatIsShorterfunctionandclick“AddParameter”

Page 19: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Undervaluetype,selectGalleryClass,thenclickonSJointedModel

Page 20: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Fillinthenameasobject1andcheckthebox(thistellsusthatwecalledthisfunctionsomewhereandwewillhavetogoandfixit,sincenowwewantthemainfunctionto

givethisoneaparameter.

Page 21: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Repeattheprocessforanotherparameter,namedobject2

Page 22: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Nowtoactuallyusetheparameters:

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

Page 23: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

NowgobacktomyFirstMethod

• Yourcodeshouldlooklikethis:

• Noticethetwored“unset”places?Thosearewhereweneedtoselecttwoobjectstocompare

• Whenwecheckedthatboxwhencreatingparameters,wewerepromisingtocomebackandfillthesetwoplacesinwithrealobjects

Page 24: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Selecttwoobjectsandrunyourcode!Youshouldtryitmultipletimesto

makesureitworkswithalltheobjectsinyourworld

Page 25: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

PART2

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

Page 26: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

First,wewanttocreateanewseagullfunction

• Gotothedropdownmenutotherightofthesceneimage

• SelectseagullàAddseagullfunction

Page 27: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Wewantthisfunctiontochangetheseagull’scolor,sosetreturntypeto

OtherTypesà Color

Page 28: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

NamethefunctionchangeColor andclickOK

Page 29: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Iftheseagulliswhite,wewanttoturnitblue

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

• WordvariablesarecalledStrings

Page 30: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

• Gotothedropdownmenuagain

• SelectSeagullàAddSeagullProperty

Page 31: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

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

Page 32: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Thepropertypopupshouldlooklikethis

Page 33: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

NowgotothechangeColor function

• Ifyouhavetroublefindingit,selectthis.seagull fromthedropdownmenuonthefarleft

• Clickonthefunctionstab• Atthetopyoushouldseethis.seagullchangeColor

• Clicktheeditbuttontotheleftofit• Draginanifstatementandselect“true”

Page 34: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

ClickontrueandselectTextStringComparisonà ???contentEquals ???àthis.seagullColoràCustomTextString

Thiswillletussay“ifthewordinthis.seagullColor(whichis“White”right

now)isequaltoacustomstring”

Page 35: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Aboxwillpopupforyoutofillinthecustomstring

• Wewanttocheckiftheseagulliswhite,sofillinWhite

• MakesuretokeepthecapitalizationthesameasintheseagullColor property!!

Page 36: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Iftheseagulliswhite,wewanttochangeittoblue

• Whenwecreateaproperty,Alice3automaticallymakesaprocedureandafunctiontogoalongwithit:setPropertyNameandgetPropertyName

• SoundertheProcedurestabyouwillseesetSeagullColor andundertheFunctionstabyouwillseegetSeagullColor

Page 37: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Iftheseagulliswhite,wewanttochangeittoblue

• DraginsetSeagullColor fromtheprocedurestabandselectCustomTextString

• Fillin“Blue”• WestillwanttoreturnaColortype,sodraginthereturnstatementfromthebottombar,andselectBLUE

• (pictureonnextslide)

Page 38: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Yourcodeshouldlooklikethis

Page 39: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Weareonefourthofthewaythere

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

Page 40: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Draganotherifblockundertheelseandrepeatasbefore

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

• DraginsetSeagullColor andfillin“Red”• ReturnRED

Page 41: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Draganotherifstatementundertheelse

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

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

Page 42: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is
Page 43: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Weonlywantthistohappeniftheseagullisclickedon

• GototheinitializeEventListeners function• ClickonAddEventListener

Page 44: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

SelectMouseàaddMouseClickOnObjectListener

Page 45: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Thislisteneristruewheneveryouclickonanyobject,butwewantittobe

trueforonly theseagull

• ClickonadddetailàsetOfVisualsàCustomArray

Page 46: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Addthis.seagull totheVisualarray

Page 47: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Draginseagull’ssetPaint methodandselectBLACK

• Thiswillchangetheseagull’scolortoblack• ButwewanttowantchangeittothecolorreturnedbychangeColor

• DragthechangeColor functionoverBLACK

Page 48: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Runyourworld!Whenyouclickontheseagull,itshouldcyclethroughcolors

Page 49: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

PART3

• Createasnowmanfunction• Createasnowmanvariabletokeeptrackofcolor

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

Page 50: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Startbycreatinganewsnowmanfunction

• Clickonthedropdownmenu• SnowmanàAddSnowmanfunction

Page 51: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Likebefore,setthereturntypetoOthertypesà Color

Page 52: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

NamethefunctionchangeColorRandom

Page 53: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Wewanttoclickalocalrandomnumbervariable

• Selectvariablefromthebottombar• Dragintothefunction

Page 54: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

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

Page 55: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Butwedon’twantthevaluetobeone,wewantthevaluetobearandom

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

• Wewantthenumberstobebetween1and4,sowhenthecustomnumbercalculatorpopsup,pick4

• Seenextslideforimages

Page 56: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is
Page 57: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Yourcodeshouldlooklikethis

Nextdraginan ifblockandselecttrue

Page 58: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

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

colorNumberà1

Thisbasicallysays“ifcolorNumber =1”

Page 59: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

IfcolorNumber is1,wewanttoreturnred

Page 60: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Repeatforthefollowing

• IfcolorNumber==2returnBlue

• IfcolorNumber==3returnGreen

• ElsereturnWhite

• Giveitatrybeforeyoulookatthecodeonthenextslide!

Page 61: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is
Page 62: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Wewantthesnowmantochangecolorwhenweclickit

• GotoinitializeEventListeners• PickmouseàobjectListener• AdddetailàsetofVisuals

àcustomArray

Page 63: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Addthis.snowMan totheVisualarray

Page 64: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

DraginsetPaint andselectBLACK,thendraginchangeColorRandom over

it

Page 65: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Runyourcode!

• Doesitwork?• Howwouldweknow?• Whatifwehavethesnowmansaytherandomnumber,sowecancheck

Page 66: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

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

• BecausecolorNumber isaNumbertypeandnotaStringtype,itdoesnotcomeupasanoptiontosay

• ButifwesayawordandthentackoncolorNumber,Alicewilltotheconversion

• IlefttheCustomTextString blank,butyoucouldalsofillinsomethingalongthelinesof“Therandomnumberis”.Justmakesureyouendwithanextraspace!

Page 67: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is
Page 68: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Runyourcodeandmatchupthenumberthesnowmantellsyouwith

thecolorheturns

Whatifwewanttofind outwhatcolorthesnowmanturns?

Page 69: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Part4

• Writeafunctiontoreturnthecurrentcolorofthesnowman

Page 70: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Addanewsnowmanfunction

Page 71: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

MakethereturntypeTextString andthenamegetNameOfColor

Page 72: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Nowweneedtocreatethevariable.GotoSnowmanàadd snowman

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

Page 73: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

ForthesnowmanColor variabletohavetherightvariable,wehaveto

changeitwiththecolor• GotochangeColorRandom and,beforethereturnstatement,draginsetSnowmanColorandtype“Red”

• Dothesamefortheotherthreecolors

Page 74: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is
Page 75: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

GobacktogetNameOfColor

• Allweneedtodoisreturnthepropertywejustmade

• DraginareturnandselectsnowmanColor

Page 76: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Nowtohaveacharactersayit

• Sincewealreadyhavethesnowmansayingtherandomnumber,wewillhavethebunnysaythecolor

• Notethateventhoughthefunctionisthesnowman’s,otherobjectscanuseit

• GototheinitializeEventListeners function

Page 77: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Wewantthebunnytosaythecoloreverytimethesnowmanturnscolor• DragasaystatementdirectlyunderthesnowmansetPaint line

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

Page 78: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is
Page 79: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

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

Page 80: Comparing objects and changing color · • Create an Alice world and add objects • Create a scene function that can be used to ... value of a random variable –If the number is

Runyourprogram!

• Clickonthesnowmanandwatchthebunnytellyouhiscolor!


Recommended