Distance to Mouse — Scratch L2

Where this arc is heading: a chatty pet that senses touches, colours, the mouse and the keyboard — then asks your name and greets you in Bahasa or English. Today adds the pet's sense of distance.

Learning Goals 3 min

By the end of this lesson you will be able to:

Find distance to [mouse-pointer v] in the Sensing palette and explain that it's a round reporter — it gives back a number (in pixels), not a yes/no answer.
Pick anything from the dropdown — mouse-pointer or any other sprite — and read the pixel distance between this sprite's centre and that thing's centre.
Combine the number with () < () to make a boolean — e.g. (distance to [mouse-pointer v]) < (50) — and use it in an if-then for "near vs far" reactions.

Warm-Up — touch isn't enough 7 min

So far every Sensing block you've met has been a yes/no: am I touching the edge? Touching the ball? Touching black? Useful — but blunt. The cat doesn't know how close the mouse is until the moment they touch. Until that instant, the cat is blind.


when flag clicked
forever
  if <touching (mouse-pointer v) ?> then
    say [Found you!] for (1) seconds
  end
end

A cat that yells "Found you!" the instant the mouse pointer hits it. Until then, total silence.

Imagine you want the cat to whisper "warmer…" when you're close, "colder…" when you're far. Could you do that with just touching?

Reveal the answer

No — touching only knows two states (on or off). To get a smooth "how close" feeling you need a number: 5 pixels away is very different from 200 pixels away, but plain touching can't tell them apart — they're both "not touching". Today's reporter gives you that number directly.

This lesson is the jump from boolean sensing (hexagons, true/false) to numeric sensing (round reporters, real numbers you can compare, store, or display). The Stage stops being yes-or-no and starts being a ruler.

New Concept — distance to (thing) 15 min

Open the light-blue Sensing palette. Scroll past the touching blocks. You'll find a round reporter — not a hexagon — with a dropdown:


(distance to [mouse-pointer v])

A round (oval) reporter. Round shape means "this gives you back a number".

Round vs hexagon — a quick reminder

Shape is meaning in Scratch:

