Comparing objects and changing color · • Create an Alice world and add objects • Create a...

80
Comparing objects and changing color This is an modification of the July 2009/June 2015 changing color tutorial by Susan Rodger, Erin Taylor, and David Yan By Natalie Huffman Under the direction of Susan Rodger Duke University June 2017 Functions, parameters, properties, and random numbers

Transcript of Comparing objects and changing color · • Create an Alice world and add objects • Create a...

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!