Calvin and Hobbes Teach Properties and Functions - PowerPoint Presentation

Slide1

Calvin and Hobbes Teach Properties and Functions

Created by Daniel MacDonald under the direction of Professor Susan Rodger

Duke University

June 2013Slide2

What

You’ll Learn

How to use various built-in properties as well as creating your own properties

How

conditional statements (if/else)

work

How to create your own function and use its return value

How to use this knowledge to make your methods more flexibleSlide3

World Set-up

Create a new Sand world, and add a

Tigrr

from the

Animals folder and Boy from the People folderSlide4

World Set-up (cont.)

Now use the positioning tools to put the tiger on the left and the boy on the right. Then turn each character to face the camera. See the picture below for how it should look.Slide5

Renaming

Now we’ll rename our characters. Right-click on each character in the

Object Tree

and select the

Rename

option. We will rename the boy as Calvin and the tiger as Hobbes.Slide6

Part 1: Creating Functions and the Color Property

Now we will create our first method, which will focus on color changes. Go to

World

in the

Objects Tree

, then in the methods tab of the Details Pane

, click create new method. Name this

method

lookAtColor

. Now we have to call this new method in

my first method

. To get back to the code of

my first method

, select the

edit

button next to it in the details pane.Slide7

Part 1 (cont.)

my first method

should look like this now.

Now select the

edit

next to lookAtColor in the details pane

to go back to the code for that method. lookAtColor

will be empty at this point in time. Slide8

Part 1 (cont.)

Go to Calvin’s method tab in the Details Pane and drag in a say method. He should say: “What color is Hobbes…is he red?”

Now we will write our own method to determine the answer to this questionSlide9

Part 1 (cont.)

Now we’ll create the color-checking function. Select

Hobbes

in the

Object Tree

, then go to the functions tab in the Details Pane. Select

create new function,

then

boolean

as the type, and name it

amIRed

.Slide10

Part 1 (cont.)

Make sure the function has a T/F symbol (for a

boolean

, a.k.a. true-false) in its tab and has a green background (as opposed to yellow for methods). Now drag an

if/else

from the bottom of Alice above the return statement. Set it to true (we will change this later). The correct set-up can be found below.Slide11

About Functions and If/Else

Some notes about functions:

Each function returns a value (can be a number,

boolean

, etc.) that can be used in methods

A boolean has a true or false value depending on a condition that is either true or falseSome notes about if/else:All if/else statements are based on a condition at the top (which

we initially set to true)If this condition is true, only the top half (above the

else)

will execute

Otherwise, only the bottom half (below the else) will

executeSlide12

Part 1 (cont.)

Now go to Hobbes’

properties

tab in the

Details Pane.

Then drag the color property (click on the color block and hold down) to the

true

in the

if/

else

(along the arrow’s path).

Then select to top option (should be

==

) and

red. Make sure the color is still no color in the

Details Pane though.Slide13

Part 1 (cont.

)

Now drag up a

return statement

(located on the bottom bar) to

the top part (below the if and above the else) of the if/else and set it to true. Drag another

return statement into the lower part and set it to false. The completed code should look like this:Slide14

Part 1 (cont.)

Go back to the

lookAtColor

tab. Drag up an

if/else, set it to true, and then drag our new amIRed

function (from Hobbes’ functions tab

) over the

true

.

Then drag in two

say methods

for Calvin (make sure to select him in the

object tree

first) into the

if/else. The top one should say, “Yes, he is!” and the bottom one should say, “Well then, let’s make him red!”Completed code is on the next slide.Slide15

Part 1 (cont.)Slide16

Part 1 (cont.)

If you play the world, the bottom part of the

if statement

will execute because our

amIRed

function will return false.Now we need to change

Hobbes’ color to red. To do so, first go to

Hobbes’ properties tab

. Then drag the

color property

to below the i

f/else

and select

red

. The correct code can be found on the next slide.Slide17

Part 1: Creating Functions and the Color Property Slide18

Part 1 (cont.)

Now, make a copy of the

if/else

(right-click on it to bring up the option to do so) and change the second

say method

in the copy to, “Uh oh…he’s still not red.” Drag this altered if-else below the color change line. Then change Hobbes’ color back to no color

in the last line of the method (this will make him his normal color again). The correct code is on the next slide.Slide19

Part 1 (cont.)

Set to

No ColorSlide20

Part 1 (cont.)

Now play the world again. The first if/else should

run

the

else

part, but now the the second if/else should run the true part (i.e. the “Yes, he is!” part)

because Hobbes should be red at that point.Slide21

Part 2: Texture Maps

Now create a new

World method

and name it

hideAndSeek

. Click the edit next to my first method to return to its code. Drop our new method into my first method right after

lookAtColor.

Click here to go back to the code for

my first methodSlide22

Part 2: Texture Maps

Here’s what

my first method

should look like right nowSlide23

Part 2: Texture Maps

You

should be in

world

in the object tree and methods in the details pane

. If you aren’t, go there now. Now click on the edit button to the right of

hideAndSeek

in the

details pane

.

hideAndSeek

will be blank at this point in time.

Click hereSlide24

Part 2: Texture Maps

Begin by having Calvin turn to face Hobbes. The

turn to face method

can be found in

Calvin’s methods tab

(in the Details Pane). Drag it into hideAndSeek and select Hobbes  the entire Hobbes

