Sound-Reactive Animation — Scratch L4

Where this arc is heading — and where we arrive today: a Music Maker where the cat dances and pulses to a beat broadcast, a theme song plays underneath, and the whole project is polished and shared. You built this in 5 lessons.

Learning Goals 3 min

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

Combine the Music extension with sprite animation by using a broadcast as a beat signal — one sprite plays the drums, every other sprite listens and reacts.
Build a quarter-note pulse with forever + play drum (1 v) for (0.5) beats + broadcast (beat v) at a chosen tempo.
React to a beat with a dancer sprite that runs next costume and a quick size-pulse on every when I receive (beat v).

Warm-Up — predict the silent dancer 7 min

Across the last four lessons (L04-12 to L04-15) you built up the Music extension — drums, notes, tempo, and a kuih-stall theme stored in a My Block. The cat sat there listening to your beats like a serious music student. Today the cat finally moves.

Aisyah tried to make her cat dance using just the music sprite. She wrote this on the cat:


when flag clicked
set tempo to (120)
forever
  play drum (1 v) for (0.5) beats
  next costume
  play drum (2 v) for (0.5) beats
  next costume
end

One sprite, one loop, drums interleaved with costume swaps. Looks reasonable.

It works — but Aisyah wants to add a second dancer, a parrot, that also bops to the same beat. She copies the stack onto the parrot. Now click the flag. What goes wrong?

Reveal the answer

Two problems pile up. First, both sprites play drums at the same time, so every beat hits twice and slightly out of sync — it sounds like a stampede, not a song. Second, if Aisyah ever wants a third or fourth dancer she has to copy the drum stack again, and they'll all drift apart because Scratch doesn't perfectly sync separate loops.

Today's pattern fixes both. One sprite owns the beat. It plays the drums and shouts "beat!" every quarter-note. Every dancer sprite listens. Add a tenth dancer? Just give it a when I receive (beat v) hat — no drums, no drift. The music sprite is the conductor; the dancers are the orchestra.

That conductor-and-orchestra split is the whole trick today. Broadcasts are the baton.

New Concept — beats as broadcasts 15 min

You already know broadcasts from Level 2 onwards. You've used them for events — game-over, egg-caught, level-up — moments that happen rarely. Today you'll use a broadcast for a rhythm — a beat that fires many times a second. Same block, different rhythm of use.

The conductor sprite

Pick one sprite to be the music sprite. It doesn't even have to be visible — many projects use an invisible "Music" sprite that just runs the beat loop. Its job has two halves:

Play one drum hit.
Send out a broadcast (beat v) so every dancer knows a beat just landed.


when flag clicked
set tempo to (120)
forever
  play drum (1 v) for (0.5) beats
  broadcast (beat v)
end

The smallest conductor. 120 BPM means each beat is half a second; play drum for (0.5) beats = a quarter-note at this tempo. After every drum hit, fire the broadcast.

The dancer sprite

Now any sprite anywhere in the project can react to the beat. Give the cat two costumes (most cat sprites already come with cat-a and cat-b) and this hat:


when I receive (beat v)
next costume

The cat swaps costumes on every beat. Two costumes + 120 BPM = a four-on-the-floor leg-swap that lines up with the kick drum.

Adding the size pulse

Costume swaps alone read as "the cat is walking on the spot." For real dancing, add a size pulse — the cat gets briefly bigger on the beat, then snaps back. Bigger on hit, smaller on rest:


when I receive (beat v)
next costume
change size by (10)
wait (0.15) seconds
change size by (-10)

Pulse of +10 size on the beat, wait a moment, snap back to normal. The wait (0.15) seconds must be shorter than the gap between beats or the cat never finishes pulsing before the next one starts.

Why broadcasts beat copy-pasting

If you wanted a parrot dancer too, you would not add drum blocks to the parrot. You would give it the same beat hat, perhaps with different costume names:


when I receive (beat v)
next costume
turn cw (15) degrees

The parrot rocks side-to-side instead of pulsing. Same beat signal; different reaction. Add ten more dancers — they all stay in time, because they all listen to the same baton.

Worked Example — Cat & Drum, the smallest dance routine 25 min

We'll build a two-sprite project from scratch. Music sprite plays the beat. Cat sprite dances. Nine steps.

Stage plan. The Music sprite (conductor, left) plays drums and fires a beat broadcast every quarter-note. The cat (see the ✏️ badge, right) listens with a when I receive (beat v) hat and reacts with a costume swap + size pulse. One conductor, any number of dancers.

Step 1 — Start a new project, add the Music extension

New project. Bottom-left of the Stage area, click the blue Add Extension button. Pick Music. The pink Music palette appears in your block list. You did this back in SCR-L04-12 — same drill.

Step 2 — Add the Music sprite

