Firework Show IV — Scratch L3 Lesson 16

Learnt28 min · spotting the repeat, naming it, moving it
Basic24 min · the finished show, in named parts
Challenge 1–327 min · name it, change one place, a running order
Extrabonus · ship it

WHAT IT SHOULD LOOK LIKE

The same show, before and after. Nothing on the Stage changes — that is the whole point of refactoring. What changes is whether anybody can read the code.

thirty-two blocks

eight blocks, identical show

panels run left to right

Review — where we got to 5 min

A My Block holds a stack under a name, and inputs let the call vary it.
Run without screen refresh finishes a whole definition before the Stage redraws.
Tick it for a burst; leave it for a flight.

Quick-fire

Last lesson you split launch into fly to and burst. The show looked exactly the same afterwards. Was that a waste of time?

Reveal the answer

No — the show being unchanged is the sign you did it right. Today that has a name: refactoring.

Today’s Topic 3 min

Refactoring — changing how code is arranged, not what it does
Spotting the part that repeats
Turning the differences into inputs
A script that reads like a running order

Learning outcome

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

Find the repeated part of a long script.
Move it into a My Block without changing what the audience sees.
Say why a script made of named blocks is easier to change.

Learnt — the same show, arranged better 28 min

1 · A script nobody can read

Here is a show that works. Four fireworks, written out in full, thirty-two blocks in one column:


when flag clicked
hide
show
set size to (45) %
go to x: (-150) y: (-170)
glide (0.4) secs to x: (-150) y: (70)
hide
repeat (16)
  create clone of [myself v]
end
wait (0.5) seconds
show
set size to (45) %
go to x: (-50) y: (-170)
glide (0.4) secs to x: (-50) y: (110)
hide
repeat (16)
  create clone of [myself v]
end

…and twice more. Every firework is the same seven blocks with two numbers changed.

WHAT IT SHOULD LOOK LIKE

Four fireworks spelled out is thirty-two blocks in one column. It works perfectly, and you cannot tell what it does without reading every line.

one long script

Runs here in the page. Nothing to install.

How to use this: Click the green flag. It is a perfectly good show — the problem is not on the Stage.

Four fireworks, thirty-two blocks. Nothing wrong with it, and nobody wants to change it.

2 · Find what repeats, and what differs

Read the four copies side by side and ask two questions:

What is the same every time? Show, set size, go to the bottom, glide up, hide, make clones.
What changes? Only the x and the height.

What is the same becomes the definition. What changes becomes the inputs. That is the whole method, and it works on any repeated stack you will ever write.

3 · Move it, do not retype it

Make a block called launch with inputs x and height.
Drag the first firework’s seven blocks out of the script and under the define hat — do not build them again.
Replace the two numbers in them with the ovals from the hat.
Put launch (-150) (70) :: custom where the stack used to be.
Run it. The first firework should be exactly as it was.
Now delete the other three stacks and replace each with a call.


when flag clicked
hide
launch (-150) (70) :: custom
wait (0.5) seconds
launch (-50) (110) :: custom
wait (0.5) seconds
launch (50) (130) :: custom
wait (0.5) seconds
launch (150) (80) :: custom

Eight blocks. Same show, and now you can see the shape of it: an arch, left to right.

WHAT IT SHOULD LOOK LIKE

Pull the repeated part into a block with the differences as inputs, and the script becomes four lines that say where the fireworks go.

the script now reads

Runs here in the page. Nothing to install.

How to use this: Click the green flag and compare it with the demo above. They should be indistinguishable.

If you can spot a difference on the Stage, the refactor went wrong.

4 · Why bother, when it already worked?

You can see what the show does without reading it.
Changing every firework is one edit, not four.
Adding a fifth is one block.
A bug in the firework is in one place, so fixing it fixes all of them.

Basic — the finished show 24 min

Open your show. You are building the version you will share.

Step 1 — four names

count down — the opening, refresh ON.
fly to (x) (height) — the rocket’s journey, refresh ON.
burst (sparks) — the explosion, refresh OFF.
finale — three big ones at once.

Step 2 — move the work in

Drag your existing stacks under the right define hats.
Run after each one.

Step 3 — build the finale out of the others

finale should call fly to and burst, three times.
It should not contain a single go-to or clone block of its own.

Step 4 — the running order

Under the green flag: count down, two launches, then the finale.
Read it out loud. It should sound like a plan for a real show.

Step 5 — check nothing broke

Run it three times.
Check the sparks counter finishes on roughly the same number each time.


when flag clicked
set [sparks made v] to (0)
count down :: custom
fly to (-140) (80) :: custom
burst (24) :: custom
wait (0.5) seconds
fly to (140) (90) :: custom
burst (24) :: custom
wait (0.5) seconds
finale :: custom

Every line is something the audience can see happening. That is what a good script looks like.

