Calvin and Hobbes Teach Properties and Functions

Created by Daniel MacDonald under the direction of Professor Susan Rodger

Duke UniversityJune 2013

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 flexible

World Set-up

• Create a new Sand world, and add a Tigrr from the Animals folder and Boy from the People folder

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.

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.

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.

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.

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 question

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.

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.

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 false• Some 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

execute

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.

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:

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.

Part 1 (cont.)

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 if/else and select red. The correct code can be found on the next slide.

Part 1: Creating Functions and the Color Property

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.

Part 1 (cont.)

Set to No Color

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.

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 method

Part 2: Texture Maps

• Here’s what my first method should look like right now

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 here

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.

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:

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.

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.

Part 2: Texture Maps

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).

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:

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.

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 variable– Select number as the type and name it jumpingDistance

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.

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.

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.

Part 3 (cont.)

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:

Part 3 (cont.)Click here to begin

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.

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:

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).

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.

Part 3 (cont.)

Your final goToCalvin code should look like this:

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.

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.