visual programing -tutorialforarraysandlists

8/7/2019 Visual Programing -TutorialforArraysandLists

http://slidepdf.com/reader/full/visual-programing-tutorialforarraysandlists 1/33

Tutorial for Arrays andTutorial for Arrays and

ListsListsBy Ruthie TuckerBy Ruthie Tucker



DescriptionDescription

This presentation will cover the basics of using This presentation will cover the basics of using

Arrays and Lists in an Alice worldArrays and Lists in an Alice world

It uses a set of chickens on a farmIt uses a set of chickens on a farm PrerequisitesPrerequisites

Everything Everything

This is the last tutorial you should do in this courseThis is the last tutorial you should do in this course



The CharactersThe Characters



Side NoteSide Note

Glitch in AliceGlitch in Alice

Alice cannot compute your world if you put theAlice cannot compute your world if you put thesame objects in a ´List Visualizationµ as an Árray same objects in a ´List Visualizationµ as an Árray

Visualizationµ.Visualizationµ. I will demonstrate how to use the ´ListI will demonstrate how to use the ´List

Visualizationµ later, but for now we are just going toVisualizationµ later, but for now we are just going tomake a regular list.make a regular list.

However, you can use a list without the actualHowever, you can use a list without the actualListVisualization, if you also want to use an ÁrrayµListVisualization, if you also want to use an Árrayµin your world.in your world.



Getting StartedGetting Started

W hat is a List?W hat is a List?

A list is simply a way toA list is simply a way to

organize information.organize information.

W hat is an Array?W hat is an Array? An Array is a structure forAn Array is a structure for

collecting and organizing collecting and organizing

objects or information of objects or information of

the same type into athe same type into agroup.group.

In Alice Arrays and ListsIn Alice Arrays and Lists

are also visual objectsare also visual objects

which can be droppedwhich can be dropped

into your worldinto your world



Cinderella ConductsCinderella Conducts W e are going to make the world you just watched and useW e are going to make the world you just watched and use

Lists and Arrays to make the chickens danceLists and Arrays to make the chickens dance

This is the code to make Cinderella conduct while theThis is the code to make Cinderella conduct while the

chickens dance. If you want to add this to your world you canchickens dance. If you want to add this to your world you can

code it now and save it. W e will use it at the end.code it now and save it. W e will use it at the end.



Making a ListMaking a List

Create a world levelCreate a world level

method namedmethod named

ĆhickenMoveµĆhickenMoveµ

Drag the ´For allDrag the ´For all

Togetherµ Button ontoTogetherµ Button onto

the method editorthe method editor

Select Ćreate new listµSelect Ćreate new listµ



ListsLists

Name itName it

ĆhickDanceTogetherµ,ĆhickDanceTogetherµ,

select óbjectµ as theselect óbjectµ as the

type.type. A white box will comeA white box will come

up that says ínitializeup that says ínitialize

listµ. Click new item untillistµ. Click new item until

all the chickens are inall the chickens are in

your list. The first itemyour list. The first item

starts at 0. Keep yourstarts at 0. Keep your

chickens in order.chickens in order.



ListsLists

W e want the chickens to roll left and right together.W e want the chickens to roll left and right together.

First you need to right the code to have one chicken roll left andFirst you need to right the code to have one chicken roll left and

then right.then right.

Above is the code to have one chicken roll left and then rightAbove is the code to have one chicken roll left and then right

I selected Chicken 2 but any chicken will work I selected Chicken 2 but any chicken will work



ListsLists

Now drag the tab labelNow drag the tab labelítem_from_ChickensDanceTogetherµ over the boxítem_from_ChickensDanceTogetherµ over the boxthat was previously labeled Ćhicken 2µthat was previously labeled Ćhicken 2µ

Repeat this for each command to make the chickensRepeat this for each command to make the chickensrollroll



ListsLists

Now we have programmed the Lists to have allNow we have programmed the Lists to have all

the chickens roll left and then right at the samethe chickens roll left and then right at the same

time.time.

But what if we want them to do something, oneBut what if we want them to do something, one

at a time?at a time?

This is where ¶For all in order· comes in.This is where ¶For all in order· comes in.

W e will now program the chickens to kick upW e will now program the chickens to kick up

their left leg, one at a time.their left leg, one at a time.



ListsLists

Click on the ´For all in orderµ tab at the bottom of your screen and drag itClick on the ´For all in orderµ tab at the bottom of your screen and drag itinto your methodinto your method

Now create a new method named ´KickUpRightLegµ and give it an objectNow create a new method named ´KickUpRightLegµ and give it an objectparameter called ́ W hichChickenµparameter called ́ W hichChickenµ

Below is how the code will look when we have finished the next few slidesBelow is how the code will look when we have finished the next few slides



Part Named K eyPart Named K ey

Make a simple commandMake a simple command

using any object likeusing any object like

´chickenµ and have it do the´chickenµ and have it do the

command. Then, create acommand. Then, create a

