## 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

## Preface

### General

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.

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.

### Viewing tip

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.

#### Figures

• Figure 1. Screenshot of the sprite chasing the mouse pointer.
• Figure 2. Screenshot view of the program code for Perspective03.
• Figure 3. Five costumes for the sprite named Boy.

#### Listings

• Listing 1. Class variables and overall statistics.
• Listing 2. Statistics for the Stage.
• Listing 3. Costumes for the sprite named Boy.
• Listing 4. Initialization of the sprite named Boy.
• Listing 5. Beginning of the animation loop.
• Listing 6. Hide the sprite when out of bounds.
• Listing 7. Set stepSize and overall size based on y-position.
• Listing 8. Sprite moves through one costume change.
• Listing 9. Complete listing of the program named Perspective03.

### Supplementary material

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.

## General background information

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.

## Preview

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.

## Discussion and sample code

I will use two views of the program code as in the previous lesson.  The screenshot view of the script that belongs to the sprite named Boy is shown in Figure 2.

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:

• Switch to an initial costume.
• Position the sprite near the lower-left corner of the Stage.
• Cause the sprite to turn to face the viewer's right.
• Set the value of the variable used as an overall scale factor (scale) to a value that is appropriate for this animation.
• Set the distance that the sprite will move forward at each costume change (stepSize).
• Make the sprite visible.

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.

## Run the program

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.

## Summary

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.

## Resources

### Previous lessons in this series

• 100 Computer Programming for Homeschool Students - Getting Started
• 102 Computer Programming for Homeschool Students - Memory, Variables, and Literals
• 104 Sequence, Selection, and Loop Structures
• 106 Arithmetic Operators
• 108 Relational Operators
• 110 Logical Operators
• 112 The for (repeat) Loop
• 114 Loop Structures using the forever, forever if, and repeat until Blocks
• 120 Fun with Scratch, the StarDoors Animation
• 122 Fun with Scratch, Perspective

## Complete program listing

A complete listing of the program explained in this lesson is shown in Listing 9.

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.