Calvin and Hobbes Teach
Properties and Functions
Created by Daniel MacDonald under the
direction of Professor Susan Rodger
Duke University
June 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. Rightclick 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
Then drag the color
tab in the Details Pane.
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.