parameter and drag it into theparameter and drag it into the

original object.original object.

Click on any object (likeClick on any object (like

chicken)chicken)

Now go to functions andNow go to functions and

scroll down to ´Part namedscroll down to ´Part named

Keyµ insert it everywhere youKeyµ insert it everywhere you

have a parameterhave a parameter



Part Named K ey ContinuedPart Named K ey Continued

Now, click on the white boxNow, click on the white box

(circled in red) and scroll(circled in red) and scroll

down to ótherµ.down to ótherµ.

Once you click on ótherµOnce you click on ótherµ

and type in the appendageand type in the appendage

that you want to command.that you want to command.In this case the left leg.In this case the left leg.

Remember the syntax mustRemember the syntax must

be the same as it is listed onbe the same as it is listed on

the objectthe object



Part named k ey conclusionPart named k ey conclusion

Finally take your objectFinally take your object

parameter and drop it back inparameter and drop it back in

where it says chickenwhere it says chicken

Your code should look likeYour code should look likethe picture below when youthe picture below when you

are doneare done



ListsLists

Now go back into your first method and drag yourNow go back into your first method and drag your´KickUpRightLegµ method into the ´For all in Orderµ´KickUpRightLegµ method into the ´For all in Orderµspace, in your world level ´chicken moveµ method.space, in your world level ´chicken moveµ method.

Select Expressions and thenSelect Expressions and thenItem_from_ChickensDanceTogetherItem_from_ChickensDanceTogether



ListsLists

Now that this portion isNow that this portion is

programmed all the chickensprogrammed all the chickens

will roll right and then left atwill roll right and then left at

the same time for thethe same time for the

´Together Functionsµ and´Together Functionsµ and

kick up their legs one at akick up their legs one at a

time for the ´For all in ordertime for the ´For all in order

FunctionsµFunctionsµ

This saves lots of time andThis saves lots of time andlines of codelines of code

Imagine if we had toImagine if we had to

program each chicken to doprogram each chicken to do

this individually!this individually!



List VisualizationsList Visualizations

If you are not also using an Array andIf you are not also using an Array and

would like to visualize your list you canwould like to visualize your list you can

select the list visualization class fromselect the list visualization class from

the Visualizations folderthe Visualizations folder

DONOT DO THIS RIGHT NOW DONOT DO THIS RIGHT NOW

(BECAUEW E ARE GOING TO(BECAUEW E ARE GOING TO

CREATE AN ARRAY AS W ELL)OR CREATE AN ARRAY AS W ELL)OR

IT W ILL MESS UP THE LIST YOUIT W ILL MESS UP THE LIST YOU

JUST CREATEDJUST CREATED

After entering in all of the ChickensAfter entering in all of the Chickens

they should be aligned in a row thatthey should be aligned in a row that

looks like this.looks like this.

If you ´Set is Showing to Falseµ theIf you ´Set is Showing to Falseµ the

List Visualization will disappear, but itList Visualization will disappear, but it

is still there.is still there.

If we were not going toIf we were not going to

create an Array you couldcreate an Array you could

add the List Visualizationadd the List Visualizationwithout problems.without problems.



ArraysArrays

Lists are great for coding a group of objects to all doLists are great for coding a group of objects to all do

the same thing (either together or in order).the same thing (either together or in order).

But what if we want to code only some of the objects inBut what if we want to code only some of the objects in

our group to do something.our group to do something.

This is where Arrays come in.This is where Arrays come in.

The following slide will show the place that you need toThe following slide will show the place that you need to

go to find the Array. It is called ´Array Visualizationµ.go to find the Array. It is called ´Array Visualizationµ. Drop it into your world.Drop it into your world.



Starting the ArrayStarting the Array

Go to add objectsGo to add objects

Select the folder at the end of Select the folder at the end of

the list entitledthe list entitled

´Visualizationsµ.´Visualizationsµ.

The first object on the leftThe first object on the left

should be a class calledshould be a class called

´Array Visualizationsµ.´Array Visualizationsµ.

It should look like a strip of It should look like a strip of

concrete.concrete.

Select itSelect it



Starting the ArrayStarting the Array W e are going to use ourW e are going to use our

Array for the chickensArray for the chickens

W hen you add the Array toW hen you add the Array to

your world this box calledyour world this box called

Ínitializing Arrayµ willÍnitializing Arrayµ willappearappear

Count the number of Count the number of

chickens you have and selectchickens you have and select

the button Ńew Itemµ forthe button Ńew Itemµ for

that many.that many.

Remember it will start at 0Remember it will start at 0



Array continuedArray continued

Once you have enteredOnce you have entered

all of your chickens intoall of your chickens into

the Array your screenthe Array your screen

should look like this.should look like this. If it does, click ok. If not,If it does, click ok. If not,

hit ´undoµ at the top lefthit ´undoµ at the top left

and try againand try again

Once you hit ok yourOnce you hit ok your

chickens should be neatly chickens should be neatly