Hexagon = boolean reporter = answers true or false (e.g. touching color [#000000] ?).
Round = value reporter = answers a number or a piece of text (e.g. x position, timer).

You can drop a round reporter into any round-shaped slot — the inside of say (Hello!), the input box of move (10) steps, the operands of () + (). Distance-to fits anywhere a number fits.

What's in the dropdown

Open the dropdown next to "mouse-pointer". You'll see:

mouse-pointer — the live position of the mouse cursor on the Stage.
Every other sprite in your project, by name — Ball, Goalie, Apple, whatever you've added.

Pick one. The reporter now answers "how many pixels away is that thing's centre from my centre, right now?". It updates every frame — drag the sprite or the mouse and the number changes smoothly.


(distance to [Ball v])

Same block, dropdown pointed at a sprite called "Ball". Reports the pixel distance from this sprite's centre to the ball's centre.

Pixels, centres, and what the number means

The number is always positive — distance can't be negative.
The unit is pixels on the Stage. The Stage is 480 wide and 360 tall, so the maximum possible distance is around 600.
It measures from centre to centre. Two sprites can look like they're touching and still report a distance of 20 or 30, depending on their sizes.
The reporter shows a tiny rounded number if you click it in the palette — try it. Move your mouse around and watch the value change.

Showing the number — the watcher

Tick the checkbox next to the reporter in the palette. A small watcher appears on the Stage showing the live value. Now move your mouse — the number updates in real time. This is the cheapest debugging trick in Scratch.

Turning the number into a boolean

To use the distance inside an if-then, you need a yes/no answer — a hexagon. Wrap the round reporter in a comparison operator from the green Operators palette:


<(distance to [mouse-pointer v]) < (50)>

"Is the mouse closer than 50 pixels?" The whole expression is a hexagon — it fits in any if-then diamond.

The full pattern looks like this:


when flag clicked
forever
  if <(distance to [mouse-pointer v]) < (50)> then
    say [Warmer!] for (0.5) seconds
  end
end

"If the mouse pointer is within 50 pixels of me, whisper 'Warmer!'" — a smooth proximity hint, not a touch-only trigger.

Three layers now: a round number from Sensing, wrapped in a hexagon comparison from Operators, plugged into the diamond of an if-then in Control. This is the standard recipe for any numeric question you'll meet for the rest of Scratch.

Common mistakes

Trying to drop a round reporter into a diamond slot. Scratch refuses — round can't fit hexagon. You need to wrap it in a comparison operator first: () < () or () = ().
Confusing centre-to-centre with edge-to-edge. Two sprites might be visibly overlapping yet still report a distance of 40 because their centres are 40 pixels apart. For "are we actually touching", use touching (Sprite v) ? — that's edge-aware.
Picking the wrong sprite in the dropdown. If you ask for distance to a sprite that's been deleted or renamed, the dropdown shows the old name in brackets and the reporter returns 10000 — a stand-in for "no such thing". Open the dropdown and pick again.
Putting the threshold in the wrong place. (50) < (distance...) means "is 50 less than the distance" — true when far, false when near. The opposite of what you usually want. Read the comparison left-to-right.

Worked Example — the hot-and-cold cat 14 min

One sprite, no extra art, eight steps. The cat-pet reacts smoothly to how close your mouse is — three zones: cold, warm, hot.

Stage plan. The cat-pet (see the ✏️ badge) sits at the centre. The closer the mouse pointer gets, the "hotter" the pet feels — under 50 pixels it perks up, beyond 150 it dozes.

Step 1 — New project, position the cat

Fresh Scratch project. Drag the cat to roughly the middle of the Stage and click Stop if anything is running.

Step 2 — Eyeball the live distance

In the Sensing palette, find distance to [mouse-pointer v] and tick its checkbox. A small watcher labelled "distance to mouse-pointer" appears on the Stage. Move your mouse — the number swings between roughly 0 (mouse over the cat) and 500+ (mouse in a far corner).

Step 3 — Pick three thresholds

Decide what counts as cold, warm, and hot. Try:

Hot: distance < 50
Warm: distance < 150 (but not hot)
Cold: anything else

Step 4 — Build the first check: hot


when flag clicked
forever
  if <(distance to [mouse-pointer v]) < (50)> then
    say [Hot!] for (0.2) seconds
  end
end

Click the flag. Move your mouse near the cat. "Hot!" fires when you're within 50 pixels.

Step 5 — Add the warm check, in the same loop

Drop a second if-then under the first, inside the same forever:


when flag clicked
forever
  if <(distance to [mouse-pointer v]) < (50)> then
    say [Hot!] for (0.2) seconds
  end
  if <(distance to [mouse-pointer v]) < (150)> then
    say [Warm.] for (0.2) seconds
  end
end

Both checks run every frame. Watch what happens when you're close — the cat keeps switching between "Hot!" and "Warm." because both are true. Step 7 fixes that.

Step 6 — Add the cold fallback


when flag clicked
forever
  if <(distance to [mouse-pointer v]) < (50)> then
    say [Hot!] for (0.2) seconds
  end
  if <(distance to [mouse-pointer v]) < (150)> then
    say [Warm.] for (0.2) seconds
  end
  if <(distance to [mouse-pointer v]) > (150)> then
    say [Cold...] for (0.2) seconds
  end
end

Three checks, three reactions. Notice both () < () and () > () in use.

Step 7 — Notice the overlap problem

Click the flag and hover near the cat. The bubble flickers — distance 30 is both "less than 50" and "less than 150", so both messages fire and overwrite each other every frame. You'd fix this properly with if-then-else from L02-07 (only one branch wins). For today, change the warm check to:


if <((distance to [mouse-pointer v]) > (50)) and ((distance to [mouse-pointer v]) < (150))> then
  say [Warm.] for (0.2) seconds
end

"Warm = farther than 50 AND closer than 150." The <> and <> from Operators glues two hexagons into one.

Step 8 — Save it

Project name: L2-15-Hot-Cold-Cat. File → Save to your computer. Untick the distance watcher when you've stopped debugging — keep it tickable for the next project.

What you just built: a continuous-feedback game — the cat doesn't wait for a touch to react. The world has a ruler now, and your scripts can use it. Every "magnet" effect, "danger zone", "stealth radius", or "follow at a distance" behaviour you'll write is built from distance-to plus a comparison.

Try It Yourself — three distance drills 15 min

🟢 Easy

Goal: A "personal space" cat. Make the cat say Too close! for half a second whenever the mouse pointer is within 30 pixels of it. Otherwise, total silence.


when flag clicked
forever
  if <(distance to [mouse-pointer v]) < (30)> then
    say [Too close!] for (0.5) seconds
  end
end

The threshold is small — 30 pixels — so the mouse really has to be right on top of the cat to fire.

Think: Turn on the distance watcher and check what number you see when the bubble fires — it should always be under 30. That's the watcher being a free check on your logic.

🟡 Medium

Goal: A magnet sprite. Pick the cat plus add a small Apple. The apple chases the mouse, but only when the mouse is within 100 pixels — otherwise it sits still. Move smoothly toward the pointer one pixel at a time.


when flag clicked
forever
  if <(distance to [mouse-pointer v]) < (100)> then
    point towards (mouse-pointer v)
    move (2) steps
  end
end

On the apple. point towards (mouse-pointer v) aims the apple; move (2) steps nudges it. Only happens inside the magnet's 100-pixel radius.

Think: Try changing 100 to 50 and feel the difference — a stricter magnet only grabs the apple when you're really close, almost like a magnet's real falloff.

🔴 Stretch

Goal: A danger-zone game between two sprites — Priya the player and a Bat enemy. Priya follows the mouse forever. The Bat sits still in the middle. The closer Priya gets to the Bat, the louder the say bubble — shhh when far, SHHH! when very close. Use distance to the Bat sprite, not the mouse.


when flag clicked
forever
  go to (mouse-pointer v)
  if <(distance to [Bat v]) < (40)> then
    say [SHHH!] for (0.2) seconds
  end
  if <((distance to [Bat v]) > (40)) and ((distance to [Bat v]) < (120))> then
    say [shhh] for (0.2) seconds
  end
end

On Priya. Two distance bands, two different "shhh" volumes. The Bat sprite needs no script at all — Priya is the one asking the question.

Think: The dropdown isn't limited to mouse-pointer. Anything in your Sprite list is a valid target — that's how you make sprites aware of each other's positions, smoothly, without waiting for a touch.

Mini-Challenge — the cat that ignores the mouse 5 min

"Daniel's never-warm cat"

Daniel built the personal-space cat from the Easy task. But when he clicks the flag and waves his mouse all over the cat, the bubble never appears. The distance watcher shows tiny numbers like 5 and 12 — clearly less than 30. So why doesn't the bubble fire? His script:


when flag clicked
forever
  if <(30) < (distance to [mouse-pointer v])> then
    say [Too close!] for (0.5) seconds
  end
end

Daniel's stack. Compare it carefully with the Easy task's version — what's flipped?

What's wrong, and what does the bubble actually say when?

Reveal one valid solution

Daniel swapped the operands of the () < () comparison. His block reads "30 is less than the distance" — true when the distance is greater than 30, i.e. when the mouse is far. So the bubble actually fires when the mouse is far away, not close. Daniel had it backwards.

If he never noticed the bubble it's because his test waves kept the mouse close to the cat the whole time — distance under 30 = block returns false = no bubble. Move the mouse to a corner and the bubble suddenly appears all the time.

The fix is to swap the operands:


when flag clicked
forever
  if <(distance to [mouse-pointer v]) < (30)> then
    say [Too close!] for (0.5) seconds
  end
end

The deeper lesson: read comparisons left-to-right, exactly like maths. A < B means "A is smaller than B". The distance reporter should usually go on the left if you're checking "is the distance small enough" — that's the natural English order. The instant you flip it, you've inverted the meaning, and Scratch happily runs the wrong logic without complaint.

Recap 3 min

You jumped from boolean sensing to numeric sensing. distance to [mouse-pointer v] is a round reporter — it gives you a pixel-distance number, not a true/false answer. Pick anything from its dropdown (mouse-pointer or any sprite) and the number updates every frame. To use it inside an if-then, wrap it in a comparison operator like () < () to turn the number into a hexagon. That recipe — round-into-hexagon-into-diamond — is how every smooth, distance-aware behaviour works: magnets, danger zones, follow-at-distance, hot-and-cold games. The watcher checkbox is your free debugging window.

Distance to (thing): A Sensing round reporter giving the pixel distance between this sprite's centre and the centre of the chosen target (mouse-pointer or any named sprite).
Round reporter: An oval-shaped block that returns a number (or text). Fits anywhere a number/text input is expected. Compare to hexagonal (boolean) reporters.
Threshold: The chosen number you compare the distance against — e.g. 50, 100. Smaller thresholds mean stricter "close" checks; larger means looser.
Comparison operator: A green Operators block — () < (), () = (), () > () — that turns two numbers into one boolean. The bridge from numeric sensing to conditional control.
Watcher: The small live-value display on the Stage that appears when you tick a reporter's checkbox in the palette. Free debugging tool for any round reporter.
Centre-to-centre: The kind of distance the reporter measures — between sprites' centre points, not their visible edges. Two sprites can look like they touch and still report a non-zero distance.

Homework 2 min

The KL Treasure Hunt. A hot-and-cold puzzle game.

Backdrop: pick the Metro backdrop from the library (or any city scene that hints at KL).
Sprite 1: Treasure — paint a small yellow star. On flag clicked, send it to a random spot: go to x: ((pick random (-200) to (200))) y: ((pick random (-150) to (150))), then hide. The treasure is invisible — that's the point.
Sprite 2: Aisyah — pick any small character. She follows the mouse: forever + go to (mouse-pointer v).
On Aisyah, add a second script that gives distance-based hints to the Treasure:
- Distance < 30: say Found it! for 1 second, then stop [all v].
- Distance < 80 (and not < 30): say Hot! for 0.3 seconds.
- Distance < 160 (and not < 80): say Warm. for 0.3 seconds.
- Otherwise: say Cold... for 0.3 seconds.
Bonus: when "Found it!" fires, show the Treasure sprite so the player sees what they were hunting.

Save as HW-L2-15-KL-Treasure.sb3. Play it three times — the random start makes every game different.

Bring back next class:

The .sb3 file.
Your fastest "Found it!" time, in seconds.
Your answer to: "What happens if you remove the 'and not < 80' guard from the Warm check? Try it and describe the bubble's behaviour near the treasure."

Heads up for next class: SCR-L02-16 meets mouse down? plus mouse x and mouse y — three more Sensing reporters that finish off the "what is the mouse doing" toolkit. One boolean, two round.