Runs here in the page. Nothing to install.

How to use this: Click the green flag and watch the whole thing: countdown, two fireworks, then the finale.

What you are aiming at. Four named blocks, and a script you could hand to somebody else.

The countdown makes the fireworks enormous.

count down sets the size to 90 and does not set it back. A block should put back anything it changes.

The finale fires from the wrong places.

It is calling burst without calling fly to first, so the rocket is wherever the last firework left it.

Everything happens at once.

The waits were left behind in the old script when you dragged the stacks out. They belong between the calls.

The show is different every run and I did not ask for that.

A pick random is still inside a definition from Lesson 3-13. Move it into the call, or take it out.

CHALLENGE 1 · L3-16-M1🪙 30 Adcoins8 min

Name the repeated bit

Invent a firework with a shape to it — a double bang, say, one burst then another higher up. Then notice you have written it three times, and fix that.

A double-bang firework, fired in three places.
The two-burst shape is written once.
The script is three blocks.

WHAT IT SHOULD LOOK LIKE

Challenge 1 — a shape that repeats three times gets one name and three calls.

a double bang, three times

Runs here in the page. Nothing to install.

How to use this: Click the green flag: three double bangs, left, middle and right.

Two bursts per firework, three fireworks, one definition.

Done when: the double bang happens three times and the blocks that make it appear once in your project.

Teacher note

Let them write it out three times first. The refactor lands much harder when they have felt the copy-paste, and it takes ninety seconds.

CHALLENGE 2 · L3-16-M2🪙 50 Adcoins9 min

Change the show without touching the show

Make every firework twice as big, editing only a definition.

The green-flag script is not changed at all.
Every burst doubles.
The sparks counter proves it: you asked for 36 and got 72.

WHAT IT SHOULD LOOK LIKE

Challenge 2 — the script asks for 36 sparks and gets 72, because the definition changed and the script did not.

doubled in one place

Runs here in the page. Nothing to install.

How to use this: Click the green flag. The script asked for 12 sparks each; read the counter at the end.

36 asked for, 72 delivered. One multiply, inside the definition.

Done when: the counter reads double what the calls add up to, and you did not open the green-flag script.

Teacher reveal


define burst (sparks)
repeat ((sparks) * (2))
  create clone of [myself v]
end

Worth asking whether this is a good change. It makes the calls lie: a call saying 12 produces 24. Better would be to change the numbers in the calls — unless you want every future call doubled too. There is no right answer, and noticing the question is the point.

CHALLENGE 3 · L3-16-M3🪙 70 Adcoins10 min

A running order

Give your show three sections, and make the script say so.

opening, middle and ending.
The green-flag script is those three blocks and nothing else.
Each section is clearly different to watch.

WHAT IT SHOULD LOOK LIKE

Challenge 3 — a block per section, and a script anybody could read out loud.

opening. middle. ending.

Runs here in the page. Nothing to install.

How to use this: Click the green flag: a title, two fireworks, then ninety sparks all at once.

Three blocks in the script. Everything else is inside a name.

Done when: somebody can read your green-flag script and describe the show without running it.

Teacher note

This is the point to say the quiet part: the green-flag script is now documentation. It is the only bit of the project anybody else will read, and it tells the truth because it is also the code.

EXTRA MISSION · L3-16-MX🪙 100 Adcoinsbonus

Ship it

Finish the show and share it. This is the end of the arc — make it something you would put on in front of people.

A countdown, several launches and a finale.
Every block named for what it does, with the tickbox where it belongs.
A green-flag script four lines long.
Counters at the end: how many fireworks, how many sparks.

WHAT IT SHOULD LOOK LIKE

Extra — the show shipped: a countdown, three launches, a finale, and a script four lines long.

the finale

Runs here in the page. Nothing to install.

How to use this: Click the green flag and watch the finished show: countdown, three launches, finale, then the totals.

Six fireworks and 236 sparks, from a script of four lines.

Teacher reveal — the whole project, in names


when flag clicked
count down :: custom
repeat (3)
  launch (pick random (-160) to (160)) (pick random (60) to (130)) (22) :: custom
  wait (0.45) seconds
end
finale :: custom

Five blocks. Behind them: count down, launch, burst and finale, and launch calls burst while finale calls launch. That layering is what every large program looks like, and a Level 3 pupil has just built one.

Summary 5 min

Refactoring is changing how code is arranged without changing what it does.
Find what repeats; that is the definition. Find what differs; those are the inputs.
Drag the blocks, do not retype them — and run it after every step.
If the Stage looks different afterwards, something went wrong.
A script made of good names is the clearest description of a project there is.

Refactoring: Rearranging code without changing what it does.
Duplication: The same blocks written more than once.
Running order: A script of named calls that reads like a plan.
Layering: Blocks built out of other blocks.