lined up on the Array.lined up on the Array.



ArraysArrays

Click on your Árray Visualizationµ and thenClick on your Árray Visualizationµ and then

´propertiesµ. Set Ís showing to Falseµ to hide´propertiesµ. Set Ís showing to Falseµ to hide

your Array Visualization so that the chickens doyour Array Visualization so that the chickens do

not look like they are standing on anything.not look like they are standing on anything.

However, the Array is still there and functionalHowever, the Array is still there and functional



Array ContinuedArray Continued This is how our code willThis is how our code will

look when we are done.look when we are done.

Note the small red circle onNote the small red circle on

the leftthe left

This is how your array willThis is how your array willappear in your tool bar.appear in your tool bar.

The large circle on the rightThe large circle on the right

is the beginning of how weis the beginning of how we

will use our Array to animatewill use our Array to animate

our chickens.our chickens.



Arrays ContinuedArrays Continued

First, lets have our chickens all turn to face Cinderella.First, lets have our chickens all turn to face Cinderella.

Again you can code this with any chicken. See below Again you can code this with any chicken. See below




Now create a parameterNow create a parameter

You can name it whateverYou can name it whatever

you would likeyou would like

Drag it into your chickenDrag it into your chickencommand ( picture on right)command ( picture on right)

Now go to Array Now go to Array

Visualizations, properties,Visualizations, properties,

and drag the ´elementsµ taband drag the ´elementsµ tabdown to your parameter.down to your parameter.

Select 0, repeat this step forSelect 0, repeat this step for

each chicken in your Array each chicken in your Array



Complete Turn to Face CodeComplete Turn to Face Code

N

ote that each element in the Array is coded separately but they N

ote that each element in the Array is coded separately but they are all doing the same thing. Now let·s get them to do differentare all doing the same thing. Now let·s get them to do different

thingsthings..



Getting Chick ens to do Diff erentGetting Chick ens to do Diff erent

ThingsThings To get the chickens to move upTo get the chickens to move up

and down at different times youand down at different times you

will follow the same steps that youwill follow the same steps that you

just performed with" Turn tojust performed with" Turn to

Faceµ in the Cinderella slide.Faceµ in the Cinderella slide. See the code below See the code below

Note that we only selectedNote that we only selected

chickens 0, 2 and 4 to perform thischickens 0, 2 and 4 to perform this

task.task.

After making the even numberAfter making the even number

chickens move up and down, addchickens move up and down, add

code to make the odd numbercode to make the odd numbermove, separately.move, separately.




Once you have finishedOnce you have finished

plugging in the Array yourplugging in the Array your

code should look like thiscode should look like this

N

ote that only chickens 0, 2,N

ote that only chickens 0, 2,and 4 are going to move.and 4 are going to move.

This is the beauty of theThis is the beauty of theArray Array

It allows you to only moveIt allows you to only move

selected objects in your Array selected objects in your Array

W

hereas with the List youW

hereas with the List youmust move everything must move everything



ArraysArrays

This is the visualThis is the visual

Note how Chickens 0, 2Note how Chickens 0, 2

and 4 are moving downand 4 are moving down

while chickens 1, 3, andwhile chickens 1, 3, and5 are moving up.5 are moving up.

You can program eachYou can program each

chicken individually or inchicken individually or in

any number you want toany number you want to



Putting it all togetherPutting it all together

For the Final construction I created a BDE event andFor the Final construction I created a BDE event and

did the same trick that was used in the vehicle tutorial.did the same trick that was used in the vehicle tutorial.

Put an invisible bunny in the world and have himPut an invisible bunny in the world and have him

change colors.W hile he is one color Cinderellachange colors.W hile he is one color Cinderellaconducts, while he is a separate color she does not.conducts, while he is a separate color she does not.

The bunny will turn one color while the chickens beginThe bunny will turn one color while the chickens begin

to dance, this will trigger Cinderella to start conducting.to dance, this will trigger Cinderella to start conducting.

W hen the chickens finish, the bunny will turn aW hen the chickens finish, the bunny will turn adifferent color, which will signal Cinderella to stop.different color, which will signal Cinderella to stop.



Final constructionFinal construction

And that·s all folks! And that·s all folks!



R ecapR ecap

W hen we put all of these elements together you can seeW hen we put all of these elements together you can seehow Lists and Arrays can be used interchangeably tohow Lists and Arrays can be used interchangeably toanimate your Alice world.animate your Alice world.

The ¶For all together· command in Lists allows you toThe ¶For all together· command in Lists allows you toanimate a group of objects to do something together.animate a group of objects to do something together.

The ¶For all in order· command in Lists allows you toThe ¶For all in order· command in Lists allows you toanimate the whole group of objects to do the sameanimate the whole group of objects to do the same

thing, but one at a time.thing, but one at a time. The Array allows you to have a group of objects doThe Array allows you to have a group of objects do

different things.different things.

visual programing -tutorialforarraysandlists

Documents