Fun with Scratch, Follow the Mouse
Learn how to cause a sprite to walk toward the mouse pointer and freeze in place if it catches the mouse pointer. Also learn how to create a 3D effect with the sprite becoming smaller and smaller as it walks toward the horizon.
Published: May 26, 2008
By Richard G. Baldwin
Homeschool Programming Notes # 124
Part of a series
This tutorial lesson is part of a continuing series that is designed specifically for teaching computer programming to homeschool students and their parents. However, everyone is welcome to use the lessons to learn computer programming, whether homeschool or not.
Time to have some fun
If you have worked through the early lessons in the series, you have been working hard to learn some of the fundamentals of programming as implemented in Scratch. It's time to take a break and have some fun. This lesson departs from teaching fundamentals and teaches the fun side of Scratch.
Follow the mouse pointer
In this lesson, you will learn how to write an interactive animation that places a walking sprite on a moonscape. The sprite walks toward the mouse pointer and freezes in place if it catches the mouse pointer. It resumes walking again when the mouse pointer is moved.
Perspective computations are used to create a 3D effect with the sprite becoming smaller and smaller as it walks away from the camera and disappearing at the horizon.
I recommend that you open another copy of this document in a separate browser window and use the following links to easily find and view the figures and listings while you are reading about them.
I recommend that you also study the other lessons in my extensive collection of online programming tutorials. You will find a consolidated index at www.DickBaldwin.com.
In the previous lesson (see Resources), I presented and explained a non-interactive animation that tells the story of a young boy who is lost on the moon. He wanders around trying to find his way. As he wanders, he gets further and further away from the camera. Various programming tricks were used to create an illusion of perspective.
I also introduced a new text format for explaining code that I hadn't used in earlier lessons. In particular, I provided two different views of the program code. One view was a screen shot of the blocks used to construct the scripts for a sprite in the program. The other view was a text representation of the entire project.
This is an interactive animation similar to the non-interactive animation in the earlier program named Perspective01. This animation places a walking boy (sprite) on a moonscape. The sprite walks toward the mouse pointer. If the mouse pointer leaves the Stage, the sprite will follow the mouse pointer off the stage or off the surface of the moon at the far horizon. (At the far horizon, the sprite is so small that you can barely tell what it is doing.)
If you park the mouse pointer in one spot on the surface of the moon, the sprite will walk to the pointer and freeze in place at that location. It will resume walking again when the mouse pointer is moved.
Perspective computations are used to cause the sprite to appear large and to take long strides when it is close to the camera and to appear small and to take small strides when it is further from the camera. Figure 1 shows a screenshot of the sprite chasing the mouse pointer.
Figure 1. Screenshot of the sprite chasing the mouse pointer.
|
|
An online version is available
I have posted my version of this program online (see Resources) so that you can either run it or download it from there. I recommend that you run it at this time to familiarize yourself with its behavior.
Figure 2. Screenshot view of the program code for Perspective03.
|
|
A complete text listing of the script that belongs to the sprite named Boy is shown in Listing 9.
Will explain in fragments
As is my custom, I will break the code down and explain it in fragments. Listing 1 shows the class variables belonging to the program as well as some of the overall statistics for the program. Comments show the purpose of six of the variables.
Listing 1. Class variables and overall statistics.
Class Variables:
bX //Boy x-coordinate
bY //Boy y-coordinate
mX //Mouse x-coordinate
mY //Mouse y-coordinate
dX //Difference in x
dY //Difference in y
scale
stepSize
--------
Totals:
Sprites: 1
Stacks: 1
Unique costumes: 6
Unique sounds: 0
--------
|
Statistics for the Stage
As you can see from Listing 2, the Stage is very simple. It has no scripts and only one costume, which is the moonscape shown in Figure 1.
Listing 2. Statistics for the Stage.
Sprite: Stage
Costumes (1):
moon (480x360)
No stacks.
|
Costumes for the sprite named Boy
Listing 3 shows that the sprite named Boy has five costumes.
Listing 3. Costumes for the sprite named Boy.
Sprite: Boy
Costumes (5):
boy4-walking-a (110x180)
boy4-walking-b (110x180)
boy4-walking-c (110x180)
boy4-walking-d (110x180)
boy4-walking-e (110x180)
|
Five costumes for the sprite named Boy
Figure 3 shows the five costumes that belong to the sprite named Boy.
Figure 3. Five costumes for the sprite named Boy.
|
|
You should recognize these five costumes as the walking costumes. In particular, they can be used to produce the illusion that the boy is walking.
Initialization of the sprite named Boy
Listing 4 indicates that the sprite named Boy has only one script.
Listing 4. Initialization of the sprite named Boy.
Stacks (1):
when green flag clicked
switch to costume "boy4-walking-b"
go to x: -200 y: -79
point in direction 90
set scale to 100 / 180
set stepSize to 10
show
|
Listing 4 also causes the following actions to take place when the user clicks the green flag:
Beginning of the animation loop
Listing 5 shows the beginning of an animation loop that will execute the same code 1000 times and then terminate.
Listing 5. Beginning of the animation loop.
repeat 1000
set mX to 240 + mouse x
set mY to 90 - mouse y
set bX to 240 + "x position" of "Boy"
set bY to 90 - "y position" of "Boy"
set dX to bX - mX
set dY to bY - mY
|
The Stage is 480 units wide and 360 units tall. Normally, the origin of the Stage's Cartesian coordinate system has its origin at the center. However, for this program, some of the calculations are easier if the origin is at the upper-left corner of the Stage.
The first four set statements in Listing 5 compute the x and y-coordinate values for the boy and for the mouse with the origin shifted to the intersection of the horizon and the left edge of the Stage (see Figure 1.).
The last two set statements compute the distances along the x and y-axes from the current location of the boy to the current location of the mouse pointer.
Hide the sprite when out of bounds
Listing 6 hides the sprite whenever it follows the mouse pointer beyond the left, bottom, or right edges of the Stage, or when it follows the mouse beyond the horizon. (The value of 0.1 guarantees that the sprite will be invisible when it reaches the horizon.)
Listing 6. Hide the sprite when out of bounds.
if (bY < 0.1) or (bY > 360)
or (bX < 0) or (bX > 480)
hide
else
show
|
Set stepSize and overall size based on y-position
Listing 7 causes the overall size of the sprite and the distance that the sprite moves forward with each costume change to increase with increasing distance from the horizon toward the camera.
Listing 7. Set stepSize and overall size based on y-position.
set stepSize to bY / 18
set size to bY * scale%
|
In other words, when the sprite is at the horizon, its overall size and the stepSize are both zero. Those two sizes increase as the sprite approaches the camera to a fairly large size as shown in Figure 1.
Sprite moves through one costume change
Listing 8 causes the sprite to move through one costume change, but only if the distance from the sprite to the mouse pointer is greater than five units along either the x-axis or the y-axis.
Listing 8. Sprite moves through one costume change.
if ("abs" of dX > 5) or ("abs" of dY > 5)
point towards "mouse-pointer"
move stepSize steps
next costume
wait 0.2 secs
|
In other words, if the mouse pointer is parked and the sprite has caught up with it, the sprite won't execute another costume change until the user moves the mouse.
That's a wrap
Now you know how to write a program that will cause a walking sprite to follow along behind the mouse pointer.
I encourage you to use the information provided in Listing 9 to write and run this program. Experiment with the code, making changes, and observing the results of your changes. Make certain that you can explain why your changes behave as they do.
I have shared my version of this program online (see Resources) so you can either run or download it from there.
In this lesson, you learned how to write an interactive animation that places a walking sprite on a moonscape. The sprite walks toward the mouse pointer and freezes in place if it catches the mouse pointer. It resumes walking again when the mouse pointer is moved.
Perspective computations are used to create a 3D effect with the sprite becoming smaller and smaller as it walks away from the camera.
Listing 9. Complete listing of the program named Perspective03.
Project: Perspective03
Author: Dick Baldwin, 05/20/08
Scratch: 1.2.1 (6-Dec-07)
Notes:
Click the green flag to start or restart this program.
This is an interactive animation. This animation places a
walking boy (sprite) on a moonscape. The sprite walks
toward the mouse pointer. If the mouse pointer leaves the
Stage, the sprite will follow the mouse pointer off the
stage or off the surface of the moon at the far horizon.
If you park the mouse pointer in one spot on the surface
of the moon, the sprite will walk to the pointer and
freeze in place at that location. It will resume walking
when the mouse pointer is moved.
Perspective computations are used to cause the sprite to
appear large and to take long strides when it is close to
the camera and to appear small and to take small strides
when it is further from the camera.
Class Variables:
bX
bY
dX
dY
mX
mY
scale
stepSize
--------
Totals:
Sprites: 1
Stacks: 1
Unique costumes: 6
Unique sounds: 0
--------
Sprite: Stage
Costumes (1):
moon (480x360)
No stacks.
--------
Sprite: Boy
Costumes (5):
boy4-walking-a (110x180)
boy4-walking-b (110x180)
boy4-walking-c (110x180)
boy4-walking-d (110x180)
boy4-walking-e (110x180)
Stacks (1):
when green flag clicked
switch to costume "boy4-walking-b"
go to x: -200 y: -79
point in direction 90
set scale to 100 / 180
set stepSize to 10
show
repeat 1000
set mX to 240 + mouse x
set mY to 90 - mouse y
set bX to 240 + "x position" of "Boy"
set bY to 90 - "y position" of "Boy"
set dX to bX - mX
set dY to bY - mY
if (bY < 0.1) or (bY > 360)
or (bX < 0) or (bX > 480)
hide
else
show
set stepSize to bY / 18
set size to bY * scale%
if ("abs" of dX > 5) or ("abs" of dY > 5)
point towards "mouse-pointer"
move stepSize steps
next costume
wait 0.2 secs
end
|
Copyright 2008, Richard G. Baldwin. Reproduction in whole or in part in any form or medium without express written permission from Richard Baldwin is prohibited.
Richard has participated in numerous consulting projects and he frequently provides onsite training at the high-tech companies located in and around Austin, Texas. He is the author of Baldwin's Programming Tutorials, which have gained a worldwide following among experienced and aspiring programmers. He has also published articles in JavaPro magazine.
In addition to his programming expertise, Richard has many years of practical experience in Digital Signal Processing (DSP). His first job after he earned his Bachelor's degree was doing DSP in the Seismic Research Department of Texas Instruments. (TI is still a world leader in DSP.) In the following years, he applied his programming and DSP expertise to other interesting areas including sonar and underwater acoustics.
Richard holds an MSEE degree from Southern Methodist University and has many years of experience in the application of computer technology to real-world problems.
-end-