Hand in

Share your finished show and send the link to your teacher. It should count down, fire several fireworks and finish with a finale — and its green-flag script should be short enough to read at a glance.

That is sixteen lessons and four games. You have met the operators, lists, two algorithms, and now the blocks that let a project grow without becoming a mess.

Learnt28 min · spotting the repeat, naming it, moving it
Basic24 min · the finished show, in named parts
Challenge 1–327 min · name it, change one place, a running order
Extrabonus · ship it

WHAT IT SHOULD LOOK LIKE

The same show, before and after. Nothing on the Stage changes — that is the whole point of refactoring. What changes is whether anybody can read the code.

thirty-two blocks

eight blocks, identical show

panels run left to right

Review — where we got to 5 min

A My Block holds a stack under a name, and inputs let the call vary it.
Run without screen refresh finishes a whole definition before the Stage redraws.
Tick it for a burst; leave it for a flight.

Quick-fire

Last lesson you split launch into fly to and burst. The show looked exactly the same afterwards. Was that a waste of time?

Reveal the answer

No — the show being unchanged is the sign you did it right. Today that has a name: refactoring.

Today’s Topic 3 min

Refactoring — changing how code is arranged, not what it does
Spotting the part that repeats
Turning the differences into inputs
A script that reads like a running order

Learning outcome

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

Find the repeated part of a long script.
Move it into a My Block without changing what the audience sees.
Say why a script made of named blocks is easier to change.

Learnt — the same show, arranged better 28 min

1 · A script nobody can read

Here is a show that works. Four fireworks, written out in full, thirty-two blocks in one column:


when flag clicked
hide
show
set size to (45) %
go to x: (-150) y: (-170)
glide (0.4) secs to x: (-150) y: (70)
hide
repeat (16)
  create clone of [myself v]
end
wait (0.5) seconds
show
set size to (45) %
go to x: (-50) y: (-170)
glide (0.4) secs to x: (-50) y: (110)
hide
repeat (16)
  create clone of [myself v]
end

…and twice more. Every firework is the same seven blocks with two numbers changed.

WHAT IT SHOULD LOOK LIKE

Four fireworks spelled out is thirty-two blocks in one column. It works perfectly, and you cannot tell what it does without reading every line.

one long script

Runs here in the page. Nothing to install.

How to use this: Click the green flag. It is a perfectly good show — the problem is not on the Stage.

Four fireworks, thirty-two blocks. Nothing wrong with it, and nobody wants to change it.

2 · Find what repeats, and what differs

Read the four copies side by side and ask two questions:

What is the same every time? Show, set size, go to the bottom, glide up, hide, make clones.
What changes? Only the x and the height.

What is the same becomes the definition. What changes becomes the inputs. That is the whole method, and it works on any repeated stack you will ever write.

3 · Move it, do not retype it

Make a block called launch with inputs x and height.
Drag the first firework’s seven blocks out of the script and under the define hat — do not build them again.
Replace the two numbers in them with the ovals from the hat.
Put launch (-150) (70) :: custom where the stack used to be.
Run it. The first firework should be exactly as it was.
Now delete the other three stacks and replace each with a call.


when flag clicked
hide
launch (-150) (70) :: custom
wait (0.5) seconds
launch (-50) (110) :: custom
wait (0.5) seconds
launch (50) (130) :: custom
wait (0.5) seconds
launch (150) (80) :: custom

Eight blocks. Same show, and now you can see the shape of it: an arch, left to right.

WHAT IT SHOULD LOOK LIKE

Pull the repeated part into a block with the differences as inputs, and the script becomes four lines that say where the fireworks go.

the script now reads

Runs here in the page. Nothing to install.

How to use this: Click the green flag and compare it with the demo above. They should be indistinguishable.

If you can spot a difference on the Stage, the refactor went wrong.

4 · Why bother, when it already worked?

You can see what the show does without reading it.
Changing every firework is one edit, not four.
Adding a fifth is one block.
A bug in the firework is in one place, so fixing it fixes all of them.

Basic — the finished show 24 min

Open your show. You are building the version you will share.

Step 1 — four names

count down — the opening, refresh ON.
fly to (x) (height) — the rocket’s journey, refresh ON.
burst (sparks) — the explosion, refresh OFF.
finale — three big ones at once.

Step 2 — move the work in

Drag your existing stacks under the right define hats.
Run after each one.

Step 3 — build the finale out of the others

finale should call fly to and burst, three times.
It should not contain a single go-to or clone block of its own.

Step 4 — the running order

Under the green flag: count down, two launches, then the finale.
Read it out loud. It should sound like a plan for a real show.

Step 5 — check nothing broke

Run it three times.
Check the sparks counter finishes on roughly the same number each time.