Click the cat-with-plus icon at the bottom-right of the sprite list. Choose Paint and draw a tiny invisible-feeling icon (a music note) — or pick Drum-Kit from the sprite library. Rename it to Music. This is your conductor.

Step 3 — Conductor: set the tempo

On the Music sprite, drop:


when flag clicked
set tempo to (120)

120 BPM is a relaxed pop tempo. You can crank it to 160 for a punk gig or drop it to 80 for slow jazz — any time after you have the rest working.

Step 4 — Conductor: the beat loop

Snap a forever under it, drop in play drum (1 v) for (0.5) beats (drum 1 is the snare in Scratch's drum kit; drum 2 is the bass), then broadcast (beat v) as the second block inside the loop:


when flag clicked
set tempo to (120)
forever
  play drum (1 v) for (0.5) beats
  broadcast (beat v)
end

Hit drum, fire broadcast, repeat. Each loop iteration takes 0.5 beats. The broadcast is instant, so it doesn't add to the timing.

Hit the flag. You should hear a snare hit every half-second. The cat does nothing yet — it has no beat hat.

Step 5 — Dancer: check the costumes

Click the cat sprite. Open the Costumes tab. The default Scratch cat ships with two costumes: cat-a (paws together) and cat-b (paws apart). If yours has only one, duplicate it and slightly shift one paw.

Step 6 — Dancer: the smallest reactor

On the cat, drop:


when I receive (beat v)
next costume

Click the flag. The cat now legs-swap in perfect time with the snare. Already looks like walking-on-the-spot to a beat.

Step 7 — Dancer: add the size pulse

Extend the cat's stack so it bobs as well:


when I receive (beat v)
next costume
change size by (10)
wait (0.15) seconds
change size by (-10)

The cat puffs up by 10% on each beat, then deflates 0.15 s later — well before the next beat at 0.5 s.

Click the flag. The cat now bounces. That tiny up-down breathe is the difference between "walking on a treadmill" and "dancing."

Step 8 — Reset the size on every flag click

If you stop and restart, the cat might be mid-pulse when stopped — it'll start the next run at 110%. Add a reset on the cat:


when flag clicked
set size to (100) %
switch costume to (cat-a v)

One-shot setup. Sets the cat back to 100% size and the first costume, so every run starts clean.

Step 9 — The full project

Here's everything across both sprites — the whole thing fits in three small stacks.


when flag clicked
set tempo to (120)
forever
  play drum (1 v) for (0.5) beats
  broadcast (beat v)
end

Music sprite. The conductor. 4 blocks inside, 1 hat, 1 loop = 6 blocks total.


when flag clicked
set size to (100) %
switch costume to (cat-a v)

Cat sprite, reset stack. 3 blocks.


when I receive (beat v)
next costume
change size by (10)
wait (0.15) seconds
change size by (-10)

Cat sprite, dance reactor. 5 blocks.

What you just built: a complete music-driven animation system in 14 blocks. The exact same pattern powers rhythm games, music visualisers, and the dancing characters in any pop-music app. Conductor + listener + broadcast. The cat is the orchestra. The drum is the baton. The broadcast is the air between them.

Try It Yourself — three remix drills 20 min

🟢 Easy

Goal: Add a second dancer — a Parrot, a Ball, anything from the sprite library — that also reacts to the beat. Give it a different reaction: maybe it rotates 30° clockwise instead of pulsing in size.


when I receive (beat v)
turn cw (30) degrees

One block of reaction, plus the hat. The parrot will spin a full turn every 12 beats — a slow background rotation while the cat bounces in the foreground.

Think: Notice you didn't touch the Music sprite at all. The broadcast was already firing — you just added a new listener. The conductor doesn't know how many dancers it has. That's the power of the pattern.

🟡 Medium

Goal: Add a second drum on the off-beat — like a bass drum (drum 2) between the snare hits. Use two beats in the conductor loop, but only fire the broadcast on the snare so the dancer still keeps a steady quarter-note pulse.


when flag clicked
set tempo to (120)
forever
  play drum (1 v) for (0.5) beats
  broadcast (beat v)
  play drum (2 v) for (0.5) beats
end

Snare-then-bass alternating. The broadcast still fires only on the snare, so the cat's pulse stays on the snare beat. Now your project has rhythm and a backbeat.

Think: If you put the broadcast (beat v) after the bass drum as well, the cat would react twice as often. Try it — does that look like dancing, or does it look like a glitch?

🔴 Stretch

Goal: Add a tempo slider. Make a variable called bpm with a slider watcher (right-click the watcher on Stage, choose slider, range 60 to 200). The conductor reads the slider every loop. Now you can drag the slider during playback and watch the cat speed up or slow down.


when flag clicked
forever
  set tempo to (bpm)
  play drum (1 v) for (0.5) beats
  broadcast (beat v)
end

Tempo is re-read on every iteration, so dragging the slider takes effect on the next beat. Don't forget to remove the old set tempo to (120) — the slider replaces it.

Think: What happens to the cat's size-pulse at 200 BPM? At 200 BPM each beat is 0.3 s; the cat's 0.15 s wait is half a beat — still fine. Push the slider to 300 BPM and the pulse never resets before the next beat lands. Bug surfaces. The slider is a live stress-test of your animation timing.

Mini-Challenge — "Faiz's stuck-big cat" 5 min

The dancer that puffs up and never deflates

Faiz built the cat reactor but his cat keeps growing. After ten seconds it's the size of the Stage. He shows you this stack:


when I receive (beat v)
next costume
change size by (10)
wait (1) seconds
change size by (-10)

Faiz's dancer. Looks identical to yours — but the cat puffs up forever. Find the bug.

What's wrong, and what tiny change fixes it?

Reveal one valid solution

The wait (1) seconds is longer than the gap between beats. At 120 BPM each beat is 0.5 s. Faiz's cat receives a beat, grows by 10%, and starts waiting one full second to shrink — but the next beat lands at 0.5 s and triggers a fresh instance of the same stack. That fresh stack also grows by 10%, then waits a full second. Meanwhile a third beat fires, then a fourth...

By the time the first stack finally finishes its wait and does change size by (-10), eight or nine other stacks have already pumped the cat up by +10 each. The shrinks dribble in slowly, the grows pile up fast, and the cat balloons.

The fix is to make the wait shorter than the beat gap:


when I receive (beat v)
next costume
change size by (10)
wait (0.15) seconds
change size by (-10)

The deeper lesson: when n broadcasts can fire while one handler is still running, the handler runs n times in parallel. Every grow gets matched by a shrink, but only if every handler instance finishes before the next beat. Make the handler shorter than the beat.

🚀 Mission — Polish your kuih-stall Music Maker

Combine everything from the arc into one polished project:

Music sprite (conductor): plays a steady snare at 120 BPM and broadcasts beat every quarter-note.
Cat sprite (dancer): size-pulse + next costume on every when I receive (beat v). Reset to 100% size and costume 1 on flag click.
Melody sprite: plays the kuih-stall theme from Lesson 15 twice using the play melody My Block.
Polish: add a backdrop (pick a market or stage backdrop), name your project "Kuih-Stall Music Maker", and test that it runs cleanly from the flag three times in a row.

✅ Done when: the cat dances in sync with the beat while the theme song plays, and the project runs cleanly every flag click. Going further: add a second dancer sprite that spins 20° on every beat, and a bpm slider so the audience can control the speed.

Recap 3 min

You finished Cluster C — the Music Maker arc. A music sprite plays drums in a forever loop and fires broadcast (beat v) after every hit. Any number of dancer sprites can listen with when I receive (beat v) and do their own reaction — next costume, a size pulse, a rotation, a colour change. The conductor doesn't know who's listening; the dancers don't know who's playing. They're loosely coupled through a shared beat name, which is exactly how every real music app (and every real game engine) keeps things in sync. You now have music and animation working together — the last piece you needed before next week's multi-level platformer build.

Tempo: The speed of the beat, measured in beats per minute (BPM). Set with set tempo to (). 120 BPM is dance-pop; 60 BPM is a slow ballad; 180 BPM is punk.
Quarter-note pulse: One beat fired regularly, the "thump-thump-thump" of a kick drum at concert. In Scratch, play drum for (0.5) beats inside forever creates a steady quarter-note pulse.
Conductor: The single sprite responsible for running the rhythm and broadcasting beats. By convention, no other sprite plays drums — only the conductor does.
Beat broadcast: A broadcast (typically named beat) that fires once per beat. Other sprites listen with when I receive (beat v) and react however they like, in sync with the music.
Size pulse: The animation of growing a sprite briefly larger then snapping it back, used to make sprites feel like they're "hitting" the beat physically. change size by (10) + wait + change size by (-10).

Homework 2 min

The Three-Dancer Stage. Build a one-conductor, three-dancer project. Each dancer reacts to the beat in a different way.

One Music sprite playing a steady snare at 120 BPM, broadcasting beat every quarter-note. Reuse the conductor stack from the worked example.
Dancer 1 — your cat — does the size-pulse-plus-next-costume routine from the lesson.
Dancer 2 — a sprite of your choice — rotates 30° on every beat (a slow background spin).
Dancer 3 — another sprite — moves 5 steps right on the beat, and 5 steps left on every other beat (use a small variable that flips between 1 and −1 each beat).
Save as HW-L4-16-Three-Dancer-Stage.sb3.

Bring back next class:

The .sb3 file.
Your answer to: "You added three dancers. How many drum blocks did you write? Why is that number not three?"

Heads up for next class: SCR-L04-17 opens Cluster D — the multi-level platformer build that will run for the next eight lessons. We start, as always, on paper. Bring two A4 sheets and a pencil. No Scratch needed.