Colour Touching Colour — 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 sharpens the pet's colour sense to a single body part.

Learning Goals 3 min

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

Find color [#FF0000] is touching [#0000FF] ? in the Sensing palette and explain that the first colour must be on the asking sprite and the second can be anywhere else.
Use both eyedroppers to pick one colour from your own costume and one from somewhere else on the Stage.
Decide when to use this picky reporter instead of the plain touching color from last lesson — e.g. when only the tip of a paintbrush, sword, or spaceship should trigger the collision.

Warm-Up — when the whole cat is the bumper 6 min

In L02-13 you taught the cat to bump off any black pixel. That works for maze walls — but watch what happens when the colour you care about is on the cat itself.


when flag clicked
forever
  go to (mouse-pointer v)
  if <touching color [#0000FF] ?> then
    say [Hit!] for (0.5) seconds
  end
end

A cat that follows the mouse and shouts "Hit!" when it touches a blue square painted on the backdrop.

Imagine you now want only the cat's red nose (a small red dot on the cat's face) to count as the bumper — the rest of the cat shouldn't trigger anything. Could you do that with last lesson's block?

Reveal the answer

No. touching color [#0000FF] ? fires the instant any pixel of the cat — paws, tail, ears, anything — overlaps blue. The whole cat is the bumper. There's no way to say "only this one red dot on me should count". Today's lesson is the block that does let you say that.

Today's reporter is pickier. It asks: "is this colour, on me, touching that colour, anywhere else?". Two colour pickers. Two filters. One precise question.

New Concept — color is touching color? 15 min

Open the light-blue Sensing palette. Just below touching color [#000000] ? sits a longer cousin with two colour swatches:


<color [#FF0000] is touching [#0000FF] ?>

Two colour pickers. The first colour must be on the asking sprite. The second can be anywhere else on the Stage.

The two colours — strict roles

The order matters. Read the block left-to-right:

First swatch ("color is..."): a colour that must exist on this sprite's current costume. The block looks for pixels of this colour on you.
Second swatch ("...touching"): a colour that can be on any other sprite's costume or anywhere on the backdrop. The block looks for pixels of this colour anywhere else.

Then the reporter answers: "are any pixels of my first colour overlapping any pixels of the second colour, right now?". True or false — still a hexagon.

Compare with last lesson:

touching color [#0000FF] ? — any pixel of mine touching blue counts. The whole sprite is the sensor.
color [#FF0000] is touching [#0000FF] ? — only the red pixels of mine touching blue count. Only one part of the sprite is the sensor.

Both eyedroppers work the same way

Click either swatch and the same colour panel opens — sliders plus an eyedropper. For the first swatch (the on-me colour), click the eyedropper and pick a pixel on your sprite's own costume in the Costumes tab — or zoom in on the Stage and click that exact part of your sprite. For the second swatch (the target colour), eyedrop the wall, the other sprite, the floor — whatever you want to react to.


<color [#FF0000] is touching [#0000FF] ?>

After eyedropping: red picked from the cat's painted-on nose, blue picked from a square on the backdrop.

The classic paintbrush example

Imagine a paintbrush sprite — a long wooden handle with a small red tip. You want it to leave a trail only when the tip touches a blue target. With plain touching-colour, the handle would also trigger. With colour-touching-colour:


when flag clicked
forever
  go to (mouse-pointer v)
  if <color [#FF0000] is touching [#0000FF] ?> then
    say [Tip on target!] for (0.3) seconds
  end
end

Only the red tip touching the blue target fires the speech bubble. The brown handle is invisible to the question.

The block is doing the filtering for you. You didn't have to write any maths about where the tip is — the colour is the filter.

When to reach for it

Reach for colour-touching-colour whenever your sprite has multiple coloured regions and only one of them should count:

A sword sprite whose blade should hurt, but whose handle shouldn't.
A spaceship with a green nose-cone and grey wings — only the nose-cone collects pickups.
A character with feet drawn in a unique colour, so only the feet trigger floor sensors (not the head or arms).
A pen-marker game where touching the felt tip changes ink colour but touching the cap doesn't.

Common mistakes

Putting the wrong colour first. If the first colour isn't actually present on the asking sprite's costume, the block is always false — Scratch can't find any "on-me" pixels to test against. Open the Costumes tab, eyedrop from there.
Two very similar colours. If your sprite has a red of #FF0000 and your target also has red edges from anti-aliasing, the block may fire when red touches red somewhere unexpected. Pick distinct colours.
Forgetting which sprite is asking. The first colour is always read from the sprite running the script. Move the script to a different sprite and the first colour now has to exist on that sprite.
Reaching for it when plain touching-colour would do. If the whole sprite should be the sensor (a maze player against walls, a ball against the floor), plain touching color is shorter and clearer. Use colour-touching-colour only when you genuinely need the filter.

Worked Example — the red-nose target trainer 14 min

One pet with a painted-on red collar-spot, one blue target square, eight steps. Only the collar scores.

Stage plan. The cat-pet (see the ✏️ badge) follows the mouse over a blue target. Only its red collar-spot touching the blue counts — its paws and tail are ignored.

Step 1 — Pick a sprite and add a red spot

New project. Click the cat. Open the Costumes tab (top-left). Pick the bitmap Circle tool, choose a pure red fill (#FF0000), and paint a small filled red circle on the cat's face — the cat's "nose". Keep it small, around 20 pixels across.

Step 2 — Paint a blue target on the backdrop

Click the Stage (bottom-right), open its Backdrops tab. Pick the Rectangle tool and a pure blue (#0000FF). Draw a medium blue square somewhere on the Stage — the target.

Step 3 — Make the cat follow the mouse

Click the Code tab, click the cat in the Sprite list. Build:


when flag clicked
forever
  go to (mouse-pointer v)
end

The cat now glues itself to the mouse pointer. Move your mouse and the cat follows.

Step 4 — Try plain touching-colour first (the "wrong" way)

Add a second script using last lesson's block:


when flag clicked
forever
  if <touching color [#0000FF] ?> then
    say [Hit!] for (0.3) seconds
  end
end

Eyedrop the blue from the target. Click the flag. Wave the cat over the target.

The cat shouts "Hit!" the moment any part of it — paw, tail, ear — touches the blue. Too easy. We want only the red nose to count.

Step 5 — Swap in the picky reporter

Delete that second script's if-block and replace it with the new colour-touching-colour:


when flag clicked
forever
  if <color [#FF0000] is touching [#0000FF] ?> then
    say [Bullseye!] for (0.3) seconds
  end
end

Eyedrop red from the cat's nose (first swatch) and blue from the target (second swatch).

Step 6 — Eyedrop carefully

Click the first swatch, click eyedropper, hover over the cat's red nose on the Stage, click. Then click the second swatch, eyedropper, click the blue target. Both swatches should now show their picked colours.

Step 7 — Click the flag and test

Wave the cat so its paw overlaps the blue square — no bubble. Wave the cat so its nose overlaps — "Bullseye!" pops up. Only the nose-on-target combination fires the speech bubble. The rest of the cat is now invisible to the question.

Step 8 — Save it

Project name: L2-14-Red-Nose-Target. File → Save to your computer.

The full assembled stack (on the cat)


when flag clicked
forever
  go to (mouse-pointer v)
end

when flag clicked
forever
  if <color [#FF0000] is touching [#0000FF] ?> then
    say [Bullseye!] for (0.3) seconds
  end
end

Two parallel scripts on the cat. One drives motion, one watches for nose-on-target.

What you just built: a target trainer that only counts hits with the right part of the sprite. The same idea underlies every "sword tip", "spaceship nose", or "feet on floor" mechanic.

Try It Yourself — three picky-collision drills 15 min

🟢 Easy

Goal: Take the worked example and add a yellow square on the backdrop next to the blue one. The cat's nose should react to both — say Blue! on blue, say Yellow! on yellow. The paws still shouldn't trigger either.


when flag clicked
forever
  if <color [#FF0000] is touching [#0000FF] ?> then
    say [Blue!] for (0.3) seconds
  end
  if <color [#FF0000] is touching [#FFFF00] ?> then
    say [Yellow!] for (0.3) seconds
  end
end

Two if-thens, two colour-touching-colour reporters, same first colour (the nose-red), different second colours. Eyedrop yellow from the backdrop.

Think: The first colour is the same in both checks — that's the "this part of me" filter. Only the second colour changes — that's "and which target?".

🟡 Medium

Goal: A paintbrush. Pick the Pencil sprite from the library (or paint a vertical brown handle with a small red tip yourself). Make the brush follow the mouse. Paint a wide blue stripe across the backdrop. The brush should say Painting! only when its red tip is on the blue, not when the brown handle passes over.


when flag clicked
forever
  go to (mouse-pointer v)
  point in direction (90)
  if <color [#FF0000] is touching [#0000FF] ?> then
    say [Painting!] for (0.2) seconds
  end
end

Eyedrop the brush's red tip pixel (first swatch) and the blue stripe (second swatch). Now only tip-on-blue triggers — handle-on-blue is silent.

Think: Pick distinct colours. If the brush handle is also reddish-brown, the eyedropper might pick something that also appears on the handle — and then handle-on-blue fires too. Use a pure red the handle doesn't share.

🔴 Stretch

Goal: A platformer-floor sense. Repaint the cat's two feet a unique colour — say bright magenta #FF00FF. Paint a solid green floor at the bottom of the Stage. Build a cat that falls forever (change y by (-3)) unless its magenta feet touch green, in which case it stops falling.


when flag clicked
go to x: (0) y: (100)
forever
  if <not <color [#FF00FF] is touching [#00FF00] ?>> then
    change y by (-3)
  end
end

"Fall unless my feet are on the floor." A not <> wraps the picky reporter — meet that block fully in L02-22. Use it here as written.

Think: If you'd used plain touching-colour, the cat would stop falling as soon as any part of it grazed the green — including its head poking up from below. Foot-only collision is what makes platformers feel right.

Mini-Challenge — the silent reporter 5 min

"Aljay's stubbornly-false brush"

Aljay built the paintbrush from the Medium task. He eyedropped the red tip, eyedropped the blue stripe, dropped both colours into the block. Clicked the flag. Waved the brush. Nothing. The reporter is always false. Even when the tip is clearly inside the blue, no "Painting!" bubble. His script:


when flag clicked
forever
  go to (mouse-pointer v)
  if <color [#0000FF] is touching [#FF0000] ?> then
    say [Painting!] for (0.2) seconds
  end
end

Aljay's stack on the paintbrush. The colours look right — why does it never fire?

Look carefully at the swatch order. What did Aljay swap, and how do you fix it?

Reveal one valid solution

Aljay swapped the two colours. The first swatch is blue and the second is red — so the block is asking "is the blue colour on me, the paintbrush, touching red anywhere else?". But there's no blue on the paintbrush — the brush is brown and red. The first colour can't be found on the asking sprite, so the reporter is always false. Always. Forever.

The fix is to swap the swatches back:


when flag clicked
forever
  go to (mouse-pointer v)
  if <color [#FF0000] is touching [#0000FF] ?> then
    say [Painting!] for (0.2) seconds
  end
end

Now the first colour (red) is on the brush (the tip), and the second (blue) is on the backdrop. The question makes sense again — and the bubble fires.

The deeper lesson: the first swatch is always "me", the second is always "anything else". If the order is wrong, the block is silent — it doesn't error, doesn't beep, just always returns false. Read the block left-to-right: "my colour is touching their colour?". Always your colour first.

Recap 3 min

You met the pickier cousin of touching-colour — color [#FF0000] is touching [#0000FF] ?. The first colour must exist on the asking sprite; the second can be anywhere else on the Stage. Together they ask "is this part of me touching that?". Use it when only one region of your sprite should count as the bumper — a paintbrush tip, a sword blade, a spaceship nose, a character's feet. Use plain touching-colour when the whole sprite is the sensor. The block doesn't error if you put the wrong colour first — it just silently returns false, so check your swatch order whenever a colour-touching-colour check refuses to fire.

Color [#A] is touching [#B] ?: A Sensing boolean reporter that returns true when pixels of colour A on the asking sprite overlap pixels of colour B anywhere else (other sprites or backdrop).
First swatch: The "on-me" filter. Must be a colour present on the asking sprite's current costume — otherwise the reporter is always false.
Second swatch: The "elsewhere" target colour. Can be on any other sprite or anywhere on the backdrop. Never matched against the asking sprite's own pixels.
Region sensor: A sprite with several coloured zones where one specific zone is the only one that should trigger collisions. Solved by colour-touching-colour, not plain touching-colour.
Picky reporter: Friendly nickname: any block that fires under narrower conditions than a similar simpler one. Useful when a project needs precision, not blanket detection.

Homework 2 min

The Teh Tarik Pourer. Build a precision-pour game.

Sprite 1: paint a teapot — most of it brown, with a small white dot at the very tip of its spout. The white is the "stream coming out" indicator.
Sprite 2: paint a cup with a clearly visible cyan rim around its top opening. Place it on the right side of the Stage.
The teapot follows the mouse: when flag clicked + forever + go to (mouse-pointer v).
Add a second script on the teapot that says Pouring! for 0.3 seconds only when its white spout-tip is over the cyan rim — use color [#FFFFFF] is touching [#00FFFF] ?.
It should not say "Pouring!" when the teapot's brown body crosses over the cup — that's a spill, not a pour. Test by waving the teapot all over the cup.

Save as HW-L2-14-Teh-Tarik.sb3.

Bring back next class:

The .sb3 file.
Your answer to: "What happens if you eyedrop the cup's cyan rim into the first swatch and the teapot's white into the second — but keep the script on the teapot? Predict, test, write it down."

Heads up for next class: SCR-L02-15 moves from booleans to numbers — distance to (mouse-pointer v) reports the actual pixel-distance between sprites. Round shape, not hexagon: a number you can compare, store, react to smoothly.