when flag clicked
set [sparks made v] to (0)
count down :: custom
fly to (-140) (80) :: custom
burst (24) :: custom
wait (0.5) seconds
fly to (140) (90) :: custom
burst (24) :: custom
wait (0.5) seconds
finale :: custom

Every line is something the audience can see happening. That is what a good script looks like.

Runs here in the page. Nothing to install.

How to use this: Click the green flag and watch the whole thing: countdown, two fireworks, then the finale.

What you are aiming at. Four named blocks, and a script you could hand to somebody else.

The countdown makes the fireworks enormous.

count down sets the size to 90 and does not set it back. A block should put back anything it changes.

The finale fires from the wrong places.

It is calling burst without calling fly to first, so the rocket is wherever the last firework left it.

Everything happens at once.

The waits were left behind in the old script when you dragged the stacks out. They belong between the calls.

The show is different every run and I did not ask for that.

A pick random is still inside a definition from Lesson 3-13. Move it into the call, or take it out.

CHALLENGE 1 · L3-16-M1🪙 30 Adcoins8 min

Name the repeated bit

Invent a firework with a shape to it — a double bang, say, one burst then another higher up. Then notice you have written it three times, and fix that.

A double-bang firework, fired in three places.
The two-burst shape is written once.
The script is three blocks.

WHAT IT SHOULD LOOK LIKE

Challenge 1 — a shape that repeats three times gets one name and three calls.

a double bang, three times

Runs here in the page. Nothing to install.

How to use this: Click the green flag: three double bangs, left, middle and right.

Two bursts per firework, three fireworks, one definition.

Done when: the double bang happens three times and the blocks that make it appear once in your project.

Teacher note

Let them write it out three times first. The refactor lands much harder when they have felt the copy-paste, and it takes ninety seconds.

CHALLENGE 2 · L3-16-M2🪙 50 Adcoins9 min

Change the show without touching the show

Make every firework twice as big, editing only a definition.

The green-flag script is not changed at all.
Every burst doubles.
The sparks counter proves it: you asked for 36 and got 72.

WHAT IT SHOULD LOOK LIKE

Challenge 2 — the script asks for 36 sparks and gets 72, because the definition changed and the script did not.

doubled in one place

Runs here in the page. Nothing to install.

How to use this: Click the green flag. The script asked for 12 sparks each; read the counter at the end.

36 asked for, 72 delivered. One multiply, inside the definition.

Done when: the counter reads double what the calls add up to, and you did not open the green-flag script.

Teacher reveal


define burst (sparks)
repeat ((sparks) * (2))
  create clone of [myself v]
end

CHALLENGE 3 · L3-16-M3🪙 70 Adcoins10 min

A running order

Give your show three sections, and make the script say so.

opening, middle and ending.
The green-flag script is those three blocks and nothing else.
Each section is clearly different to watch.

WHAT IT SHOULD LOOK LIKE

Challenge 3 — a block per section, and a script anybody could read out loud.

opening. middle. ending.

Runs here in the page. Nothing to install.

How to use this: Click the green flag: a title, two fireworks, then ninety sparks all at once.

Three blocks in the script. Everything else is inside a name.

Done when: somebody can read your green-flag script and describe the show without running it.

Teacher note

This is the point to say the quiet part: the green-flag script is now documentation. It is the only bit of the project anybody else will read, and it tells the truth because it is also the code.

EXTRA MISSION · L3-16-MX🪙 100 Adcoinsbonus

Ship it

Finish the show and share it. This is the end of the arc — make it something you would put on in front of people.

A countdown, several launches and a finale.
Every block named for what it does, with the tickbox where it belongs.
A green-flag script four lines long.
Counters at the end: how many fireworks, how many sparks.

WHAT IT SHOULD LOOK LIKE

Extra — the show shipped: a countdown, three launches, a finale, and a script four lines long.

the finale

Runs here in the page. Nothing to install.

How to use this: Click the green flag and watch the finished show: countdown, three launches, finale, then the totals.

Six fireworks and 236 sparks, from a script of four lines.

Teacher reveal — the whole project, in names


when flag clicked
count down :: custom
repeat (3)
  launch (pick random (-160) to (160)) (pick random (60) to (130)) (22) :: custom
  wait (0.45) seconds
end
finale :: custom

Summary 5 min

Refactoring is changing how code is arranged without changing what it does.
Find what repeats; that is the definition. Find what differs; those are the inputs.
Drag the blocks, do not retype them — and run it after every step.
If the Stage looks different afterwards, something went wrong.
A script made of good names is the clearest description of a project there is.

Refactoring: Rearranging code without changing what it does.
Duplication: The same blocks written more than once.
Running order: A script of named calls that reads like a plan.
Layering: Blocks built out of other blocks.

Hand in

That is sixteen lessons and four games. You have met the operators, lists, two algorithms, and now the blocks that let a project grow without becoming a mess.