Plotting Points
By Francine Wolfe
Professor Susan Rodger
Duke University
June 2010
Description
• This tutorial will show you how to create a
game where the player has to plot points on a
graph.
• The method we will use to check where the
points are can be used in many different types
of Alice worlds.
Set up
• Create new Alice world using any template
except water
• You should have downloaded the grid.gif file
that went with this tutorial. If you haven’t, do
that now
• In Alice, click file, make billboard
• Browse to find the file grid.gif and click import
Add a sphere
•
•
•
•
Click
In local gallery go to shapes folder
Add a sphereHighPoly. Rename it “point”.
There is also a regular sphere object you could also use.
The sphereHighPoly object has smoother edges
• In the properties tab, change the sphere’s color to blue.
• Make it smaller. See the first slide for an approximate
size
• We want the user to be able to click and drag the point
to a spot on the grid.
Let the mouse move the sphere
• In the events panel click create new
event. Select let the mouse move
<objects>
• Click any object and select create new
list. Call it points and select object for the
type. Click new item and change none to
point. Then click ok.
• You will notice when you click play that
there is a problem. When you click and
drag the point, it moves forward and back
instead of up and down.
• We can fix this problem by putting the
grid flat on the ground
•
•
•
•
Positioning the Grid
Right Click on the grid and select turn to face – camera
Right click on camera, select move to, grid.
Right click camera, move up, 10 m
Right click camera turn forward ¼ revolution.
• You won’t be able to see the
grid yet because it is thin like a
sheet of paper.
• Right click on the grid in the
object tree, select turn
backward ¼ revolution. It
should be flat on the ground
now.
Positioning the Grid
• Increase
the size of grid and position it like in
the bottom picture. It should take up most of the
screen but still have a little room on the side
where the teacher can stand
• To bring the point to
the current view,
right click on point
in the object tree.
Select move to and
grid.
• Now move it off to
the side of the grid.
Add a Teacher
• We will have a teacher tell the player what point to plot
• Go to the people folder in the local gallery and add one
of the people. I chose a madScientist
• Right click on your new person in the object tree and
select rename. Type “teacher”
• Position the teacher to the right of the grid like in the
picture
Using axes
• Now it would be nice if there was some way to check the position of
the point when it is on the grid
• If we had an object on each of the axes we could check the points
position in relation to those
• Luckily, Alice has an Axes object. Go the shapes folder and add axes.
• Move them so the green arrow (which looks like a dot right now) is
right at the origin
• Turn it so the blue arrow points up in the direction of the y axis and
the red arrow points right in the direction of the x axis.
Positioning
• Tilt the axes back until the green arrow is flat and pointing
up like in the picture
• Go to the quad view to position it better
• It is very important that the axes are aligned with the axes
on the grid. This will help with plotting points later
• While you are in the
quad view double check
that the point is at the
same level as the grid
(not above or below it)
This will be easiest to see
in the from the right and
from the front views
Ok button
• Go back to single view and in the local gallery
click create 3D text and type “OK”
• Rename the 3D text “OK” and position it to
the left of the grid like in the picture
• Change the Color to Blue
Setting up Methods
• Click done
• Under the world methods tab click create new
method. Call it “checkPt”
• Click create new event and select when the
mouse is clicked on something. Change
anything to OK and nothing to checkPt
Variables
• Click create new variabl in the new checkPt method,
name it “x” and select number for the type
• Create another number variable named “y”
• These will be the coordinates of the point
• Drag the variable x into the
do nothing. Select set
value and 1 for now.
• Do the same thing for y
Calculating the Distance
• Click on point in the object tree and
under the functions tab find distance
to the right of. Click and drag that
into the x set value. Select axes, up,
the entire up. Now find distance
above and drag it into y set value
Select axes, right, the entire right.
•
Converting
Units
A units length in Alice is probably not the same as one unit on
the grid. So we need to check how those units relate to each
other.
• At the bottom of the screen, find print. Drag it below the
other two lines
• Select object,
expressions, x
• Do the same thing
for y
• This will display the values for x and y at the bottom of the
screen
• The print method can be very helpful when testing code and
checking the values of variables
Play
• Click play
• Drag the point onto
the grid and click ok.
• The coordinates should
be displayed at the
bottom of the screen.
They are probably
incorrect right now but
we will change that.
• Move the point and click ok again. The coordinates
should be different now.
• Position the ball right at the origin and click ok.
Adjusting X
• Make note of what x is (rounded to the second digit) at the
origin. For me it says .05. This number is how much we need
to adjust the checkPt method for x.
• Click the white arrow between the two mores in the x set
value line. Select math, and select –. Click other and type
the number. Make sure if your number was negative, you
type a negative number.
Adjusting X
• Now play your world again and see what x it gives
you the origin. It should be about 0. It doesn’t need
to be exact, especially since you probably didn’t put
the point exactly in the center anyways. The first two
digits after the decimal should be 0.
• Try moving the point around and putting it back at
the center a few times. It should give you negative
number very close to zero sometimes and sometimes
a positive one.
• Now we have the origin set up correctly for x. Try
moving the point to the right. When you click ok, the
x value will probably be too small. This is because of
the difference in unit sizes. We will have to multiply
the distance by a number to take that into account.
• Check what number it gives you at a certain point. Use that
number to decide what to multiply by. For example, when I put
it at the 6, it gives me an x value of about 1. If I want to this to
be a 6 I need to multiply by 6
• Click the arrow before the last more. Select math, *, other.
Type the number you want to try
Adjusting X
• Now test it again. It is best to try it far away from the
origin because you will be able to see the error
easiest there.
• You might need to change your multiplying number
slightly to make it more accurate. Try some different
numbers until you find one that works. It should give
you between 5.9 and 6.1 when it is at 6. I changed
my number to 5.4.
• Try moving it to some different points and make sure
it still works for those x values.
Adjusting Y
• Now do the same thing for y
• Check the number it gives you at the origin. Subtract that
number.
• First two digits should be zero at the origin
• Check what it gives you at other spots. Find
a number to multiply by.
• Now both x and y should be working
• In the properties tab of axes set visible to
false. This will make that axes invisible.
Adding Instructions
• Now let’s change it so the teacher says what point you should
graph
• Click on the world.my first method tab. Drag in the teacher
say method. Type “plot a point by dragging the blue ball to
the correct coordinates”.
• Make a copy of that line and change the text to “first plot (2,5)
then click ok”
• Now we want to create two world variables to store this
coordinate, one for the x and one for the y
Create world variables for the coordinates
• Under the world properties tab click create new
variable. Call it “xGoal” and select number
• Create another number variable and call it yGoal.
• Drag both of these new variables into my first
method and set xGoal to 2 and yGoal to 5
Checking the Values
• Click the world.checkPt tab in the method editor
• We want this method to compare x and y (where the
blue point is) to xGoal and yGoal. However we can’t
just check to see if they are equal . For example, if
the point is at (1.9,5.2) that is close enough that we
should count it as good.
• Let’s have it allow you to be up to .5 units off.
• So we want to check to see if the difference between
the goal coordinate and the actual coordinate is less
than .5
Checking the Values: part 2
• Drag in an if/else and select true
• Go to the world functions tab and drag in a<b into the true.
Select 1 and .5. Now find absolute value of in the properties
and drag it to the 1
• Now go to the world properties tab and drag in xGoal to the 1.
Click the arrow next to it and select math xGoal, expressions, x
• Drag the if block to the clipboard and put the copy in the first
do nothing
• Drag in y where it says x and yGoal where it says xGoal.
Congratulating the Player
• If both the x and y are close enough we want the teacher to
congratulate the player.
• Drag in teacher say to the first do nothing. Click other and
type “Good Job”
• Make two copies of that line and move them to each of the
elses. Change the text for both to “Try again”
• Since we are done testing the program you can delete the
print x and print y lines so the values won’t be displayed at
the bottom of the screen.
• See the next slide for a screen shot
• picture
Adding more points
• Lets modify our program now so the teacher tells the player
multiple points to plot
• We will need to change xGoal and yGoal when there is a new
point to plot
• Go back to the my first method tab. Go the world properties
tab. Drag in xGoal, select set value. Type 3 and click ok.
• Now do the same thing with yGoal
but type 1.
• Go to the teacher methods and
drag in say. Type “Plot (3,1)”
• If you click play you will notice that
the teacher gives the second set of
instructions before you have
plotted the first point.
Waiting
• We need to put something in between the two sets of instructions
to make him wait.
• We need some way for Alice to keep track of whether the player is
ready to plot the next point.
• Let’s create a variable for that. Go to the world properties tab and
click create new variable
• Type “done” for the name.
• We want this variable to have two
possible values. Because the player
can either be “done” or “not done”. A
boolean variable would work well for
this because it has two possible
values”: true and false.
• Click boolean and set the value to
false.
Setting the variable
• Done should be false at the beginning. Then once
the point has been plotted we want to change it to
true.
• Go to the checkPt tab. When the point is in the
correct spot, we want to set done to true.
• Drag done right below the teacher say “Good Job!”
line. Select set value, true.
Using the variable to wait
• Go back to my first method
• Now while the player is NOT done we want to wait
• Drag in a while before the second xGoal set value.
Select expressions, world.done.
• Now click world.done and select logic, not done
• Now while done is false, it
will continue to do nothing.
Once done changes to true,
it will come out of the while
loop and set the new
coordinates
Adding more points
• You can play your world now and see that it
works for two points.
• If you want to add more, you only need to
change the code in my first method.
• For each point you will need four parts shown
in the picture below
Finished
• Congratulations! You are done with this
tutorial.
• The next slide has an extra exercise you can
do.
• This technique can be used for different
worlds in which the player has to graph
points.
• On our website you can find a sample world
using this technique for a world where the
player learns how to plot a line
Extra Exercise
• Modify your world so that a random
coordinate is generated each time.
• You will need to set xGoal and yGoal to two
random numbers. You can find random
number in the world function tab.