as the target.Slide25

Part 2: Texture Maps

Now we need Calvin to challenge Hobbes to a game of hide and seek and then Hobbes should accept the challenge. Use the

say method

for each character (make sure you have the correct one selected in the

object tree

) to accomplish this. Here’s what my method looks like so far:Slide26

Part 2: Texture Maps

We can use the

skin texture property

to help Hobbes hide from his friend. Go to Hobbes’ properties tab and drag it to the bottom of the

hideAndSeek

method. Select ground.SandTexture

as the new texture. Play the world to see what this does.Slide27

Part 2: Texture Map

Now have Calvin give up (with a

say method

) and change Hobbes back to his

normal skin texture

. Use the same steps as before, but this time select Hobbes.tigeruvmapcolored. Then, have Hobbes say, “I win!” at the very end of the method. The completed method is on the next slide.Slide28

Part 2: Texture MapsSlide29

Part 3: Making Methods Flexible with Functions and Properties

Now, you will learn to make your methods more flexible by using properties and functions. We will start by teaching Hobbes how to hop.

Select Hobbes in the

object tree

, then in his

methods tab click on create new method. Name this method

hop. Make sure the method’s tab says Hobbes.hop

and not

world.hop

(if it is the latter, you created the method in the wrong place).Slide30

Part

3 (cont.)

Drag a

do together

into the

hop method, and then place a do in order inside of the do together. So far, you should have this code in the

hop method:Slide31

Part 3 (cont.)

Drag a

move

method (for Hobbes still) into the

do in order

. Select up and then ½ meter. Then click on the right-most arrow, select

duration, and click on 0.5 seconds.

Make a copy

of this line (right click on it for the option), which will appear right below the original, and change the

up

to

down

.

Inside the

do together

but outside the do in order, insert another move method

, this time selecting forward and

1 meter

.Slide32

Part 3 (cont.)

Next, you’ll create a variable that determines how far Hobbes can travel forward each hop.

Steps

Go to Hobbes’

properties tab

Click on create new variableSelect number

as the type and name it

jumpingDistanceSlide33

Part 3 (cont.)

Now drag

jumpingDistance

from the

properties tab to the 1 meter part of the move forward line. When the box is green, let go of the mouse. Hobbes should now go forward

jumpingDistance

meters each time he hops.Slide34

Part 3 (cont.)

Now you’ll

create a new world function

that returns the number of hops

Hobbes

needs to make to get to Calvin (this is the next method we’ll be writing). Name this new function numberOfHopsInDistance

and make sure the type being returned is a number

.Slide35

Part 3 (cont.)

Now go to Hobbes’

functions tab

and look for

Hobbes distance to

. It should be the third one in the proximity section. Drag this function over the 1 in the return statement, and select Calvin’s right hand as the

target. An illustration is provided on the next slide for help.Slide36

Part 3 (cont.)Slide37

Part 3 (cont.)

Now that we have the total distance between Calvin and Hobbes, we need to divide that by how far Hobbes can jump. To do so, click the right-most arrow in the

return statement

, go to

math

, then to the / sign (for division), and then go to

expressions and select jumpingDistance. A picture of this progression is on the next slide if you need help. Your final function should have only this line:Slide38

Part 3 (cont.)

Click here to beginSlide39

Part 3 (cont.)

Now it’s time to create our final method. This method will use

numberOfHopsInDistance

. Go to the

methods tab

for the world in the details pane and click on

create new method. Name the method goToCalvin. Then put it at the end of

my first method

. Use the

edit

buttons to navigate between methods.Slide40

Part 3 (cont.)

Back in the

goToCalvin

method,

drag in a turn to face method for Hobbes and select Calvin (the entire Calvin) as the target. Due to the way the Hobbes object was created, it will look like he isn’t facing Calvin, but the

hop method will still take him towards his friend. Drag in a hop

method (remember it’s a Hobbes, and not a world method) into

goToCalvin

to see this is true. Your code should look like this so far:Slide41

Part 3 (cont.)

Now

drag in a

loop

(it’s next to the if/else) and set it to

2 times initially. Drag the hop down into the

do nothing and run the world. Notice that Hobbes will now do two hops.

The

body

of the loop will run as many times as you tell it to (right now we have it set

to 2

).Slide42

Part 3 (cont.)

In the

details pane

and

object tree

, navigate to the world’s functions tab. You should see numberOfHopsInDistance at the top of the details pane. Drag this function over the

2 times. Slide43

Part 3 (cont.)

Your final

goToCalvin

code should look like this:

Slide44

Conclusion and Challenges

Try altering Hobbes’ location (though try to keep him to Calvin’s right) or

jumpingDistance

property. Because we used functions, our methods will work even if we change our set-

up. Properties and functions are a great way to make Alice worlds more flexible and adaptable to changes. Without them, you will often have to edit your code every time you move an object or change a property.Slide45

Challenges

Using the

isShowing

and

vehicle properties, fix the problem of Hobbes not facing Calvin in goToCalvin. You will need to add another tiger in the same place as Hobbes (but facing the correct direction), set this tiger’s vehicle to Hobbes, and then make Hobbes invisible and the new tiger visible in

goToCalvin (before this method, Hobbes will be visible and new tiger will be invisible).

If you have learned

parameters

, add a color parameter to

lookAtColor

and

amIRed

that allows you to check colors other than red.